Want to boost your email marketing efforts? Why not create a bridge between your Breakdance forms and ConvertKit?
Everytime a user fills in a form on your site, their info is directly sent straight to ConvertKit, streamlining the whole process. One of the major benefits of doing this is to instantly capture leads from your site.
Another use case is when you want to auto-enroll your visitors into specific courses or webinars.
Lastly, integrating your site form to ConvertKit ensures timely follow-ups for user queries or feedback. And everything is automated, saving you a lot of time.
If you want to learn how to send Breakdance Builder Forms to ConvertKit, this guide is for you. Read on!
Create a Contact Form in Breakdance
Create a new page. Go to WordPress > Pages > Add New.
Let’s name the page ‘Contact Us Form.’ Edit the page in Breakdance editor.
Add a ‘Form Builder’ block. Edit the style and layout to your liking.
Click ‘Save.’ Once you're done, we'll leave it alone for a few until we set up the ConvertKit plugin.
Setup Your ConvertKit Account
1) Connect ConvertKit on WordPress
Once you’ve activated your ConvertKit, you need to integrate it with WordPress. The app will lead you to the ‘Setup Wizard’ as shown below.
Here, you have two options. If you don’t have a ConvertKit account, click ‘Register.’ Otherwise, go ahead and click ‘Connect.’
2) Get Your API Key in ConvertKit
Open your ConvertKit dashboard. Go to Settings > Advanced and copy your API key’ and API Secret.’
Go back to your WordPress setup page and paste your APIs on the provided fields.
Note that you can also go to Settings > ConvertKit to update your APIs.
Create a Form in ConvertKit
1) Add A Form
You can create the form as you continue with the setup process. Or simply go to your ConvertKit account. On top of your dashboard, click Grow > Landing Pages and Forms.
Then, click ‘Create New’ and choose form.
2) Choose a Template
Choose your display format and template. You have the option to customize the template to your liking. Then, let’s name our form ‘Test form.’ Just click the name on the top-left corner to edit it.
In this tutorial, I’ve chosen the ‘Pine Form’ template. I also added two more fields for the Name and Message. So, overall, we have three fields that the user will need to fill in. These are the ‘Name,’ ‘Email Address,’ and ‘Message.’
Make sure that the fields are correctly labeled. When a user submits a form from Breakdance, we want their information to be stored in the correct fields.
Setup Breakdance ConvertKit Integration
1) Add ConvertKit on Form Actions
Back to your Breakdance editor, click the Form Builder element, and select the ‘Actions’ dropdown menu. You will see another dropdown menu named ‘Actions After Submission.’ Click this and choose ‘ConvertKit.’
Once you’ve done this, you will notice the ‘ConvertKit’ option appears below the ‘Actions After Submission’ menu. Let’s click the edit icon beside ‘ConvertKit’ so we can set the form and field map.
2) Map Form Fields
A pop-up window will appear. Here, you will see the fields that you need to set.
Click the ‘Custom’ tab and paste your API key on the provided field. Choose the name of your form under the ‘Form’ dropdown button.
In this example, the name of our form is ‘Test Form.’
Then, under the ‘Custom Fields,’ fill in the three items that match the field names of your form on ConvertKit. Check that the fields are arranged in the same order.
Once everything is set, click ‘Save.’
Test Your Breakdance Form
1) Enter User Data on Breakdance Form
Open your published form page on the browser. Try to fill it with your name, email, and dummy message. Then, click submit.
2) Confirm ConvertKit Email Subscription
Once the message is sent, check your email (the one you’ve used to fill in the Breakdance form). You should receive a subscription confirmation message. Go ahead and click confirm.
3) Check Result on ConvertKit Dashboard
Open your ConvertKit dashboard. Go to Grow > Subscribers. At the bottom of the page, you should see the list of confirmed subscribers that filled in your Breakdance form.