Want More E-Mail Opt-Ins? Hide Your Form

opt-in-hide-form As the saying goes, “the money is in the [e-mail] list”.

If you don’t listened to the Smart Passive Income Podcast, you are missing out on some great information. A few months ago, I listened to Session 78 with Clay Collins from LeadPages. According to Clay, there are tons of tips and tweaks to increase email opt-ins. Two ideas that jumped out at me was adding an opt-in form to a 404 page and hiding the opt-in fields until the visitor takes a first step.

Making a custom 404 page is not difficult, especially if you are using WordPress with a good theme. I’m using the Genesis framework with the Focus child theme (affiliate link) on my other site, http://ScanThisGuide.com. If you are not familiar with custom 404 pages, check out this post for a little help. I just copied the 404 page template from the Genesis core and made some changes such as adding my own wording and the code for my opt-in form.

For this post, we’ll discuss hiding (or more specifically, unhiding) your opt-in form. Let’s get to it.

Step 1 – Get A Form On Your Site

The first step to implementing an email list opt-in form is to have an email list provider. I use MailChimp but other popular choices include AWeber and Office AutoPilot. We won’t get into setting up the list itself or the differences between the services here, but if you want more information, check out this page to get started with MailChimp.

Once you have the code for your opt-in form, it’s time to put it on your site. There are several options of where you can put the opt-in form. Most experts suggest several locations scattered throughout your site but specifically: on the upper right, at the end of every post, and in a light box or popup. For more information, check out Chapter 1 of The Complete Guide To Building Your Blog Audience over at QuickSprout. Just scroll all the way down near the bottom and look at number 6, Building An Email List Of Engaged Subscribers.

For my site, I decided to add this opt-in form to a full-width area on my homepage. If you are interested in adding your form the to the same spot, check out this post.

Once the form is on the page, you can tweak the design, colors, and placement using CSS. When the form looks the way you want it to look, it’s time for step 2.

Step 2 – Build A Container For Your Form

You spent all this time to make a great form, why would you hide it? For a better explanation, check out the SPI podcast with Clay Collins but the goal is to get visitors to take baby steps. If your form is hidden and visitors have to click to reveal the form fields, they have already taken a baby step toward an opt-in. Studies show that it is easier to get people to agree to larger decisions if they have already agreed to smaller ones. Baby steps all the way…

The main key to hiding your form is the tag. This creates a container that we hide or reveal using a line of code. With the tag, you will need to add a unique ID to the tag so we can use CSS to hide the container. It doesn’t matter what ID you use but you’ll need it in just a second and it does need to be unique. You may want to use your initials or the initials of your site, etc. Here is what the opening tag looks like on my site:

<span class="adr-optin" id="adr-optin-fields">

Notice the CSS class. This establishes the class for the that will control when it is displayed or not. The class can be anything you want but it needs to be unique. Once we get a few more things in place, we will head over to your Styles.css file and setup the classes but for now, let’s keep working.

Next comes your opt-in list code followed by a tag, closing the container. If you want to add a few sentences encouraging visitors to complete the form and get your opt-in reward, you would put it in the tag.

Step 3 – Add A Link To Unhide Your Form

When your form is hidden, your visitors will need some way to unhide the form. You can use a button, mouseOver event, etc as the trigger but for this site, I’m using a simple hyperlink. To setup the hyperlink, simply add javascript:void(0) as the target (href) and add an onClick event attribute. That way when a visitor clicks the link, the code in the onClick attribute will trigger. Here is the code:

<span><a style="color: red;" onclick="document.getElementById('adr-optin-fields').className='adr-show'" href="javascript:void(0)">Click here to download the free guide</a></span>

Looking at the code, you can see the Javascript that does the work of unhiding your form. The Javascript finds the tag by the ID (remember when I said you would use the ID later…) and changes the CSS class of that element from ‘adr-optin’ to ‘adr-show’.

A few things to note: you could add the onClick event to most tags (like the tag itself) and get the same result. From the user’s perspective, when you mouse-over a link, the cursor changes to let them know to click. When you mouse-over a tag, the cursor also changes but it looks the same as when you mouse-over regular text. We want some indication that our text trigger is to be clicked besides saying it needed to be clicked.

Step 4 – Hide Your Form

By now, you should have your opt-in form surrounded by a container. Close by, you should have a link with a bit of Javascript that changes the class of your form container. Let’s head over to your Styles.css file and hide the form.

Over in your Styles.css file, you’ll need to add two classes; one class to show your form and one class to hide your form. Here is what mine looks like:

.adr-show{
 display: block;
}

.adr-optin {
 display: none;
}

If you look back at the original tag, you will see that the initial class was .adr-optin. From the code above, you will see the display: none; attribute. There are two CSS attributes that can control how an element is displayed; visibility and display.

If you want an element, such as your opt-in form, to take up space but not be visible, you can use visibility: hidden; as an attribute. This will result in a big, blank space that may or may not look right in your situation.

If you want your opt-in form to not be visible and not take up space, use display: none; as an attribute. From a design standpoint, this is the option that I prefer. For a more complete description of visibility vs. display, check out this page.

Things To Consider

If you are using the Genesis framework,

Troubleshooting

Head back to your page with the opt-in form. Your form should be hidden. If not, go back and check the following:

Make sure the form code is between the and tags
Make sure your tags have a unique class and unique id
Make sure your Style.css file is updated and uses the correct spelling for the class

Wrap-up

There you have it, a hidden form that will be unveiled when the visitor clicks a link. In the podcast (SPI session 78), you will hear Clay talk about a giving page and a taking page. Hiding your opt-in form initially changes that page from a taking page (taking the users information via a form) to a giving page (giving them a form for clicking a link). By implementing this small change, you can take advantage of a little bit of psychology that will likely improve your opt-in rate.

What do you think; Is hiding your opt-in form worth a try? Leave a comment and let me know.