When you create a list in MailChimp, we automatically generate a customizable signup form for that list. In addition to this full form we host for you, we also provide mobile responsive code for small forms that you can embed on your website. Below we'll walk you through each of our form options and how to add them to your site.

Contents

Add Embed Form to your website

  1. Navigate to the Lists page.
  2. Click on the list drop down menu and select Signup forms.
  3. Select Signup forms

  4. Click the Select button under the Embedded forms option.
  5. Select Link to a form

  6. Select a form style: Classic Form, Super Slim Form, or Naked Form to generate the embed code for your form.
  7. Copy all text in the Copy/paste onto your site box.
  8. Copy code from Copy/Paste Into Your Site text box

  9. Paste the code into the appropriate location on your website.

Embed Form options

Super Slim Form

A simple form with only an email address field. You can only change the title and width of the Super Slim form. If you have required fields other than email address in your list or would like more customization for your form, check out one of the other form options below.

Options for the Super Slim Form

Classic Form

A more robust form with additional customizable options:

  • Show and specify the title for the embed form.
  • Toggle between showing only required fields and showing all visible fields for your list.
  • Show or hide groups on your embed form.
  • Show or hide the indicator for required fields.
  • Specify a width for your form; default will expand to fit the area where the form code is placed.
  • Additional options to Enhance your form include: turning on evil popup mode, disabling JavaScript for the form, including an archive link to view past campaigns sent to the list, and including a MonkeyRewards link. Click the i icon next to an option to see additional information.

Options for the Classic Form

If you enable evil popup mode - when your visitors go to your website, your site waits for a certain amount of seconds (that you set) and then greys out your site in the background to display a popup signup form. Some people find those forms really helpful. Some find them really annoying.

The cookie we use to note that the evil pop up mode has already popped up should also prevent the popup from being displayed again and again on the site regardless of the page your visitors are on within your website. If you have the ability or the resources, you are welcome to download the JavaScript code we're providing (the included xs-js one is what you need) and modify the behavior however you wish.

Some decent JavaScript skills will be required to take care of that modification as it's proprietary code for your own site.

Naked Form

Similar to the Classic Form, but with no CSS or JavaScript, allowing greater control and flexibility. Customizable options:

  • Show and specify the title for the embed form.
  • Toggle between showing only required fields and showing all visible fields for your list.
  • Show or hide groups on your embed form.
  • Show or hide the indicator for required fields.
  • Specify a width for your form; default will expand to fit the area where the form code is place.
  • Additional options to Enhance your form include adding an archive link to view past campaigns sent to the list and including a MonkeyRewards link. Click the i icon next to an option to see additional information.

Options for the Naked Form

About HTTPS forms

There is not an HTTPS version of MailChimp's signup form embed code. An HTTPS signup form requires an SSL security certificate hosted on your site to handle encryption. A signup form using an SSL certificate will submit subscriber information with 128 bit encryption, the same encryption level Amazon and other major online retailers use for transactions.

Since the encryption is hosted on your site, the default collection process provided by MailChimp must be bypassed to maintain a secure connection. The embedded form must submit to scripts within your website domain to hand data off to MailChimp via an API connection.

If the proper API calls aren't set up on your website, a security warning may appear in the web browser when someone submits their subscription through the embedded form.

Browser security warning

To ensure subscribers don't see a security warning, have a developer take a look at our API documentation to see how to make the appropriate API calls on your site.

Add the full form to your website

If you prefer to add the full form that you've created and designed instead of our smaller embed code forms, here's how:

  1. Navigate to the Lists page.
  2. Click on the list drop down menu and select Signup forms.
    Select Signup forms
  3. Click the General forms option.
    Select Signup forms
  4. Copy the Signup form URL.
  5. HTML link share

  6. Open a new web browser window or tab.
  7. Paste the Signup form URL into the browser address bar and press the enter key on your computer's keyboard.
  8. After your form loads, right-click the page and select your browser's page source option.
  9. Copy/paste this code into your website.

Even though you've added the full form on your own website, once people click the submit button they'll be directed to the MailChimp hosted Thank You page. If you'd rather keep people on your site, you can set the Thank You page to redirect to your website.

Troubleshooting the embed form

If you'd like to have more than one MailChimp signup form on a single page, only one of the forms should utilize JavaScript. Our hosted signup form as well as our Classic Form embed code use a bit of JavaScript for validation purposes. If there are two forms that utilize JavaScript on a single page, the forms may not validate or submit information as expected. If you're an experienced coder or have one at your disposal, you might also consider placing one of your forms in an iFrame to help prevent validation conflicts.

Our Super Slim and Naked forms don't include JavaScript by default so they can be used in combination with a form that does. Our Classic Form embed code can also be created without JavaScript! Click here for additional details on each of of our embed code form options.

It may also be beneficial to look into using Groups within your list instead. Rather than creating multiple lists and forms, you can create a single list that uses groups. Take a look at this article for information on how to create groups in your MailChimp list.

Add form to a third party website

MailChimp signup forms can be added to third party website platforms. Check the list below for some common third party website providers you can add MailChimp forms to. If you use another platform, be sure to check your website provider's support page for guidance.

This feature is available to users with Manager level or higher permissions. Take a look at this article to learn more about the different access levels for a MailChimp account.


Related Articles