Add a MailChimp Signup Form to Your WordPress Website without a Plugin

It’s easy to add a MailChimp Signup form to your WordPress blog or website to collect names for your email list without using a plugin. For a lot of themes, the form will just blend in with your theme. Look at how the form will look in the default WordPress themes – Twenty Twelve, Twenty Thirteen, and Twenty Fourteen.

The advantage of using your own form is that you can create a different signup form for each of your lists, in case you have one for a download and one for your blog. The only other way to do this is to use more than one plugin; not so nice. Also adding a form directly to your website allows people to sign up without leaving your website, and the form can be styled to match the styles styles of your website.

MailChimp Embedded Form Settings

So you start by looking at the signup form settings in MailChimp.

1. Login to your MailChimp account.
2. Then in your MailChimp Dashboard on the left, choose Lists.
3. Now you’ll see all the lists you have in your MailChimp account. (If you don’t have any lists, you will need to create one with the Create List button in the upper right hand corner.)
4. Now hover over the down arrow on the far right of the list you want to use for the signup; choose Signup forms.
5. On the next page are three choices. You use General form to choose the fields (email, first name, last name, etc.) for your form and to edit all the confirmation and thank you pages. For your blog newsletter, choose the Embedded forms button.

MailChimp Embedded Form Code Page

Now you can get the code for the signup form to embed on your blog.

1. You can choose any of the three form types – Classic, Slim, Naked. You can use Classic for this tutorial; the advantage is that you get the JavaScript so that if someone gets an error while completing the form, they will still be on your website form, rather that going to the full page signup form page from the General form section.
2. If you uncheck to include a title with your form, you can use the widget title to title your form.
3. You can choose to show all fields or only the required fields. For this tutorial, I’m using a form that asks for email and first name.
4. You can also uncheck interest group fields and required field indicators. You would only keep these if you had a form with a lot of fields.
5. Leave the form width empty, so that the form will fill the width allowed in your widget.
6. Now select all the code from the box – Copy/paste onto your site.

Your WordPress Blog or Website

Add a text widget and paste in your MailChimp code.

1. Now you want to login to your WordPress dashboard. From the menu, click Appearance > Widgets.
2. Drag a new Text widget to your sidebar, and place it where you want your signup box to be.
3. Paste the code from MailChimp into the text area. Add a widget title, like Newsletter Signup or Blog Signup Form
4. Save and view how it looks on your website.
5. If some themes this is all you will need to do. But while the form for Twenty Twelve isn’t too bad, but the others use white text for the widget area, and MailChimp adds a white background, so the form disappears.

Look at the MailChimp Code

This is the MailChimp Classic form code.

      Email Address First Name /* JavaScript is here */

Right at the beginning is this code section; this is what creates the styles for the MailChimp form.

You can delete those lines so that the beginning of the code in the text widget looks like this. This will allow you to see how your form looks with only your theme styles.

Now look at our three themes again. It’s looking much better except that there’s not enough spacing; the Submit button is running into the input fields.

So you can add a little CSS back. It’s preferable that you use a Custom CSS Editor or add the CSS to your child theme style.css, but you can also add it directly to the widget.

In style.css or a custom CSS editor, add

#mc_embed_signup .mc-field-group

Or make the beginning of the code in the text widget look like this:

  #mc_embed_signup < clear:left; >#mc_embed_signup .mc-field-group -->

(Note that if you use the Naked form code from MailChimp, you will need to use #mc_embed_signup input instead of #mc_embed_signup .mc-field-group in the two CSS blocks above.)

This is how the forms look with just adding those two lines of CSS.

Now you have a nice MailChimp signup form without using a plugin. This should work for many current themes, including many Genesis child themes. Please let me know how yours looks.

You can also add more styles to make the form stand out from the sidebar, but that can wait for another time.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!

Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy

I’m Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.