How to Setup ConvertKit with a WordPress Form

Integrate ConvertKit and WPForms easily connects forms on your website to your ConvertKit email marketing account, enabling you to capture more leads and manage campaigns more effectively.

WPForms‘ simple drag-and-drop form builder allows you to create new forms with ease and its clean, modern code makes customizations a snap. This integration also works with the free version, WPForms Lite, but I highly recommend purchasing the full WPForms for the valuable premium features and support.

Please support the development of this free plugin by using the affiliate links above.

Initial Setup

  1. Install WPForms (or WPForms Lite) and Integrate ConvertKit and WPForms.
  2. In the WordPress Dashboard, go to WPForms > Add New and create a form. You can add whatever fields you like, but at a minimum you must include a Name and Email field.
  3. Click “Settings” in the left column, then select “ConvertKit”. From the two dropdowns, select the Name and Email fields you created.
  4. In a separate browser tab, go to ConvertKit, log in, and click Account. Copy the API Key, go back to the WPForms ConvertKit settings page, and paste it in the field titled “ConvertKit API Key”.
  5. Back on the ConvertKit site, click “Forms” then select the form you want to use (or create a new one). When editing the form, look at the URL. It should be something like https://app.convertkit.com/landing_pages/12345/edit. The number after “landing_pages/” and before “/edit”  is your Form ID. Copy this number, go back to WPForms ConvertKit settings page, and paste it in the field titled “Form ID”.
  6. Click “Save” in the top right corner, and exit out of the form builder.
  7. Insert the form somewhere on your site and test it out! Go to Pages, select a page, and above the content editor click “Add Form”. Select your form and click “Insert” to add it to the page.

Custom fields and tags

You can also pass additional fields beyond the first name and email address. ConvertKit stores additional fields as custom fields, and also allows you to segment subscribers using tags.

When editing a field in WPForms, open the Advanced tab and give it a CSS class of “ck-custom-yourcustomfield” where yourcustomfield is the name of your custom field.

In the screenshot below, we’re including the value of the “Which one best describes you” dropdown to the “need” custom field, so we added a CSS class of “ck-custom-need”.

If you would like to use the field to populate tags, add a CSS class of “ck-tag”. You’ll need to use the Tag ID (a number) when specifying a tag.

You may want to display one value to subscribers and a different value to ConvertKit. For instance, in the example below the dropdown includes an option for “I want to learn advanced techniques” but we’re setting the custom field value to “cricut-advanced”.

First, you’ll need to enable the “Show Values” checkbox by adding this code to your theme’s functions.php file or the Code Snippets plugin:

add_action( 'wpforms_fields_show_options_setting', '__return_true' );

Then you can check “Show Values”, and for each option in the dropdown you can specify a label (shown to visitors of your site) and value (sent to ConvertKit).

For more information on building integrations with WPForms, I recommend you read my post on Integrating your contact form with external services, and my collection of WPForms code snippets.

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments are closed. Continue the conversation with me on Twitter: @billerickson

Comments

  1. WpWebhelp says

    Hey Bill thanks for the post and the best part about this is you have made it very easy for us to understand it Thanks.

  2. niraj says

    I have been using WordPress form for the past 11 months and it’s one of the best tools. thanks for providing.

  3. Sasha-Shae says

    Hi Bill, thanks for sharing this. Just wondering, I am noticing that even though the forms are set to pull the Name and Email, when I check in CK, it only shows the email address, no name is attached for the subscribers who came in via the form. Any ideas why it’s not pulling that data and showing it in the CK subscribers list as well?

    • Bill Erickson says

      Have you selected the name field in WPForms > {select form} > Settings > ConvertKit? If you have the correct field selected, I’m not sure why the name would not appear in ConvertKit.

      • Sasha-Shae says

        Yeah I did and I too am at a loss as to why it’s not pulling it in. I just tried to refresh and resave the connection, let’s see if it ever starts pulling the info in.

  4. Matt says

    I also noticed like the previous commenter that the Name is not coming over in the request even when it is mapped in the ConvertKit settings, just the email…

    • Bill Erickson says

      The most recent version of this plugin includes support for WPForms Logs so you can track down issues like this.

      Go to WPForms > Tools > Logs and check “Enable Logs”, then select “Providers” as what you want to log.

      The next time the form is completed, WPForms will save a copy of ConvertKit’s API response into the logs (in WPForms > Tools > Logs). You can copy this API response and reach out to ConvertKit support to help diagnose the issue.

      • Matt says

        The problem is not with ConvertKit. The issue is in line 124 of class-integrate-convertkit-wpforms.php. It will always return false and not add the first_name variable to the request object. I modified it to get it to work but you may want to fix the plugin.

  5. Matt says

    Is there a way to add a CSS class to each specific checkbox option? The reason I ask is because each checkbox is a CK tag meaning to map correctly each option would need ck-tag added to the CSS. Or is there another way to do it?

    • Bill Erickson says

      If you add the `ck-tag` class to the checkbox field, all checked options inside that field will be added as tags in ConvertKit.