How to connect your Webflow forms with Kit (formerly ConvertKit)

Kit (previously known as ConvertKit) is a popular tool for managing email lists for content creators, and while Webflow doesn’t offer a built-in integration yet, you can still connect them effortlessly! Here’s a quick guide with three methods to help you capture leads. Two of these options even let you maintain your Webflow form design while sending the data to Kit:

1. Adding ConvertKit/Kit on Webflow with a JavaScript form embed: The fastest option! Use Kit’s form code to embed a form directly into your site. This method uses Kit’s default form design rather than your Webflow styling.
2. Direct Webflow form integration with ConvertKit/Kit (recommended): Our top pick! This method keeps your Webflow form design intact while seamlessly sending data to Kit.
3. Zapier integration with Webflow forms and ConvertKit/Kit: Ideal for advanced workflows. Zapier helps you connect multiple tools or set up complex automations—all while keeping your Webflow form design intact.

Let’s explore each method, starting with the simplest!

Method 1: Adding ConvertKit/Kit on Webflow with a JavaScript form embed

This method uses JavaScript code to directly embed Kit's form within Webflow, offering a simple setup that preserves all of Kit's native functionality.

Step 1: Creating your Kit form

1. Log in to your Kit account (or create one).
2. Navigate to Growth > Landing Pages & Forms.
3. Click "Create Form" and select the "Inline" form type. Choose any template that suits your needs.

Step 2: Customize your Kit embedded form

1. Rename your form to something clear and easy to identify.
2. Add form fields such as first name and last name. For custom fields, create them by adding them to a subscriber’s profile first. Learn how to add custom fields in Kit.
3. Configure your form settings to prevent spam with reCAPTCHA and customize post-submission actions, such as displaying a success message, redirecting to a page, or sending a confirmation email.
4. Apply styling options, like font and border colors, typography, etc.
5. Kit allows you to add custom CSS for advanced styling, but ⚠️ be cautious—poorly written CSS can disrupt the design, making your form appear broken or difficult to use. Let BRIX Templates help you style your form with precision!

Step 3: Add your Kit form to Webflow

1. Click the "Publish" button to open the "Embed this form" popup.
2. By default, the "JavaScript" option will be selected. Simply click the "Copy" button next to the code provided.
3. In Webflow, add a "Code Embed" element where you want the form to appear. Then paste the Kit JavaScript embed code.

This method is the easiest to implement but uses Kit’s default design unless you add custom CSS.

Method 2: Direct Webflow form integration with ConvertKit/Kit (Recommended)

Choosing direct integration between Webflow forms and Kit is our favorite option. Here’s why:

• Keep your Webflow design intact: Use your existing Webflow forms without altering your design or dealing with external embeds.
• No third-party tools required: Avoid extra costs and complexity with automation tools like Zapier or Make.
• Use Webflow forms directly: Connect Webflow forms to Kit without adding extra form embeds or dealing with complicated code.

Now that you understand its advantages, let’s get started.

Step 1: Setting up your Kit form

The form action URL is a critical part of integrating your Webflow form with Kit. It’s essentially the address where your form submissions will be sent, ensuring the data flows directly from your Webflow form to your Kit account. While you don’t need to understand the technical details, extracting this form action URL is a necessary step in the setup process.

The following steps to create and configure your Kit account have already been detailed above in "Method 1". Here, we’ll summarize them briefly to keep things simple while still ensuring you can extract the form action URL correctly.

1. Create your form: Log in to your Kit account, navigate to Landing Pages & Forms, and create or select a form.
2. Open the embed options: Once your form is ready, click the "Publish" button to open the "Embed this form" popup. Switch from the "JavaScript" tab to the "HTML" tab.
3. Extract the form action URL and field names: Click the "Embed using HTML" button and copy the provided code. Paste it into our tool below and click "Get Action URL" to quickly retrieve the form action URL (from the action attribute) and field names from the HTML.

Step 2: Webflow form configuration

1. Set up your form's basic configuration:
   Go to your Webflow form settings and set the form method to "POST", and paste the "form action URL" you copied. This URL is crucial for ensuring your form submissions are sent directly to Kit.
2. Configure your form fields:
   Use the "field names" extracted from the tool earlier (e.g., email_address, or any custom fields you’ve created) to configure your Webflow form. These names must match exactly with the field names in your Kit form for the integration to work properly. Ensure your Webflow form includes the fields you’ve created, such as email_address and any additional custom fields (e.g., first_name or phone_number) based on your form.
