Create Crucial Signup Forms: Part 2 [Bottom of Posts]
In the previous article you learned how to create a signup box for the sidebar. In this article you are going to learn how to place a signup box between posts and comments.
This is a powerful strategy and can lift your subscription rate by 100%.
Below, you’ll find a way to place a subscription box between post and comment section, whether you are using Feedburner, Aweber, or Mailchimp.
Signup box at the bottom of posts using Feedburner
A signup box between post and comments is a great way to ask readers to subscribe. You can do this with Feedburner. In addition, you’ll need to install the free plugin, called Bottom Of Every Post. Here is what you need to assemble in order to make this work:
Step 1: Get your Feedburner Subscription Form Code for email subscriptions.
In order to find it (or if you need to first set up Feedburner subscriptions), please read the article, How to Set up Feedburner. Once you’ve got your Feedburner subscription form code, copy and paste it into a text editor on your computer. We’ll get back to it presently.
Step 2: Set up a test page on your blog.
Call it ‘Test’ and save it as a draft.
Step 3: Find an attractive image. This could be an image of yourself, or an image of your digital product (if you’ve got one), or an image related to the topic of your blog. Just make sure it’s not copyrighted!
Upload your image to your Test page or to Media (you’ll find a link to Media in sidebar of a WordPress blog dashboard). Find the URL of your new image and copy/ paste it into the text file you’ve created with (see above). You can find the URL when you upload the image. The size of the image should be not bigger than 150×150 px. You can adjust the size of your image in Pixlr.com, a free online image editor.
At the top of the upload pane you can see the Link URL. Make sure you click on align right.
Now open the HTML Editor and copy the code. In the example below the part in red is the URL (of course, this will be different for your image). Paste the image code and park it for now in the text file with the Feedburner code.
<img class=”alignright” src=”http://maryjaksch.com/wp-content/uploads/2012/08/how-can-i-find-love-150×150.jpg” alt=”” width=”150″ height=”150″ />
Step 4 Upload the Plugin Bottom Of Every Post.
This WordPress plugin will automatically create a box at the bottom of every post. Don’t worry if you have a blog that’s on Blogger or WordPress.com – you’ll still be able to create a signup box, but you’ll have to add it manually at the bottom of every post.
- Go to Plugins in the WordPress sidebar.
Click on Add New:
.
. - Insert name of plugin and click on Search Plugins
.
.
.
- Click on Install Now
.
.
.
- Click on edit
.
.
Leave this pane open and open up a new tab in your browser. Bring up the Test page you created.
Step 5: Open up your Test page
In this step you’re going to create the text for the signup box. Just write the text you want in the Editor pane.
Below is an example of what you could say. (Just tweak it for your particular blog niche) and add your image (aligned right):
Learn all you need to be a confident blogger
- How to find inspiration
- How to create a successful post
- How to get more readers
The headline should be H3. Make sure the bullet points describe the benefits of your blog, or your digital product. Add your chosen image. Below is the HTML code of the text above, with an image on the right-hand side. You can copy the HTML code below — just change the parts in red, i.e.the image URL, the headline, the bullet points, and the call to action.
<ul>
<li>How to find inspiration</li>
<li>How to create a successful post</li>
<li>How to get more readers</li>
</ul>
<strong>Just enter your email below and get updates direct to your inbox</strong>
Please change the code above to your requirements. Then copy it and paste it into your text file with the Feedburner form code.
Step 6: Putting it all together
This will seem a bit geeky, but just hold your nerve… it’s quite straightforward. This step involves taking the Feedburner form code that you copied and pasted into a text file, and inserting the code for the textbox (which you created above) into the middle of it.
Below you can see the complete code. The code in black is the Feedburner code. The red code in the middle is the code you created for the form text and image in the step above. (Just make sure the image file is your own, and that you have changed the text for your box appropriately in step number 5.) It will look something like the code below.
Save the text file. You are going to use it in a moment.
<form style=”border:1px solid #ccc;padding:3px;text-align:left;background-color>
” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=VirginBloggerNotes’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”>
<img class=”alignright src=”http://www.alistbloggingbootcamps.com/wp-content/uploads/2012/10/young-woman.jpg” width=”150″ height=”150″ /><h3>Learn all you need to be a confident blogger</h3>
<ul>
<li>How to find inspiration</li>
<li>How to create a successful post</li>
<li>How to get more readers</li>
</ul>
<strong>Just enter your email below and get FREE updates directly into your inbox</strong>
<p>Enter your email address:</p><p><input type=”text” style=”width:140px” name=”email”/></p><input type=”hidden” value=”VirginBloggerNotes” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/><input type=”submit” value=”Yes! Send me updates” /></div></p></form>
If you want to change the background color of your signup box , as well as the padding, just tweak the first line of the code like this:
(You can find color codes here.)
Step 7: Customize the Bottom of Each Post plugin
Find the plugin in the list of installed plugins and click on Edit.
Now look to the right and find the plugin files on the right-hand side of the Dashboard.Click on the third one (text file).
.
Insert your the assembled code in your text file you and paste it into the empty box that appears when you click the link. (See arrow above)
This is what the final result looks like (with tweaked background color and padding):
If your blog isn’t built upon WordPress.org
If your blog is on Blogger or on the free WordPress.com, you can manually paste the box code you assembled above at the bottom of each post.
How to exclude the signup box from the homepage
The plugin looks a lot better if it only shows up at the bottom of each post and not on the homepage. Here is a simple fix to ensure this.
You need to find the code of the plugin and find the following line:
Change it to this:
Signup box at bottom of posts for Aweber or Mailchimp
There are two different ways to install an Aweber or Mailchimp signup box between post and comments. The first one is free and involves using the Bottom of Each Post plugin. The other way is to use a premium plugin, called WPSubscribers.
Method 1: Using the Bottom of Each Post Plugin
This is quite straightforward. There are three steps.
1: Create a signup form with AWeber or Mailchimp
The width of the form should be set to 600px.
2: Copy the form code
Both Mailchimp and Aweber give a piece of code for signup forms.
3: Paste the form code into the plugin
At this point you need to go back to Step no. 7 (above) and read how to customize the plugin.
Method 2: Creating a signup box with WPSubscribers
If you take a look at Writetodone.com, you’ll see a signup box between the post and the comment area. The box was created with a premium plugin, called WPSubscribers ($47). WPSubscribers has a lot of other functions, like popups, and so on, and it’s designed to work with Aweber or Mailchimp.
The box you need to create is called post optin-form. This is what it looks like when you set it up in WPSubscribers:
In order to include an image and create a bulleted list like the one in the form above, you need to click on HTML and adjust the code as follows (just change the code in red to make it your own).
<p><img style=”float: right;” src=”http://writetodone.com/wp-content/uploads/2012/07/banner_image-cropped-176-.png” /></p>
<span style=”font-size: small;”><em><span style=”font-family: georgia, palatino;”>Become a better writer overnight with this FREE eBook</span></em></span>
<ul>
<li>Find daily inspiration</li>
<li>Improve your writing overnight</li>
<li>Get started, even when you don’t feel motivated</li>
<li>Complete what you start</li>
<li>Get WTD updates</li>
</ul>
<div><em><span style=”font-family: georgia, palatino; font-size: small;”>Fill out the form below and get your copy immediately!</span></em></div>
<div><span face=”georgia, palatino” size=”1″ style=”font-family: georgia, palatino; font-size: xx-small;”><i><br /></i></span></div>
If you don’t have a subscription incentive, such as an ebook or other digital product, just describe the benefits of reading your blog with bullet points.
A signup box between post and comments is one of your most powerful tools as a blogger, because it can boost your subscription rate by 100%.
Conclusion
Setting up signup boxes on your blog is crucial for the growth of your blog. If you have taken action and set up a box between post and comments – congratulations!
Author: A-List Team