All Collections
ConvertKit Integrations
Integrating ConvertKit forms with Webflow
Integrating ConvertKit forms with Webflow

How to easily set up the integration with ConvertKit and Webflow

Updated over a week ago

Build your business website easily with no code. Integrate ConvertKit forms with no stress. Your online strategy just got even easier.

Set it up

There are two ways you can connect your ConvertKit forms to a Webflow page:

  1. Embedding the ConvertKit JavaScript code in a Webflow embed component

  2. Pointing a Webflow Form to your ConvertKit form

Option 1: Embedding the ConvertKit 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 ConvertKit 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 ConvertKit form

The second option allows you to use a Webflow-designed form and point the form action to ConvertKit.

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 ConvertKit to capture visitor counts—only the subscribers.

This means that your conversion rate in ConvertKit 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 ConvertKit.

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 ConvertKit

Click the submit button to access its settings.

Change the action to the action of your ConvertKit form. That will be a URL in this format:{ Form ID }/subscriptions

You 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:

Then in Webflow, change the form method from GET to POST.

3. Save and then make additional form configurations in ConvertKit

At this point your form will work, but there are a few more settings we can change inside ConvertKit:

A. Set a thank-you message or redirect to a page

Inside ConvertKit, 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!

Did this answer your question?