MailChimp

How to Add a MailChimp Signup Form in WordPress

If you’re using MailChimp to send out newsletters for your business then you’re probably going to need a signup form on your website to collect subscribers.

There are a variety of methods for adding a signup form to your WordPress website. Below we outline how to go about adding a signup form using either MailChimp Embedded Forms system from your MailChimp account or the MailChimp List Subscribe Form WordPress plugin.

Methods
  1. Inserting MailChimp Embedded Forms
  2. Using a MailChimp Plugin

Inserting MailChimp Embedded Forms

You can use MailChimp’s Embedded Forms instead of using the a plugin. This has the advantage of being able to create different signup forms for each of your lists, and generally gives you more control over styling the forms than a plugin would.

Generating the Signup Form

  1. Login to your MailChimp account.
  2. Navigate to Lists to display your current MailChimp lists will be displayed – If you don’t have any lists, you will need to create one using the Create List button.
  3. Click the Down Arrow button associated with the list your want to create a form for and select Signup Forms from the menu.
    MailChimp Signup
  4. Select Embedded Forms.
  5. Here you are given a range of options for generating your signup form:
    • Classic: Includes all visible fields from this list.
    • Super Slim: Collects only email address, good for small spaces.
    • Horizontal: Similar to Super Slim.
    • Naked: Similar to Classic but provides only raw HTML with no CSS or Javascript.
  6. Select Classic and:
    • Uncheck Include form title so we can use the widget title in WordPress.
    • Uncheck Show interest group.
    • Uncheck Show format options.
    • OPTIONAL: Check Enable reCAPTCHA to include reCAPTCHA.
      MailChimp Form
  7. Once you have configured your form Copy the provided code.

Adding the Signup Form to WordPress

  1. Login to your WordPress dashboard.
  2. Navigate to Appearance > Widgets.
  3. Add a new Text Widget to your desired sidebar location.
  4. Give the widget a title e.g. Signup for our Newsletter.
  5. Paste the code we generated in MailChimp into the Text Widget.
  6. Click Save. You should now have a working signup form.

Cleaning Up and Formatting

The provided Classic code includes an external reference to a CSS file as well as inline <style> tags. Ideally these styles should be merged into your theme’s CSS file and customised to suit.

External CSS Reference
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">

This reference should either be transferred to your websites <head> or the contents of the external CSS file be copied and merged into your theme’s CSS file.

Inline Style
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
</style>

The inline styles should be transferred to your theme’s CSS file. After which you may wish to proceed to adjust the styles to suit the appearance of your website.


Using a MailChimp Plugin

MailChimp signup forms can also be added through a variety of available WordPress plugins. Below we cover the process of using the offical MailChimp List Subscribe Form plugin to add a signup form.

Generating an API Key

  1. Login to your MailChimp account.
  2. Click on your Profile Name to expand the Account Panel and select Account.
    MailChimp Account
  3. Click Extras > API Keys.
  4. Click the Create a Key button.
  5. Name your new API key descriptively so you know what application is associated with that key e.g. WordPress Signup Forms.
  6. Copy your API key.

Configuring the Plugin

  1. Login to your WordPress dashboard.
  2. Navigate to Plugins > Add New.
  3. Search for MailChimp List Subscribe Form, then Install and Activate the plugin.
  4. Navigate to Settings > MailChimp Setup.
  5. Paste your API key from MailChimp and click Connect.
    MailChimp Enter Key
  6. Select the list you want to the signup form associated with and click Update List.
  7. Configure your Content Options and Custom Styling as desired to suit your website.
  8. Navigate to Appearance > Widgets.
  9. Add the MailChimp Widget to your desired sidebar location.
  10. You should now have a working signup form.
Scroll to Top