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 with 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

Then click "Embed" in the sub navigation to bring up your embed options:

3. Copy the entire JavaScript and paste it into your Webflow embed code

The one downside to this method is that you can't see how the Form will appear until you publish your site. This is because Webflow only renders embedded JavaScript 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 inside the Webflow and use the free plan. The disadvantages are that it's a few more steps and it won't send over visitor counts to ConvertKit, only the Subscribers. Which means your conversion rate in ConvertKit will always show 100%. 

1. Select the email address field and change the name to 'email_address'

Double click the email field to edit its properties. Then in the right sidebar look for the name field. By default it will be "Email" you'll want to change that to "email_address" to match the field name in ConvertKit.

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:

https://app.convertkit.com/forms/{ Form ID }/subscriptions

For our demo Form this was the URL:

https://app.convertkit.com/forms/1128825/subscriptions

You can find the Form ID from the page URL when you are editing your Form:

Then in Webflow change the Form method from GET to POST.

3. Save and then make additional 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 they subscribe. 

B. Configure Double Opt-in and the Confirmation 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! 

The All Important Double Opt-In

Did this answer your question?