Want to use Kit with Elementor? You’ve got options.
You can either:
Directly add Kit forms to your Elementor pages, or
Build your email form in Elementor, and send its subscriber data to Kit .
We’ll cover each of these methods in turn!
Adding Kit Forms to Your Elementor Page
If you already have a Kit 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 Kit 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 Kit 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 Kit 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 Kit
First, add your Kit API Key to Elementor by clicking on Elementor in your WordPress sidebar > Settings > Integrations.
You’ll find your Kit API Key in your Account settings in the Kit dashboard.
Next, you’ll have to set up two email forms:
One in Elementor, which is what your website visitors will see
One in Kit , which will be used to receive the subscriber data from your Elementor form
So go ahead to create the Form in Kit 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 “ Kit .”
A new Kit menu will appear below. Expand that menu.
In the Field dropdown menu, select the Kit 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 Kit
NOTE: At this time, Elementor can send only your subscribers’ Email and First Name data to Kit . If you want to collect other subscriber data in Kit , such as your subscriber’s last name, you will need to build a Kit 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 Kit form to your Elementor page, paste your Kit Form’s embed code into an HTML widget in Elementor.
Alternatively, if you’re using Elementor’s forms, then map its form fields to Kit ’s Email and First Name fields.
Only the Email and First Name data from Elementor forms can be sent to Kit . If you need to collect other Subscriber data in Kit , create your Form in Kit 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 Kit 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 Kit , you may need to reach out WordPress support and to have an upgraded protection on their end.