How to create a Mailchimp signup form for your website

Using a signup form on a website or social media platform is an excellent way to get subscribers. The foundation for your email marketing is your audience or contacts. Mailchimp can help you to grow your audience by designing different types of form. Today, in this article, we will describe how to create a Mailchimp signup form for your website. 

To get started, you need to use the Mailchimp form builder to design your form. You can access the form builder tool from the Mailchimp dashboard. It is needed for customizing your signup forms. So, let’s see how you can personalize and share your form with the Mailchimp form builder. But, first, let’s know about some primary matters about drafting a signup form on Mailchimp. 

Start creating beautiful forms with WP Fluent Forms

Basic things you need to know before creating a Mailchimp signup form.

You need to know some basic things about creating or embedding a Mailchimp signup form on your website. Here are those.

  • To customize your signup form, use the form builder first before you generate embedded code
  • If you want to match your form with the design of your website, you have to modify the form code after you attach it to your site.
  • You will see a default legal copy after enabling GDPR. You can change the text and field options for your signup form
  • The form may look different on Mailchimp than it looks on your website. The embedded form will inherit your website’s style sheet.
  • If you use SSL encryption on your website, then Mailchimp embedded and pop-up forms will support it
  • To avoid fake signups, enable reCAPTCHA confirmation from the audience settings of your form
  • Last but not least, as this is an advanced feature, sometimes you might need to use some custom coding. So, probably you have to ask for your developer to help you occasionally.

So, when you are building a Mailchimp signup form for your website, keep these factors on your mind. It will help you to find an easy solution in case you face any problem with making a Mailchimp form. Now, let’s see the types of MailChimp signup forms for your website. This is also important before moving to the central part. You can’t use the proper one for your particular need without knowing the categories and features of the forms.

Types of Mailchimp signup form for websites

If you already have a Mailchimp website, you can easily add a Mailchimp signup form to any page of the site using the Signup Form content block. But if you are maintaining your website from another service provider, Mailchimp will provide you two types of signup forms. One is the embedded form, and the other one is the subscriber pop-up form. You can use these forms for the long term audience growth for your website. Let’s have a detailed look at the two types.

Embedded form

Embedded form of Mailchimp signup forms come with four more form templates to choose from. They are Classic, Horizontal, Condensed, and Unstyled Forms. There is another option in the form styles, and that is the “Advanced” option. You can get access to this if you have a paid account. You just need to select the type of form you want to display on your website. But if you are comfortable with editing the HTML code to keep the same form style with your brand, you can do that too.

From the screenshot, we can see that there is another option in the form styles named “Advanced” option. Well, you can only get access to this if you have a paid account.  

Pop-up form

This form occurs when you need a pop-up window to your website. You can create and design the form fields as you want. Connect it with your website by pasting the Javascript code into your site. 

Build a Mailchimp signup form for your website

When you select the “signup form” option of the “Create” field from the top bar, a pop up will appear like the screenshot below. Select your form type from the two choices.

The “signup landing page” field is for landing a signup form to the website by providing some gift or sale offers. Well, we are only going to discuss the process of creating a Mailchimp signup form. Now, let’s get back to the track. 

For the demonstration purpose, we have selected the embedded form option to optimize our Mailchimp sign up form.

From the screenshot above, as you can see, we have chosen the classic form template. If you want to customize the default form fields, click on “the form builder” blue-colored text. Once you click on it, a new page will open named “Form Builder.”

Here, you will see options for selecting forms and response emails, signup form URL, and customizing the form. First, let’s discuss these form design criteria below.

Build it

The Build it tab is the first tab on the form builder. It will allow you to create a structure for your signup form. You can add or remove fields as your requirements, and change the form settings. But remember, if you decide to remove any field from the Mailchimp signup form after publishing your form to the website, the collected information about the clients will be gone forever.

Design it

You can edit the style, color, and graphics of your form with the Design it tab. The body and layout of the page also can be modified with this tab. When you change the background or font color of a particular page, the other pages will also inherit the changes. This will help you to build brand consistency and save your time a lot.

Translate it

Mailchimp provides more than 50 languages. With the translate it tab, you can translate your Mailchimp signup form or response emails.

If you don’t need to convert your language, you can still use the tab to customize the button text and form error messages.

Edit your Mailchimp signup form more with the form builder

The editable items for forms and response emails come with four more categories in a dropdown menu. They are the Subscribe, Unsubscribe, Update Profile, and Other Bits options. Let’s discuss each section in detail.

Subscribe

In the subscribe section, you can customize the signup process of your audiences. It contains five different methods of confirmation to a subscription. These are Signup form, Signup form with alerts, reCAPTCHA confirmation, Confirmation thank you page, and Final welcome mail. Let’s see what the options are about.

  • Signup form: The basic Mailchimp signup form for the people
  • Signup form with alerts: Enabling this field will allow you to customize error messages of the form. If people enter any incorrect data, then it will show an error text
  •  reCAPTCHA confirmation: A reCAPTHCA page to verify users that will appear after filling up your form
  • Confirmation thank you page: A “thank you” page that confirms the submission to users
  • Final welcome email: An optional email to the new subscribers for welcoming them

Unsubscribe

This section is for modifying the texts, fields, or a page for the time when a user will unsubscribe your Mailchimp signup form. There are three choices in the unsubscribe section. 

  • Unsubscribe form: When someone clicks on the unsubscribe link from the campaign, it will show another form that will ask for their email to unsubscribe
  • Unsubscribe success page: If you enable this item, it will open a new webpage to the users with a successful unsubscribe confirmation
  • Goodbye email: An optional email to say goodbye to unsubscribers

