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.
62 responses to “Add a MailChimp Signup Form to Your WordPress Website without a Plugin”
Hi Marcy I have followed your instructions which seem pretty straight forward, however each time I paste the classic form code onto my side bar widget and save, the result is to see all the coding and not the form. I have been over your procedure several times but have been unsuccessful – any help would be appreciated
Regards Steve
You need to paste the code in a text widget. If that’s not working, I have no other suggestions; it could be your theme. All the best!
Steve, likely you have a wordpress.com blog in which case javascript, as used in the Mailchimp embed code and many others, is not allowed.
Thanks for the great tip, Kevin! Linking to the MailChimp signup page is best for those using WordPress.com sites.
Marcy, have you tried this on a free WordPress.com blog? It works just fine on my website which I pay to have hosted on a commercial host’s server.
However, I just created another site hosted for free on WordPress.com and this method does not appear to work on that arrangement. I’ve been googling for work-arounds and this post of yours was one of the search results.
So far, no dice!
Do you know of a work-around that works on free WordPress.com sites? I need a mailing list sign up on mine! :D
You will probably just need to add a link to your MailChimp signup form page, if you’re using WordPress.com.
http://kb.mailchimp.com/article/how-to-add-a-mailchimp-signup-form-to-your-wordpress-blog/
Thanks! Too bad that WordPress.com isn’t more friendly to the sites hosted there. I’m debating whether to switch this particular site to Blogger, which does allow a Mailchimp sign-up form to live on the site, rather than making one’s would-be-signer uppers go to a form hosted on Mailchimp.
I think it’s great that all the newsletter services provide a hosted form that works for everyone.
Thank You so much this helped immensely.
Hi, I was searching for information & came across your blog & found it interesting. I have a query, plz if you can help me:
I am using MailChimp for my blog
I want to stop double opt-in
Whenever visitor enter his name & other details in the form, he has to confirm again in his email that he wants to receive emails from my blog. How to Subscribe the visitor immediately after he has put his name & other details on my blog ??
I wish I could help you, Vineet, but I always use double opt-in. You could search for the answer on the MailChimp website; they have a good answers there.
Hi Marcy,
I am trying to add a free download pdf file to my word press website using mailchimp. I have uploaded the free pdf file to a page on my website but when I submit the form the pdf file is not attached with the message. What am I doing wrong?
Thank you for stopping by, Hubert. You will need to search how to do that on the MailChimp website. Look for how to create a “Thank you” page.
Hi Marcy,
This is very helpful and useful. Thanks for sharing.
Hi Marcy, I have tried many times to get the mail chimp optin form onto my site but with no success. The 2014 form in your example is perfect for what I want but I don’t think the Twenty Fourteen theme is going to budge.
When I enter the code, it simply doesn’t display all fields..shame because your example would work well for me..
If you have any other ideas, please don’t hesitate to drop me an email, I would love to solve this.
Thanks
Dave
It’s too bad you aren’t able to get it to work; perhaps other changes were made to the original theme. If you aren’t able to follow the steps to get it to work, you can always try one of the Mail Chimp plugins. There’s nothing wrong with using a plugin, if it accomplishes your goal.
I found your instructions easy to follow, but when I paste in the HTML, I get the title, the sign up form, but no SUBMIT button.
Could this be because I am using the Canvas theme? Can you give me a workaround?
Thanks. Marlene
The submit button is on your site in your form; you can see it if you “view source” in your browser. But it’s just invisible. Something is overriding the button CSS, but I can’t see it. Perhaps that is due to Canvas. I think if I were you, I would try using a plugin instead. Thanks for stopping by, Marlene!
Thanks, Marcy — I’ve deleted the widget/text/code.
It’s disappointing because it took me all morning to understand how to do this — and I have no idea how to use a plug in.
Oh well, I guess that’s next Saturday’s task. I do appreciate your quick response.
You see all your plugins when you are in your WordPress Admin. Look at the left-hand menu to see Plugins.
But Canvas has a built-in Mailchimp sign up. I don’t use Canvas, so I don’t know about it.
Marcy, after following the instructions. My subscribe button was not linked. What do i do?
There should be no unsubscribe button on the MailChimp signup form.
MailChimp automatically adds an unsubscribe link to each email or newsletter that you send.
Is there any way to configure the mailchimp optin forms so that they will sense if it’s being used on an IOS product iPhone) so the error java script fails to work and it sends the user to the mailchimp site? It’s very clunky and disorienting for the user.
How do you handle this?
thanks,
Jim
That’s something you will need to ask over at the MailChimp website.
Personally, I don’t mind it going to the MailChimp page. You can edit/brand it.
I’m on wordpress.org, YOKO theme, sign-up form shows up perfectly except for no SUBMIT button. Submit button code is there, why do you think it won’t show up on screen? Thank you
The MailChimp CSS that you pasted in makes the button light and the text white. It is this line:
#mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
It is these 3 that you need to change:
background-color: #aaa;
border: 0 none;
color: #FFFFFF;
You will need to select other colors, or add !important, like this:
background-color: #aaa !important;
The ; is AFTER the !important.
Or you could try a plugin.
I tried to copy my code in for you but it executed instead of putting the text. I apologize. Your previous answer made perfect sense to me, I just can’t find a line of code that say “button”.
Mary,
The form code seems different now; I don’t see the previous.
Your theme has a conflict. MailChimp uses a .clear class to make sure the button is on it’s own line, but the theme adds this:
/* Clearing Floats --------------------------------------------- */ .clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; }That visibility: hidden is the problem, and also width and height of 0.
If you have JetPack plugin, you can activate Custom CSS module, and add this:
#mc_embed_signup .clear { clear:both; display:block; overflow:hidden; visibility:visible !important; width:auto !important; height:auto !important; }Also this is a good plugin: MC4WP: Mailchimp for WordPress
Hi Mary! I discovered your blog post – and after thinking that I was unable to get a subscribe button for my Mailchimp newsletter on my WordPress.com blog, I was overjoyed at reading your instructions!
I have followed all the instructions – and I fiddled around with the code as some of it was showing on the live widget – but I cannot get the text fields where the viewer types their own details (first name, email address) to show at all.
Any ideas?
many thanks again for sharing your expertise!
Shirley
Your MailChimp form didn’t copy, Shirley. You may not have the correct WordPress.com account for this to work. You may need to use a plugin.
Hi Marcy! I wanted to let you know that in the end, I did try a plugin and also had trouble with that. After much time with tech support, turns out there was some difficulty with my IE browser. Once I switched to FireFox, everything worked fine. Wanted to let you know so that this is something others might try. Thank you for your help.
Thanks for this tutorial Marcy. This is actually my first time to MailChimp or any mailing services. I just followed your steps and now working on the CSS.
Glad to help, Arsie!
Hi Marcy,
thanks for this post. It´s been most useful although I still have a doubt.
I use a plugin (Magic Action Box) for my suscribes. This one is linked to Mailchimp (general forms) and refers to a pdf for download. Can I still add another form, different, to use with the same list but different purpose? For example, to offer a different pdf for download? In that case, I guess I would necessarily need to create it with other than the general forms (i.e. embeded, popup..).
Many thanks in advance!
Esther
Thank you for your comment, Esther! I have never used Magic Action Box, so wouldn’t know. All the best!
I am using Penscratch Theme for my website would your MailChimp Signup Form be appropriate for my email list without using a plugin.
Do I copy and paste code from your Embedded Form Code Page into my widget sidebar. Please tell me where to begin and end in your code so that I can have Name, Email and Subscribe and instead of Newsletter change to Recipe for a Chili Crab Signup and a link to this page. How do I link from MailChimp signup-form-to-my-wordpress.website
Thank you.
Sophia Lim
Hi, Sophia. The last time I checked this tutorial did not work for wordpress.com blogs. You can link to your MailChimp sign up form though.
http://kb.mailchimp.com/lists/signup-forms/share-your-signup-form
I paste the classic form code in text onto my right side bar widget and save, the result is to see the coding and not the form as below in my Home page. Any solution? Is the coding right? Please email me the reply urgently.
Thank you.
Sophia Lim
Sophia, As I said before, my method does not work with a WordPress.com blog. And there is no plugin to use. You can only link to your MailChimp sign up page. The MailChimp website has lots of great tutorials, and you can ask them any further questions. This is a good page to help you.
http://kb.mailchimp.com/lists/signup-forms/share-your-signup-form
Hello !
I have a simple (catch theam) in wordpress) and a classic signup form from mailchimp
I am trying to put my colors so it can standout. I inputed a css code and my style sheet
and deleted the first lines in the mailchimp code and now I am getting this. How can I get it fix ?
Rony, you have added some styles to the end of your style.css that are adding that background and color to the MailChimp sign up.
It starts with:
#mc_embed_signup
and is quite few elements.
Try commenting that out to see what your MailChimp sign up looks like. If you don’t understand how to use and add CSS, then you are probably better off using a plugin. There is nothing wrong with using a plugin.
Hi Marcy,
I have a general question, not related to WordPress. What is the difference between a general forms and embedded forms in Mailchimp? When do I use which?
Thank you!
Franziska
A contact form will email the info that is placed into the form to you, so you can reply back to the person.
A MailChimp form will add the person to a mailing list inside MailChimp.
An embedded MailChimp form is one that is created in your MailChimp account, so that you can copy the generated code and paste it into a text widget or plugin in your website.
A general MailChimp signup form is a separate page generated by MailChimp.
This link has links to instructions for both types of MailChimp forms.
http://kb.mailchimp.com/lists/signup-forms/add-a-signup-form-to-your-website
Hey Marcy,
I followed step by step, but i couldn’t spaced the Submit button. Could you check if my code is alright??
Also.. i will like to do some modifications, for example:
1) Change the word Subscribe to Suscribete, because my blog is in spanish and add some colours.. Sorry if my questions are too basic, but coding is really new for me.
Thanks a lot!!
<!–
#mc_embed_signup {
clear:left;
}
#mc_embed_signup .mc-field-group {
margin: 0 0 10px;
}
–>
Suscribete via EMAIL
Hi, Nicole.
You can paste your MailChimp form code into a text editor to see it easier.
Then in the form code find this line:
Look for
value=”Subscribe”, and change it to
value=”Suscribete”
Leave the rest of the line as it is.
If you want more space below each of the fields, your code should work OK.
If you just want more space around the submit button, you can use
#mc_embed_signup input[type=submit] {margin: 10px auto;
}
That will add 10px to the top and bottom of the submit button.
Using auto will keep the button centered; using 0 will make it left-aligned.
Hi – I have followed all the steps, but the sign up form doesn’t work. When I copy and paste the HTML across from Mailchimp, it just shows as HTML on the website ?
Below is what I pasted:
Thanks for your comment, Rosalind.
Your pasted code did not come through well, so I removed it.
If you’re seeing html code in a Text widget, then it’s probably best if you use a plugin. Contrary to what you read all over, plugins are not “bad”, if they are coded well. I also use and recommend these two plugins:
– https://wordpress.org/plugins/mailchimp-for-wp/
– https://wordpress.org/plugins/genesis-enews-extended/ (if you have a Genesis theme)
Love the way you let me help understanding integrating the mail chimp form, but for another site i want the mail chimp form to open as a pop up when clicked on a button. What should i do for that ?
Perhaps you can find another tutorial?
This one will help if you use Genesis themes.
https://cre8tivediva.com/get-mailchimp-popup-subscription-work-genesis/
Hi Marcy,
Thanks for helping me out here! I signed up to MailChimp but just couldn’t work out how to link the front end to the back end.
I selected the classic form for my site. It didn’t seem to adopt the same formatting as the subscribe form as the Jetpack subscribe form however I’m okay with that. I do have a few questions:
1. If I wanted to add in some intro copy like “Sign up to receive a FREE …” where could I add this?
2. Can I change the formatting of the MailChimp prompts such as “Required file” when you leave one of the fields blank as well as the colour / font of the message “almost finished … we just need to confirm your email address …” Both of those colours do not complement my Anemone theme.
Thanks! I look forward to your feedback.
Thanks for your question. The >MailChimp site< has a great support section with videos to help you learn the basics of using MailChimp. You can make all the changes you want. If you have trouble embedding the form, this plugin - MC4WP: Mailchimp for WordPress - makes it easy for you.
i hope you are still offering help. Any chance that you know how to take MailChimp into an iWeb format?
Hi, Pamela. This tutorial should work fine. If you want to style your form first, you would just follow the instructions to create a form and add it to your website or link to the MailChimp signup page.
Hi Marcy
Thank you for the help! I added this subscribe for to my WordPress blog and it’s been collecting emails very well. Question, once the email addresses are added to Mail Chimp do you have to manually enter them into Word Press? I ask because I added my personal email to test but when I published a new post an email did not send to my account. Thanks for the help.
You need to set up an RSS campaign in MailChimp, if you want to send your blog posts automatically. You will need to read the MailChimp site – create an RSS campaign.
Thanks for a helpful post. I’m looking to have this subscribe form attached to a free download that the user gets after subscribing….does mail chimp have this feature??
You can add the download in MailChimp – either to the “thank you” email or better, you can add a link in the thank you email that goes to a page on your site. Anyway there are a number of emails and pages that you can customize in MailChimp under the Form Builder.
Just search the Mailchimp site.
Thanks a lot for this guide, but i tried it and it’s giving me html view only. Please is there any pluging i can comfortably use on my landing page that works very well?
The best thing to do is to do a search for “WordPress plugin for Mailchimp”. You will find several to choose from.
Hi Marcy,
I wanted to integrate the Mail Chimp Subscription service in my website. I wanted to inquire that Can I add this service in a particular post or page or I have to add this to widget only, as you mentioned?
Also, tell me how can I add this in a popup on screen while visitor scroll pages?
Thanx.
Yes, you may be able to use the Mailchimp subscription code directly to a page or post, if you switch to the “Text” tab, and then leave the page on that tab. I haven’t checked this recently though, and there have been changes to the editor.
If you use the Block (Gutenberg) editor, you can add the code in an HTML block.
Mailchimp has a popup that you can use directly or you can look for a popup plugin that will do this for you. I’m not recommending one at this time.
Thank you VERY MUCH!!! I have been working on trying to get this to work for over an hour. I linked all of the plugins on my WordPress blog to the MailChimp, got the signup form to work, and for the life of me could not get this email pop up to work!!! This was extremely helpful, especially with the screenshots. Such a lifesaver!