In this walkthrough I'll show you how to create a horizontal bar MailChimp optin web form that has the First name and Email address fields. This uses the MailChimp Naked Form style. The site I have in the video is using WordPress Twenty Twelve theme–your theme may have overriding form styling within the CSS. You may have to fiddle with the CSS margins and padding to get your form to look right on your site, with your theme.
By the way, if you just want the email field, you can check out my blog post and video tutorial over here.
This walkthrough is a little more involved. Pop open your text editor as you'll need it. This tutorial is in two parts–the Form code you'll need to paste into the Text tab area of your page where you want your form (not the Visual tab where the buttons look like Word), and the CSS code to make it appear.
The FORM CODE
Let's grab your form code first in MailChimp.
- Create your form, click on the “Share It” button.
- You'll choose “Naked Style” click Options.
- In the Generated Code box, copy the code and paste it into your text editor.
Now compare yours to mine and copy your form action URL (http://) inside the quotes where mine says HereInQuotes in Red Text below. You can write a short Call to Action by replacing the Pink Text. You'll need to make your form look like mine before your paste it into your site, using your http:// special form link and your own Call to Action (short as possible).
Grab My Form HTML Text File here.
<!– Begin MailChimp Signup Form –>
<div id=”mc_embed_signup”><form class=”validate” id=”mc-embedded-subscribe-form” action=”http://HereInQuotesIsWhereYouPasteYourLongURLFromMailChimp” method=”post” name=”mc-embedded-subscribe-form” novalidate=””target=”_blank”><div class=”mc-field-group”><strong>Sign Up for Our Newsletter and Get This Free Awesome Thing! </strong> <input class=”required email” id=”mce-EMAIL” type=”email” name=”EMAIL” placeholder=”*Email Address” value=”” /><input class=”required” id=”mce-FNAME” type=”text” name=”FNAME” placeholder=”*First Name” value=”” /><input class=”button” id=”mc-embedded-subscribe” type=”submit” name=”subscribe” value=”Subscribe” /></div></form></div>
<!–End mc_embed_signup–>
Copy and paste your new form into your WordPress page using the Text tab (not Visual tab). You can also paste into a full width widget. Basically, what I've done is removed most of the <div>s, and removed any line breaks or spaces in the code within WordPress in my Page TEXT tab.
The CSS CODE
Now grab the CSS File and copy and paste it to the bottom of your CSS style.css file. If you used my other code on my previous post, you'll need to delete that old code and paste in this one.
Save (Update) and check the page you put the form on. Within the CSS I've added notes on where to change colors and what element it refers to. They will look like this:
/*this is the green background color for the horizontal form. Enter another hexidecimal code for the color of you choosing */
Still want to DIY it? Check out the free version of Magic Action Box–I do a full walkthrough on this plugin here. I have the paid version of Magic Action Box (affiliate link) and I love it. Or another option is Optin-Skin premium plugin for $67.
ADD YOUR OWN BUTTON
If you'd like to add your own button to replace the standard submit button, it's not hard to do.
- Upload your button image to the media library. I suggest making it 89px wide by 34px tall.
- Copy the button File URL in the File URL box. It will look something like “http://mysite.com/wp-content/uploads/8/2013/button.jpg”. This is the file path to tell the browser where to go to find the image.
- Now we're going to edit the last part of our MailChimp code. Instead of <input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe”> we're going to replace it with:
<input type=”image” img src=”http://mysite.com/wp-content/uploads/8/2013/button.jpg” id=”mc-embedded-subscribe”>
Replace the url with the URL you just copied from your button. Done!
MailChimp has a great article on how to design and host your own thank you pages, as requested by Joanna. Click here to hop over to MailChimp to read their article and watch the video.