Update profile

Update profile is a section for showing people a text, page, or link when they will request to update their information on your Mailchimp signup form. It comes with five categories. Let’s have a look.

  • Profile update email: Subscribers will receive a confirmation email if they request for updating their profile
  • Profile update email sent: A webpage that shows that Mailchimp has sent the profile update form
  • Update profile form: Your subscribers can use and submit this form. You can add a link and tag as *[UPDATE_PROFILE]* to your campaigns
  • Update profile sample form: Enabling this item will help your users update their profile through a test campaign or archive page
  • Update profile thank you page: A thank you page with the text about the successfully updated profile

Other bits

This option lets your users send your emails, forms, or your mail campaigns list to their friends. It comes with three categories, and those are: forward to a friend form, forward to a friend email, and about your list.

Connect your form with a third-party website

Moreover, you can embed your Mailchimp signup form with third-party website platforms. Make sure that your website platform is listed with those services. The list is as follows.

  • WordPress
  • Weebly
  • Blogger and Blogspot
  • Jimdo
  • Webs
  • Yola

Activate GDPR fields

The first step of GDPR compliance is GDPR form fields. Once you enable the GDPR fields for your form, it will automatically update all other structures to be GDPR compliance. Furthermore, for the GDPR fields, Mailchimp has set a default language. You can use the form builder to change the language.

Go to the “audience” button on the top bar. Click on “GDPR fields and settings.” Then a page will occur like the given screenshot. Finally, edit your fields as you want.

Embed your Mailchimp signup form to your website

After you have completed designing your Mailchimp signup form, you can share it all over your online channels. Let us elaborate on how you can share your form to your website.

Collect embedded form code

To get the form code to add it on your website, go along with the following steps.

  1. Go to the audience tab 
  2. Click the audience drop-down and select the one you want to work with
  3. Select the Manage Audience drop-down and pick Signup Forms
  4. Choose embedded forms
  5. Go for any form type
  6. Customize the form as you want
  7. Select the code from “Copy/paste onto your site” option
  8. Paste it on your website’s HTML where you want the form to be published

Since you’ve gotten to this part of the article, you now know the process of creating, customizing, and embedding a Mailchimp signup form on your website. So, why not check out the process now? After finishing your Mailchimp settings, let’s see how you can embed your Mailchimp with WP Fluent Forms. 

How to connect Mailchimp in WP Fluent Forms

WP Fluent Forms is one of the powerful form builder plugins in WordPress. You can create any kind of form with the tool. Use the global styler feature of the form and make your form more attractive so that users eagerly fill up your form. Now, you must be wondering what are the benefits of integrating Mailchimp with a form builder. Let’s find out!

  • Transfer leads and emails from submitted forms
  • Comes with an opt-in checkbox option
  • Easily customize and send emails with the autoresponder
  • Email marketing campaigns help to get leads

Now, let’s see how you can integrate your Mailchimp account with WP Fluent Forms. Well, you can do that without hassle. 

However, before we begin,  one thing that you should know is that you need  the pro version of WP Fluent Forms to get Mailchimp integration.

Now, first of all, create a Mailchimp account on your business name or whatever name you choose. Then go to the Fluent Forms dashboard. Click on Modules. Look for Mailchimp there, and enable it.

Move into the “Settings” option from there. Hit the Mailchimp button from the left sidebar. You will see it is asking for a Mailchimp API key.

Enter your Mailchimp API key here. If you don’t have the API key, log in to the Mailchimp account you have created just a while ago. After signing in, click on your account logo. A list will open with all the settings of your account. From the index, select Profile.

Once you go into the profile, click on Extras from there. Here, you can see a dropdown list with an option of API keys. That’s where you need to go.

Now, if you haven’t created an API key yet, scroll down a little and click on “Create a key” from there. 

Once you got the key like the screenshot below, copy it.

Now paste the API key on the WP Fluent Forms’ Mailchimp Settings panel. And save the settings.

Now, go to All Forms from your WP Fluent Forms dashboard. Select the form that you want to integrate with Mailchimp. Then click on the form settings.

Choose Marketing & CRM integrations from the left sidebar. Here, click on Add New Integration

Go to Mailchimp Feed from the dropdown menu. Arrange the fields according to your requirements. Fill up the name field, select the Mailchimp list from the dropdown list, choose where the data is to be stored etc.

Set the Field Mapping. Interrelate the form’s input fields with Mailchimp fields. For instance, Email address with email, Name with the First name, and Last name fields, Birthday with Date of Birth, etc.

You can add users to different groups for better segmentation. Groups can be created based on subscribers’ interests. So, a user can subscribe to multiple groups without signing in to multiple forms. 

You can turn on the Double opt-in option if you want. It will send a confirmation email to users when they will submit a form, and only add them to the list after their confirmation. Enable the VIP field, if needed. Furthermore, you can also click on Enable conditional logic. It will work just like the regular conditional logic. To find out how to set conditional logic on WP Fluent Forms, read one of our amazing articles based on conditional logic. After all the settings are done, click on Create Mailchimp feed

Congratulations! You now know everything you need to know to create a Mailchimp signup form and connect that with other tools on your website. We have tried our best to keep the explanation simple while all inclusive. So please let us know whether this article has helped you through the process.  

Final words

Signup forms are significant for generating leads. They allow you to know about the people interested in your brand, products, or services. With an easy to follow, simple, and visually pleasant signup form, you can get more conversion to your site. We hope you find this article helpful for designing a MailChimp signup form. Let us know what you think in the comment section below. If you want to know how to create responsive contact forms, we got you covered.

Leave a Comment

Your email address will not be published. Required fields are marked *