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.
- Login to your MailChimp account.
- Then in your MailChimp Dashboard on the left, choose Lists.
- 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.)
- Now hover over the down arrow on the far right of the list you want to use for the signup; choose Signup forms.
- 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.
- 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.
- If you uncheck to include a title with your form, you can use the widget title to title your form.
- 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.
- Leave the form width empty, so that the form will fill the width allowed in your widget.
- 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.
- Now you want to login to your WordPress dashboard. From the menu, click Appearance > Widgets.
- Drag a new Text widget to your sidebar, and place it where you want your signup box to be.
- Paste the code from MailChimp into the text area. Add a widget title, like Newsletter Signup or Blog Signup Form
- Save and view how it looks on your website.
- 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.
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="http://yourwebsite.us1.list-manage1.com/subscribe/post?u=xxxxxxxxxxxxxxxxxxxxxxxxx&id=xxxxxxxxxx" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="x_xxxxxxxxxxxxxxxxxxxxxxxxx_xxxxxxxxxx" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
/* JavaScript is here */
<!--End mc_embed_signup-->Right at the beginning is this code section; this is what creates the styles for the MailChimp form.
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>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.
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">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 {
margin: 0 0 10px;
}Or make the beginning of the code in the text widget look like this:
<!-- Begin MailChimp Signup Form -->
<!--<style type="text/css">
#mc_embed_signup {
clear:left;
}
#mc_embed_signup .mc-field-group {
margin: 0 0 10px;
}
</style>-->
<div id="mc_embed_signup">(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.
Leave a Reply