Tweak Me v2 - Adding an Opt-In Form

An opt-in form is a box with an email subscription form. This is a great way to encourage people to sign up for your newsletter or blog subscriptions.

To be clear, Tweak Me does not come with an email subscription plugin.

You have to sign up for a third party service such as  Feedburner or MailChimp. All Tweak Me does is display these forms. The theme doesn't come packaged with its own subscription service.

Where to place opt-in code

This opt-in code can be placed anywhere on the site. I recommend one of two locations:

1. The Header Hook
2. The Below Posts Hook

These "hooks" can be found in Appearance > Theme Settings. Then click the "Snippets" tab, followed by the "Hooks" link.

Any code placed in the Header Hook area will appear at the top of every single page. You can configure the placement of this hook in the Header tab. Find the Header Layout section and drag and drop the "Hook" box where you want it to be displayed.

The Below Posts Hook gets added at the bottom of every single post (on the single post page only). The code appears below the post, but above the comment area.

After you've chosen your location, it's time to add in the code!

Add in the theme code

In order to have the styles applied to your opt-in form, you have to add the right code. Paste this code inside the hook box for now:

<div class="cw_theme_optin">

<!-- Form code goes in here later -->

</div> 

Then later when we grab the form code (from Feedburner or MailChimp) we’re going to place it INSIDE those two tags (where I've written the comment).

Code for Feedburner

All you have to do is copy this code:

[cw-feedburner id="YOUR FEEDBURNER USERNAME HERE"]

But do you see where it says YOUR FEEDBURNER USERNAME HERE? Just enter your Feedburner ID/username there.

Then paste this code into the hook box  in between the two tags we entered before. So your final code should look like this:

<div class="cw_theme_optin">
    [cw-feedburner id="NoseGraze"]
</div>

Feel free to add any additional text just before the form code. For example:

<div class="cw_theme_optin">
    <p>Want more awesome posts like this? Subscribe to my newsletter and get awesome blogging tips in your inbox every day!</p>
    [cw-feedburner id="CreativeWhim"]
</div>

Code for MailChimp

Login to MailChimp and click on the “Lists” tab. Find your list on the page and click the arrow on the far right next to “Stats”. Select “Signup forms”.

On the next page, click the link for “Embedded forms”.

Click the “Naked” tab to get the simplest form. I recommend you adjust the settings so they look like this:

Copy the code from the “Copy/paste onto your site” box. But first, we’ll want to make a few adjustments.

Find this line:

<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">

Edit it so it now says this instead:

<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your email address">

Notice how I added a new parameter at the end for  placeholder="Your email address"

Next, find this line:

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

See where it says  class="button" ? Change that to be class="button btn btn-primary" . So the final change will look like this:

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-primary"></div>

Once you have your final code, paste it where you want  inside the <div> tags we added earlier. So your final form might look something like this:

<div class="cw_theme_optin">

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//yourwebsite.us4.list-manage.com/subscribe/post?u=235982764298472148&id=124912874912c" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address </label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your email address">
</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="b_235897f097023572sd_20742f23c" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-primary"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

</div>