Skip to main content

How to recreate your Mailchimp forms in Kit

Learn how to recreate your Mailchimp form’s form fields, design, and settings in Kit, and how to display your new Kit Form.

Updated over 3 weeks ago

Bring your Mailchimp forms to Kit

Email forms play a big role in helping you grow your audience. So, if you’re coming over from Mailchimp, you’ll want to recreate your forms in Kit—and you’re in the right place.

In this guide, we’ll cover how you can create your Mailchimp form in Kit, regardless of whether it is a hosted signup form, embedded form, or subscriber pop-up.

And if you’re new to Kit Forms, we suggest first checking out these guides to get a basic understanding of how Form creation works in Kit:

NOTE: Do you use Mailchimp landing pages instead? Then check out our separate guide on recreating a Mailchimp landing page in Kit.

Create a new Kit Form

In a browser tab, launch Mailchimp and open the form you want to recreate in Kit. Keep this browser tab open for convenient reference.

Next, log in to Kit and click Landing Pages & Forms in the Grow tab of the top navigation. After that, click the + Create new button to create a new Form.

In the next screen that asks how you want to gather subscribers, select the “Form” option.

Then, choose your Form's display format. You can change this later if needed.

NOTE: To create a pop-up Form, select either the “Modal” or “Slide in” display format.

Next, choose a Form template. For example, pick the one that you like, or the one that most resembles your Mailchimp form. You can change this template later if you need to.

Your chosen Form template will be loaded into our Form builder, ready to be customized. Don’t forget to save your work often when recreating your Mailchimp form in Kit. To do so, click the Publish button at the top right of the Form builder.

Customize your new Kit Form

First, recreate your Mailchimp form’s form fields, design, and settings. For demo purposes, we’re going to recreate the look of this Mailchimp pop-up form:

Recreate your form fields

NOTE: At this time, our Form fields allow for only plain text, dropdown, or checkbox inputs.

All Kit Forms include the Email Address field by default. To add more Form fields, click the + button in the Form:

Click the new Form field that has appeared in your Form, and then check out the right sidebar of the Form builder.

To add a First Name field to your Form, set the “Save as” setting to “Custom Field." Then, click the “Custom field” setting, and select the “First Name” option.

To add text fields other than First Name, create a new custom field first. Simply type in the name of the custom field into the "Custom field" setting, and it will automatically be created.

Finally, to add a list of dropdowns or checkboxes, add a new Form field to your Form. Then, select “Tag” in the “Save as” setting, and select either “Dropdown” or “Checkboxes” for the “Field type” setting.

For our purposes, we’re going to select the “Checkboxes” option.

After that, select the Tag options corresponding to the dropdown or checkbox list options that should appear in your Form.

This way, when a subscriber selects one of these list options, they’ll be tagged with the appropriate Tag. (Create these Tags first if you haven’t already.)

Rename your form fields

The “Label” setting in the right sidebar lets you name your Form fields differently from their internal names.

For example, we have a Tag named “Photography Pros:Food Photography,” which doesn’t sound appealing.

So, we can use the “Label” setting to give a different external name for that checkbox list option.

Rearrange your Form fields

To rearrange the order of your Form fields, hover over the left side of a Form field until your mouse cursor turns into a hand icon. From there, click and drag your Form field to reorder it.

Make your Form fields mandatory

If you want to make the filling out of certain Form fields mandatory, click the relevant Form field and check the “Required” box that appears in the right sidebar.

Delete your form fields

Want to remove a Form field? Click it, followed by the Delete field button to delete it.

Recreate your form design

Add and remove text

Highlight the placeholder text in your Kit Form, and then delete it and type in the text from your Mailchimp form.

Similarly, click your button text to update it.

Replace images

To replace placeholder images in your Kit Form, navigate to the General styles tab in the right sidebar. Click the Replace button in the Background image settings to upload and insert your own image.

Update your form’s colors and fonts

In the General styles tab, you’ll also find options for changing the colors of your header and content.

Additionally, you can click your Form text to load Header styles and Subheader styles settings in the right sidebar for changing your text’s font color, font size, and font weight. Here’s what the Header styles menu looks like:

Finally, click your Form button to launch settings for customizing the button’s font color, background color, border radius, and font weight.

Recreate your Form settings

Enable or disable double opt-in

While double opt-in applies to Mailchimp audiences as a whole, Kit’s double opt-in settings are Form-specific.

To enable or disable double opt-in for your Kit Form, click the Settings tab in the Form builder, followed by Incentive in the left sidebar of the Form Settings screen that pops up.

From there, check or uncheck the “Send incentive email” option to enable or disable double opt-in respectively.

If you enable double opt-in, you’ll also need to set up the incentive email requesting subscribers to opt in to your email list. Learn more in our guide to the incentive email.

Recreate the thank you page

In the same Form Settings screen, click General.

Use the “When a visitor subscribes to the form:” setting to specify whether subscribers should see a success message, or be redirected to an external page, after signing up to your Kit Form.

(For pop-up forms) Display Options

If you’re recreating a pop-up form, use the Display Options settings in the General tab of the Form Settings screen to set up when the Form should appear on the page.

Display your new Kit Form

Happy with your shiny new Kit Form? Then, it’s time to use it.

Click the Embed button at the top right of the Form builder:

This will load a screen displaying different options for using your Form.

For example, you can grab your Form’s:

  • JavaScript or HTML code for embedding into your webpages (JavaScript is recommended)

  • Hosted URL for sharing with your audience, such as via social media

  • WordPress shortcode for embedding into your WordPress website

So, go hunt down every location where you’ve embedded or shared your Mailchimp form, and then replace its embed code or URL with that for your Kit Form.

You can also connect your Kit Form to a Visual Automation to send subscribers automated emails after signup. Learn more about setting up Visual Automations in Kit here.

Alternatively, if you'd like expert help with recreating your Mailchimp forms in Kit, contact our migrations team, and they'll be happy to assist.

Did this answer your question?