Adding Klavo to Your Framer Project

1. Open your Framer project

2. Navigate to the Components panel

3. Import or add the Klavo component to your canvas

4. The component will appear as a form container ready for configuration

Configuring the Setup Section

The Setup section contains the core settings required for your form to work.

Embed Key

The embed key is required for all form submissions:

1. Select the Klavo component on your canvas

2. Open the Properties panel

3. Navigate to the Setup section

4. Paste your embed key into the Embed Key field

Important: The embed key must be configured before publishing your site. Form submissions will not work without a valid embed key.

Domain

The Domain setting tells Klavo which site this form belongs to:

1. In the Setup section, find the Domain field

2. Enter the URL where this form will be used (for example: https://example.com or https://mysite.framer.website)

3. When your live site loads, Klavo compares this value with the current site domain

If the domains don’t match, the form will show a domain mismatch error and block submissions until the Domain value is corrected.

Recipient Email

Your recipient email is where form submissions will be sent:

1. In the Setup section, find the Recipient Email field

2. Enter your email address (or multiple addresses separated by commas)

3. Each address will receive a copy of every submission

Multiple Recipients: Each recipient email address counts as a separate credit. For example, if you specify two email addresses, each form submission will consume 2 email credits from your monthly allowance or top-ups.

Email Title

The Email Title controls the subject line of your submission emails:

1. In the Setup section, find the Email Title field

2. Enter the subject you want to see in your inbox (for example: New enquiry from website)

3. If left blank, Klavo uses "New Form Submission" by default

Basic Form Setup

Adding Fields

1. In the Properties panel, find the Fields section

2. Click the "+" button to add a new field

3. Configure each field:

   • Select the field type (Text, Email, Textarea, etc.)

   • Set the field label

   • Configure placeholder text

   • Set whether the field is required

Field Types Available

• Text - Single-line text input

• Email - Email address input with validation

• Textarea - Multi-line text input

• Select - Dropdown selection

• Checkbox - Single checkbox

• Checkbox Group - Multiple checkboxes

• Radio - Radio button group

• File - File upload

• Date - Date picker

Styling Your Form

Customize the appearance of your form in the styling sections:

• Label styling (fonts, colors, visibility)

• Input styling (colors, borders, padding)

• Button styling (colors, text, hover effects)

• Layout options (column or row layout)

Publishing Your Site

After configuring your form:

1. Ensure your Embed Key is set correctly

2. Enter the correct Domain for your live site

3. Set your Recipient Email (and optional Email Title)

4. Configure your Fields and styling

5. Publish your Framer site

Once published, visitors can submit the form on your live domain. Klavo will validate your license and domain before accepting submissions.

Testing Your Form

Before going live:

1. Test all form fields

2. Verify file uploads work correctly

3. Submit a test form to ensure emails are delivered

4. Check that conditional logic works as expected

Troubleshooting

If you encounter issues:

• Verify your embed key is correct

• Ensure your site is published (forms don't work in preview mode)

• Check that your recipient email is valid

• Review the Troubleshooting Guide for common issues