Want to use ConvertKit with Elementor? You’ve got options.
You can either:
Directly add ConvertKit forms to your Elementor pages, or
Build your email form in Elementor, and send its subscriber data to ConvertKit.
We’ll cover each of these methods in turn!
Adding ConvertKit Forms to Your Elementor Page
If you already have a ConvertKit form that you’d like to add to an Elementor page, click and drag Elementor’s HTML widget into that page.
Then, get your form’s JavaScript or HTML embed code from the ConvertKit form builder. Paste that code into the HTML widget.
You can use either code for this purpose, though we generally recommend using the JavaScript code as it’s less prone to causing website theme conflicts. This is unless you intend to manually edit your form’s HTML before embedding it. In this case, use the HTML embed code.
NOTE: If you have our WordPress plugin installed, you can embed your form by pasting its WordPress shortcode into the HTML widget. Alternatively, you can drag the ConvertKit Form widget into your Elementor page and select your form from the dropdown menu.
Once you’ve dropped the embed code into the HTML widget (or set up the ConvertKit Form widget), you should see your form appear immediately. 🎉
Don’t forget to hit the Publish button to make your changes live!
Sending Elementor Form Subscribers to ConvertKit
First, add your ConvertKit API Key to Elementor by clicking on Elementor in your WordPress sidebar > Settings > Integrations.
You’ll find your ConvertKit API Key in your Account settings in the ConvertKit dashboard.
Next, you’ll have to set up two email forms:
One in Elementor, which is what your website visitors will see
One in ConvertKit, which will be used to receive the subscriber data from your Elementor form
So go ahead to create the Form in ConvertKit first. You can choose any Form type—e.g. modal, slide-in or sticky bar—but there's no need to customize the design because your visitors won't see it. (Well... you can still customize it if you want.)
☝️However, you should ensure that the form displays a First Name field if you intend to capture your subscribers’ first name.
After that, build your Elementor form. Here’s an example:
When you’re done, click on the Actions After Submit menu under the Content tab of the Elementor sidebar, and add the action called “ConvertKit.”
A new ConvertKit menu will appear below. Expand that menu.
In the Field dropdown menu, select the ConvertKit Form you created earlier.
Then, in the Field Mapping section:
Map your Elementor form’s Email field to the Email field
Map the Elementor form’s First Name field (if there is one) to the First Name field
Select any Tags that should be added to the Subscriber in ConvertKit
NOTE: At this time, Elementor can send only your subscribers’ Email and First Name data to ConvertKit. If you want to collect other subscriber data in ConvertKit, such as your subscriber’s last name, you will need to build a ConvertKit form containing custom fields for these, and then add that form to your Elementor page instead (see the first method above).
Hit the Publish button to save your changes, and you’ll be good to go!
Key Takeaways
To add a ConvertKit form to your Elementor page, paste your ConvertKit Form’s embed code into an HTML widget in Elementor.
Alternatively, if you’re using Elementor’s forms, then map its form fields to ConvertKit’s Email and First Name fields.
Only the Email and First Name data from Elementor forms can be sent to ConvertKit. If you need to collect other Subscriber data in ConvertKit, create your Form in ConvertKit and add it to Elementor instead.
if they are using elementor form to integrate and sync their subscribers to convertkit, they need to reach out Wordpress support and to have an upgraded protection on the WP side
💡 For more information on using ConvertKit with Elementor, check out Elementor’s guide on this subject.
NOTE: if you are using an Elementor Form to integrate and sync your subscribers to ConvertKit, you may need to reach out WordPress support and to have an upgraded protection on their end.