You will need to use the embed code generated from your Mailchimp account – if you want the same look as the Flexform demo, use the ‘Super Slim’ embed code. It should look something like this (I replaced certain parts to keep sensitive date obscured):
<!– Begin MailChimp Signup Form –>
<link href=”//cdn-images.mailchimp.com/embedcode/slim-xxxxxx.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.us4.list-manage.com/subscribe/post?u=xxxxxxxxxxx&id=xxxxxxx” method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank” novalidate>
<label for=”mce-EMAIL”>Subscribe to our mailing list</label>
<input type=”email” value=”” name=”EMAIL” class=”email” id=”mce-EMAIL” placeholder=”email address” required>
<div class=”clear”><input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe” class=”button”></div>
</form>
</div>
<!–End mc_embed_signup–>
Copy and paste that code into the Theme Options>Header Options>Subscribe form code area.
To style the subscribe form:
1. Replace the font used – replace the ‘Helvetica,Arial,sans-serif’ code with your preferred font. For example: “Abril Fatface”, sans-serif
2. The change the font size of the ‘Subscribe to our email list’ add this to your custom styles (I use the My Custom CSS plugin) and change the number for the font size:
#header-subscribe label {
font-size: 12px;
}
3. To change the width of the drop down form, add the width property to the section of code in this section of the embed code (in bold):
#mc_embed_signup{background:#fff; clear:left; font:14px “Abril Fatface”, sans-serif; width: 350px; }
4. To change the font size of the ’email address’ and ‘Subscribe’ button text, add this to your custom CSS styles and change the number for the font size:
#header-subscribe input {
font-size: 24px;
}
5. To change the button color/style, change the class property from ‘button’ in the embed code to something unique you can use to style the button, like this (in bold):
<input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe” class=”my-email-form-button”>
Then in your custom CSS styles (again, I use My Custom CSS plugin), add the class property and style as you wish. I’m copying the 2 style types from the Flexform theme demo:
#header-subscribe .my-email-form-button {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
float: right;
padding: 6px 12px;
margin-top: 5px;
}
and this one for the border radius change on hover:
#header-subscribe .my-email-form-button:hover {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
That should get you in the ballpark.
.