How to Make Your Opt-in Box Look Professional
Most bloggers haven’t a clue when it comes to Web design. That’s a shame, because good design is crucial to boosting your subscribers. But to own a professional site, you need to become an expert designer or hire someone who is. Time or money – your choice. Most bloggers don’t want to spend money, so they choose time. Hey, that’s how I started out.
If you want to spend your weekends going from an HTML-ignorant blogger to a razor-sharp professional designer, look no further than the rocksolid book Build Your Own Web Site The Right Way Using HTML & CSS by Ian Lloyd. Before that book, I knew nothing about Web design. It was the smartest investment I’ve ever made.
Dead tree books aside, if you’re looking for a copy-'n'-paste solution to your virtual needs, I’ve got your back. Today I’ll demonstrate how to rock your opt-in box. If you got questions or want to see more of this, toss a hearty comment downstairs.
1. Grab your code and give it some class
Whether you’re using Aweber, Mailchimp, Feedburner, Constant Contact, iContact, Feedblitz, or any other email marketing tool, there’s an underlying structure you can identify and edit right away.
Here’s the pattern you should be looking for:
<input (for email address) />
<input (for submit button) />
Rest assured, the code never looks that simple, so you’ll need to do some exploring. Found it? Time to add some class. Right before the end of each input, insert a little snippet of HTML, like this. See? I told you we were adding some class!
<input (for email address) class="email"/>
<input (for submit button) class="submit"/>
2. Give that class some meaning in life
All right, what’s that class all about? Those who’ve bought my course know where I’m headed, but today there’s a special twist. If you’ve hung around Two Hour Blogger any length of time, you’ve noticed the “email” and “submit” buttons are on different lines. That suites my tastes well, but chances are you’ll want them on the same line.
It’s difficult having both elements on the same line without having them slightly off; look at the search box on Copyblogger. I’m not criticizing them any more than did Georgina Laidlaw.
After hours of experimentation, I’ve found the solution that works best in all major browsers. Find your theme’s CSS file and copy this into it:
font-family: Georgia, Times New Roman, Trebuchet MS;
border: 1px solid #CCC;
margin: 15px 3px 25px 160px;
padding: 2px 0 2px 8px;
background: url(http://www.example.com/images/join-red.png) no-repeat top;
margin: 15px 0 0 0;
In the submit CSS, you’ll notice I’ve written an URL for a special background image. You’ll want to swap it out for your own URL. Just upload an image into WordPress and paste that image’s URL. In case you’re uncomfortable creating images, I’ve assembled a miniature set of graphics with the proper dimensions (114px by 30px) and for good measure, I’ve even thrown in the original .psd file. Click the banner below to download the zip.
To cap up, you’ve added classes to your signup code, beatified with CSS, and uploaded a graphic that matches your theme. If you’re wanting a background like Medical Marcom, you can always do that too. Or you can shrink the form width and tuck it as-is into your sidebar. Your choice.
You could always hire me
If you’re totally new to this and you don’t want to get your hands dirty, I can help.
Or if you’re passionate about conquering it yourself, that works too. Either way, let’s talk below, shall we?