Build your business website easily with no code. Integrate Kit forms with no stress. Your online strategy just got even easier.
Set it up
There are two ways you can connect your Kit forms to a Webflow page:
Embedding the Kit JavaScript code in a Webflow embed component
Pointing a Webflow Form to your Kit form
Option 1: Embedding the Kit JavaScript code in a Webflow embed component
This first option requires a paid Webflow account in order to have access to their embed component.
1. Start by adding an embed component
2. Create a Kit form and grab the JavaScript embed code
Open your form in the form builder, then click on the Publish button to bring up your embed options:
3. Copy the entire JavaScript and paste it into your Webflow embed code
A downside of this method is that you can't see how the form will appear until you publish your site. This is because Webflow renders embedded JavaScript only on the final version of the site.
4. Publish and view your site to see the finished form
Option 2. Point a Webflow form to your Kit form
The second option allows you to use a Webflow-designed form and point the form action to Kit .
The advantages are that you can design your form inside Webflow and use Webflow's free plan. On the other hand, the disadvantages are that it's a few more steps and it won't allow Kit to capture visitor counts—only the subscribers.
This means that your conversion rate in Kit will always show 100%, which might not be accurate.
1. Select the email address field and change the name to "email_address"
Double click your Webflow form's email address field to edit its properties. Then in the right sidebar, look for the "Name" field under Form Settings.
By default, it will be "Email." You'll want to change that to "email_address" to match the field name in Kit .
Repeat this replacement in the Text Field Settings section. You can see both these sections in the screenshot below.
If you have additional fields, you'll repeat this process for each one.
2. Change the form action to point to Kit
Click the submit button to access its settings.
Change the action to the action of your Kit form. That will be a URL in this format:
https://app.kit.com/forms/{ Form ID }/subscriptionsYou can find the form ID from the URL of the form builder when you are editing your form:
For example, if your form ID is "1234567", then the action URL will be:
https://app.kit.com/forms/1234567/subscriptions
Then in Webflow, change the form method from GET to POST.
3. Save and then make additional form configurations in Kit
At this point your form will work, but there are a few more settings we can change inside Kit :
A. Set a thank-you message or redirect to a page
Inside Kit , you can set where the form should redirect after people have subscribed to it.
B. Configure double opt-in and the incentive email
You'll want to set if subscribers should be confirmed the moment they fill out the form (single opt-in), or if you want to confirm they own that email address by requiring verification (double opt-in).
The second option will result in a higher-quality list and is our recommendation.
Click the Edit Email Contents button to personalize your welcome message.
That's it!