3. Additional form settings:
   Customize your form's success message and error messages in Webflow, set up a redirect URL if needed, and test your form to ensure it works correctly. Make sure all required fields are properly configured.

Step 3: Testing and validation

1. Development testing: Submit several test entries, verify your field mapping is correct, and check all success and error handling scenarios.
2. Production validation: Test thoroughly in your live environment; verify subscriber additions are working properly.

Method 3: Zapier integration with Webflow forms and ConverKit/Kit

Zapier integration is another excellent option if you need more advanced automations with Webflow forms and Kit. This method allows you to maintain the same Webflow form design while setting up a Zapier workflow to automate tasks like triggering personalized email sequences or syncing form data with CRMs. While Zapier is flexible, keep in mind that it comes with a cost, which may increase for sites with high traffic. Here’s the step-by-step process:

Step 1: Setting up your Zapier workflow

1. Log in or Sign up: Log in to your Zapier account. If you don’t have an account yet, sign up for a free trial.
2. Use the pre-configured Zap: Save time by using this Zap, "Add Subscribers to Forms in Kit for New Webflow Form Submissions". This Zap is specifically designed to connect Webflow and Kit, so you don’t need to build one from scratch.
3. Connect your Webflow account: Follow the prompts to link it to Zapier. A new window will open, requesting permissions to access your Webflow account. You’ll first select the "Workspace" you want to use, then the "Website," and finally the specific form to connect. Simply follow the steps to complete the setup.

Step 2: Configuring the Kit Action

Once your Webflow account is connected, it’s time to set up the action in Kit. This step ensures that your form data is sent to Kit correctly.

1. Connect your Kit account: In the action step of the Zap, select Kit and connect your account. To do this, you’ll need your "API Secret" (found under "V3 Key" in Kit's settings). Navigate to Settings > Developer, locate the 'API Secret," and copy it. You’ll use this key to authorize Zapier, so copy it carefully.
2. Map your fields: Match the fields in your Webflow form (e.g., email_address, first_name) to the corresponding fields in Kit. This ensures your form data is sent to Kit accurately. If you’re using custom fields in Kit, make sure to map them as well.
3. Test the zap: Zapier allows you to run a test submission during setup, so check that the subscriber is added and the fields are mapped accurately.

Which method should you use to connect Webflow forms to Kit?

Deciding the best way to connect Webflow forms to Kit depends on your specific needs, use case, and technical skills. Each method has its strengths and trade-offs. Here’s a quick comparison of the three methods to help you decide which one is the best fit for your project:

Adding ConvertKit/Kit on Webflow with a JavaScript form embed

It’s ideal if you only need basic forms and want to leverage Kit’s native features without much customization.

• Quick setup: Perfect for getting your forms live without much effort.
• Standard functionality: Ideal if you don’t need advanced form behaviors or layouts.
• Native features: Leverages Kit’s built-in functionality, offering options beyond Webflow forms. For example, you can auto-confirm subscribers, send incentive emails, enable invisible reCAPTCHA, and even allow file downloads upon form submission—all without additional configuration.

Direct Webflow form integration with ConvertKit/Kit

This method is designed for those who want full control over their form’s design. It’s a great option if customization and brand consistency are important to you.

• Custom designs: Allows you to create forms that perfectly align with your brand’s look and feel.
• Complex layouts: Ideal for forms with detailed structures or multiple sections.

Zapier integration with Webflow forms and ConvertKit/Kit

If you need advanced workflows or integration with other tools, Zapier is the best choice. This method is perfect for automating processes and connecting multiple systems, but keep in mind that it comes with an additional cost.

• Multi-tool integration: Leverage Zapier to unlock advanced automation, such as tagging subscribers dynamically in Kit, sending Slack notifications to your team, updating CRM records in HubSpot, or auto-adding form data to Google Sheets—all while maintaining Webflow's sleek form design.
• Speed of implementation: Zapier’s user-friendly interface allows you to set up powerful automations in minutes without requiring complex technical skills, getting your workflows up and running faster.
• Cost considerations: Zapier’s subscription fees can add up, especially for high-traffic sites or complex workflows.

Conclusion

Integrating Webflow forms with Kit depends on your needs and technical requirements. The Action URL method usually offers the best balance of functionality and control, while JavaScript embedding is a simpler alternative. For complex workflows, consider Zapier for robust automation.

Whether you're just starting with form integration or looking to optimize your existing setup, our team at BRIX Templates can help ensure your implementation meets your specific needs. Contact us for personalized support and expert guidance in creating the perfect integration solution for your project.