Categories
WordPress

How to Add an Opt-In Box to WordPress After Your Posts

In this post I’m going to explain how to add an opt-in box to WordPress after your content and before the comment section. To do this I will be using the following WordPress plugins:

Two Fields

First create a form using Gravity Forms. Add a single text field and an email field. Change the Field label for the single text field to First Name.

Top Align

Under the form settings change the Label placement to Top aligned. Be sure to Update the Form Settings before you go back to the form editor.

To change the layout of the form fields I will use Gravity Forms ready classes.

First Name Field

On the First name advanced tab add gf_left_half as the CSS Class name.

Email Field

From the Email Field Advanced Tab add gf_right_half as the CSS Class name. Update the form.

After Content Widget

If you have not done so go to Plugins >> Add New. Search for Add Widget After Content. Install and activate the plugin. Go to Appearance >> Widgets and you should see a new widget section called After Content. Drag the Form widget to After Content and choose the form you just created. Set the title and check Display form description.

Save and now you have an optin form under every post. It is there but it is not styled. To style the optin box I added the following to my theme css file. You will want to change the css to meet your needs.

.awac-wrapper{
	border:1px solid #333;
	background:#f3f3f7;
	margin-bottom:1em;
	padding:.8em
}
.awac{
	margin-bottom:.8em
}
.awac .gform_wrapper .gform_footer{
	padding:8px 0 20px 0;
	margin:8px 0 0 0;
}

.awac .gform_wrapper input[type="submit"],.awac .gform_wrapper input[type="button"]{
	background:#333;
	color:#ffffff;
	border:1px solid #333;
}

If you don’t want the optin to display for a post you can turn it off on the post edit page. you can also add an image and explain your optin offer in more detail.

This same concept will work for an author box and other types of calls to action.

 

Note: Updated 4/25/15 to change the css to use classes instead of ids.