How To Place A Video Opt-In On Your Wordpress Homepage

Ever since I made the most recent design shift here on DavidRisley.com, the thing that people mention to me most about it is the video opt-in. Basically, I have a video on the left side and an opt-in form on the right side.

It is actually pretty simple to implement something like that. But, first, let’s answer the question…. should you?

Does The Big Video Opt-In Work?

As always, you have to test it. Just because you see something on my blog doesn’t mean it is the best idea in the world. 🙂

For me, that opt-in form has been performing better than any other opt-in form on the site. But, still, not as well as I would have thought going into it. It is converting at about 3.7%.

Now, considering that typical sidebar opt-ins do less than 1% conversion, a 3.7% conversion is pretty good. It is nothing compared to what I can get on a squeeze page, but it is OK.

What would I do differently? The video. The video is a little bit too long. And the still shot is rather ridiculous looking. 🙂 I just haven’t taken the time to re-do it yet.

The idea behind the setup should be obvious, though. A video landing page for a blog homepage makes a lot of sense – IF you can produce a halfway decent video. It stands out MUCH better than a typical sidebar opt-in.

The drawback is that, on most blogs, the homepage is not the most popular page on the site. Most people come into DavidRisley.com directly into one of the blog posts. In that case, they’ll never see the big opt-in form. And due to the size, I don’t want to implement it site-wide. So, another solution is needed for the rest of the blog.

How To Implement A Video Opt-In

Two words of warning going into this:

1. This is technical by nature and I can’t deliver a course on HTML and CSS here in this post.
2. The procedure will be a bit different if you’re using a framework like Thesis or Headway.

With Wordpress, you can give any theme a custom homepage by simply having a home.php file in your theme folder. If your theme already has a home.php file, then you have a custom homepage (whether it looks custom or not). If you don’t have one, you can simply make a copy of your index.php file, call it home.php, and you’re good to go.

Now, once you have a home.php file, then realize that any changes you make to that file will reflect ONLY on your blog’s homepage. So, you can add your custom opt-in right there.

From there (and this is where the knowledge of HTML and CSS comes in), you have to find the place in that template which is before your posts and sidebar. You’ll know where your posts are being listed because it will start with something like:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Typically, your sidebar will be called in below all of that using the get_sidebar() function. So, ABOVE where the posts start – somewhere – you’ll want to place the code for your video opt-in. A good way to test if this is the right location is to place a little letter into that spot in the code, save, and see where it shows up on your blog. So, if you put a little “x” in your theme code where you think it should be, save and preview… if the “x” appears above your posts and sidebar, you’ve nailed it.

In that place, paste in the code for a video opt-in. Here’s a sample from my own blog:

<div id="homevideo">
[VIDEO EMBED CODE HERE]
</div>
<div id="homeoptin2">
[OPT-IN BRIBE TEXT - WHATEVER YOU WANT]
<div class="optinform">
<form style="float:left;" method="post" action="http://www.aweber.com/scripts/addlead.pl">
[HIDDEN FIELDS FOR YOUR OPT-IN FORM]
<input id="textinput" type="text" name="name" value="Your First Name" onfocus="if (this.value == 'Your First Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Your First Name';}" size="20"><br />
<input id="textinput" type="text" name="from" value="Your Primary Email" onfocus="if (this.value == 'Your Primary Email') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Your Primary Email';}" size="20"><br />
<div align="center">
<input type="submit" name="Submit" id="optinbutton" value="Get Access Today!" />
</div>
</form>
</div>
</div>
<div style="clear:both;"></div>

That’s the outline of it. You’d need to put in your own opt-in text, your own video embed, and the proper code for your own opt-in form.

Here’s the CSS code to go along with it:

#homevideo {
float: left;
width: 550px;
height: 343px;
padding: 3px;
border: 5px solid white;
background-color: #EEE;
}
#homeoptin2 {
float: right;
width: 360px;
height: 323px;
padding: 20px;
border-left: 2px solid #DDDEDD;
background-color: #F9FAF9;
margin: 0px;
}
.optinform {
margin: 0 10px;
}
.optinform #textinput {
width: 310px;
background-color: #FDFCDB;
padding: 6px 10px;
font: 14px 'Nobile', Arial, Helvetica, Geneva, sans-serif;
margin-bottom: 3px;
}
#optinbutton {
background: #318537;
border: 1px solid #1D7529;
cursor: pointer;
text-shadow: 1px 1px #1D7529;
border-radius: 20px;
box-shadow: 0 1px 1px #CCC;
color: white;
font-weight: bold;
font-size: 1.4em;
padding: .438em 1em;
}

You’ll need to modify this to suit your needs. You can obviously get fancier with it if you wish. The actual opt-in code I have on this blog is fancier than what I’ve put into this post. You can always “view source” on this blog to see the whole thing, if you’re inclined.

Tips For The Opt-In Video

You can host the video anywhere you want. I am using Easy Video Player. Youtube is always an option, however I’m not a big fan of using third-party sites like that for functional videos to my sites.

In terms of the actual video:

1. Keep it short. 2 minutes or shorter. This was a mistake in the one I recorded. It is a bit over 4 minutes and I think that’s too long.
2. Show them the opt-in bribe. What are you going to give them?
3. Make it live action. No screen recordings on this one. I really think a big part of the power of such a video is the personal nature of having you actually talking to your new reader.
4. Tell them what to do. In other words, make sure you actually TELL them to opt-in. And, if the video is going to be to the left of the opt-in, you can actually point to your right when recording the video and tell them to fill out the form.

Parting Words

Squeeze page work insanely well. And, you need to keep in mind that one of the import important roles of your blog is to get them onto your mailing list.

If people enter directly into one of your posts, then the content is key. But, if they enter your homepage, they’re a casual surfer. They should get an immediate and clear call to action to connect with you. Your homepage shouldn’t be a mere listing of your latest posts. To do that is to under-utilize the real estate.

Stay geeky! 😉