Do you use ConvertKit and want to create a website with Elementor? If yes, you are in luck as Elementor supports integration with ConvertKit. The integration allows you to collect email subscribers via an Elementor form. No need to install an extra plugin. You just need a ConvertKit API key to connect your ConvertKit account with Elementor.
In order to able to integrate Elementor with ConvertKit, you need to use Elementor Pro since the Elementor integration with third-party services is only available in the pro version (read: Elementor Free vs Elementor Pro).
Follow the steps below to integrate Elementor with ConvertKit.
Step 1: Get a ConvertKit API key
To get a ConvertKit API key, visit the ConvertKit website and login with your account. Once logged in, click your username on the top-right corner and select Account Settings.
Copy the API key on the Account Info section.
Step 2: Integrate Elementor with ConvertKit
Once the API key is copied, login to your WordPress and go to Elementor -> Settings to open the Elementor settings page. Click the Integrations, scroll down, and paste the API key you have just copied to the ConvertKit section. Click the Validate API Key button to check the validation of the API key. Once the validation succeeds, click the Save Changes button on the bottom.
Step 3: Create a Form
Once Elementor and ConvertKit are successfully integrated, you can create a new form to collect email subscribers to your ConverKit account. To do so, create a new page, post, or template and edit it with Elementor. Or, you can also edit an existing one. Create a new form by dragging the Form widget to the canvas area.
Set the fields you need on the Form Fields block. Once done, open the Actions After Submit block and set it to ConvertKit.
The step above would create a new block called ConvertKit. Open this block and select an existing form you have on your ConvertKit account. On the API Key option, leave it to default. Also set the field mapping according to the fields on the form you selected. You can also select a tag on the Tags field.
To customize the look of your form, you can go to the Style tab. There are four blocks you can open with each block offers different styling options.
Form Block
This block allows you to set the gap between columns and rows of your form, form label typography (font size, font family, font style), text color, and HTML field typography and text color.
Field Block
This block allows you to customize the look of the form fields. From text color, typography, background color, border color, and border radius.
Button Block
This block allows you to customize the look of the form button. From the background color, text color, typography, border color, border radius, hover color, text hover color.
Messages Block
This block allows you to customize the typography as well as the text color of the success message, error message, and inline message.
Click the PUBLISH/UPDATE button once you are done editing your page.
In case you are new to Elementor, you can read the beginners’ guide we have written to learn how to use Elementor.
