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.
- Install WPForms (or WPForms Lite) and Integrate ConvertKit and WPForms.
- 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.
- Click “Settings” in the left column, then select “ConvertKit”. From the two dropdowns, select the Name and Email fields you created.
- 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”.
- 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”.
- Click “Save” in the top right corner, and exit out of the form builder.
- 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.
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.
Join Our Team at CultivateWP
We design and build high-performance custom WordPress themes for market leading web publishers. We're looking for designers & developers to join our team.