How I made it really, really, easy to add email opt-in forms to WordPress

I’ll let you in on a secret. I hate doing the same thing over and over. So when it came time for me to try out this new fad of adding a sign up form to different pages of my site, like my about page and content bucket pages as per Derek’s suggestions, I decided to make it a little easier on myself by coding up something to help me.

Now, the following code is for WordPress users that use the MailChimp email marketing system, the email marketing provider I chose for my site because of it’s awesome price (free), but you can employ this trick with any email marketing system.

What you need to do is create a new shortcode and to do this we’ll be adding a little bit of code into our functions.php file located in your themes directory.

Here’s the first part of the code which tells WordPress to add a new shortcode:

add_shortcode('email-optin-form', 'myEmailOptInForm', 1);

And here’s the function that gets called when WordPress encounters this shortcode in pages or posts:

function myEmailOptInForm() {
	global $wp_query;
 
	$thepage = $wp_query->queried_object->post_name;
	if (empty($thepage))
		$thepage = 'homepage';
 
	return '<div id="end-of-post-subscribe-form">
	<h2>Subscribe for updates, it\'s free</h2>
	<!-- Begin MailChimp Signup Form -->
	<div id="mc_embed_signup">
	<form action="[INSERT YOUR UNIQUE SUBSCRIPTION URL HERE]" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
	<div class="mc-field-group"><input type="hidden" name="SIGNUP" id="SIGNUP" value="' . $thepage . '" />
		<p class="form-label"><label for="mce-EMAIL">Email: </label><input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button subscribe-button"></p> 
	</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>
	</form>
	</div>
	<!--End mc_embed_signup-->
	</div>';
}

Don’t forget to replace the [INSERT YOUR UNIQUE SUBSCRIPTION URL HERE] with your own URL which you can find on the forms page in your MailChimp account.

Tracking pages

You’ll also notice if you’re code savvy that there is a hidden input box there. This is for tracking the page that your subscriber signed up on ala this guide.

Now that this code is in place, all I need to do when I want to drop in a subscription form on a page is enter the shortcode below:

[email-optin-form]

Voila! Welcome to the wonderful world of shortcodes. Want to use this shortcode in a theme? Say, at the bottom of every post in your single.php template? No worries:

echo do_shortcode('[email-optin-form]');

Anyone keen to write up the same code for Aweber for me? Contact me. We’ll organise a guest post!

Did you like this article?

If you liked this article click one of the buttons below: