Table of Contents
Documentation
Welcome to Klavo! This guide will walk you through everything you need to know to create powerful, professional forms in Framer, from your first form to advanced setups.
1. Introduction: Klavo vs. Klavo Lite
Klavo is a suite of form components, and it comes in two versions to fit your needs perfectly.
Klavo (Pro)
The all-in-one solution. It includes a managed backend, file uploads, and email notifications right out of the box. If you want a form that just works with zero extra setup, this is for you.
Klavo Lite
The webhook version. This is for users who want to send their form data to other services like Zapier, Make, or Airtable. It's a one-time purchase that gives you full control over your data.
2. Getting Started: Activating Your Form
Activating your form is a simple, one-time process.
Step 1: Find Your License Key
After purchasing Klavo, you'll receive a unique License Key. Keep this handy.
Step 2: Add the Component & Keys
Drag a Klavo component onto your Framer canvas. In the properties panel on the right, you'll find the Activation section.
License Key
Paste your license key.
Project Key
This is the most important part. A Project Key is a unique ID that you create for your form. It can be something like contact-form-main or client-project-quote. This is what permanently links your license to this specific form.
Rules: Must be at least 8 characters, and can only contain lowercase letters, numbers, and hyphens. Once you publish your site, the form will activate automatically.
4. Advanced Properties: Conditional Logic
Conditional Logic allows you to show or hide a field based on a user's answer to a previous question. This is perfect for creating dynamic, interactive forms.
Example: A "How did you hear about us?" form.
Let's say you have a "Source" dropdown with options like Google, Twitter, and Other. You only want to show a "Please specify" text field if the user selects Other.
Step 1: Create the Controlling Field
First, create your Select field.
Label: Source
Options: Google, Twitter, Other
Step 2: Create the Conditional Field
Next, create the Text field that you want to show or hide.
Label: Please specify
Step 3: Set Up the Condition
With the "Please specify" field selected, find the Conditional Logic section in the properties panel and turn it on.
If Field...: Type the exact label of the controlling field: Source
Operator: Set this to is.
Value: Type the exact option that should trigger this field: Other
Now, the "Please specify" field will only appear when a user selects "Other" from the dropdown. It's that simple!
Now, the "Please specify" field will only appear when a user selects "Other" from the dropdown. It's that simple!
5. Component Features
Layout Control (Klavo Step & Klavo Step Lite)
Steps Property
This is where you build your form. You can add, remove, and reorder steps. Each step contains its own set of fields.
Title & Description: Each step has a title and an optional description that will be displayed to the user.
Fields: Add and configure the form fields for each specific step, including advanced options like conditional logic.
Sections
The multi-step forms are divided into three sections, and you can control the spacing between them using the Section Gap property under Appearance > Layout.
Progress Indicators (Klavo Step & Klavo Step Lite)
Choose from three different styles for your multi-step progress indicator:
Bar: A clean, modern loading bar.
Dots: Simple dots to indicate the current step.
Numbers: Numbered circles for a more traditional step-by-step feel.
7. Backend & Security
The Klavo full-stack service is built on a robust and secure backend infrastructure, powered by Supabase.
Managed Backend
We handle all data storage, processing, and security. You never need to configure a server or database. The form_submissions table securely stores a complete JSON copy of every successful submission for your records.
Klavo (Full-Stack)
All submissions are sent to our backend, which uses a "honeypot" method to identify and block spam. These attempts are logged in your spam_logs table for review.
Klavo Lite
A client-side honeypot is included to prevent spam from ever being sent to your webhook URL.
License & Subscription Management
Our backend automatically syncs with Lemon Squeezy via webhooks. If a subscription is cancelled or paused, your forms will automatically and securely stop accepting submissions.
Agency Logs (Pro+ Only
For Pro+ license holders, every new site activation is logged in the pro_plus_log table, providing a clear record of where your license is being used.
6. Troubleshooting
License already activated on another domain
Your single-site license has been locked to the first website it was used on. You'll need a new license for a new site.
License already in use
The License Key / Project Key combination has already been used. Make sure your Project Key is unique for this form
Submissions Not Working?
For Klavo Lite, double-check your Webhook URL.
For all forms, ensure your License Key and Project Key are correct.
Webhook URL
The endpoint where form data will be sent (e.g., a Zapier or Make URL).
Access Key (Optional)
A secret key or token that will be sent in the Authorization header for services that require it.
For further assistance, please refer to our FAQs or contact support.
Klavo
Powerful forms, effortless setup.
© 2025 Klavo
Resources