I designed this opt-in box for my BIG client.
Imagine if yours looked like this …
I’ve said before, you can’t expect success if you’re toting an unprofessionally designed blog. Don’t let Steve Pavlina confuse you: he’s succeeded despite his unprofessional design.
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:
<form>
<input (for email address) />
<input (for submit button) />
</form>
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!
<form>
<input (for email address) class="email"/>
<input (for submit button) class="submit"/>
</form>
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.
Let’s not give them too hard a time.
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:
input.email {
font-family: Georgia, Times New Roman, Trebuchet MS;
font-size: 14px;
font-style: italic;
color: #111;
width: 190px;
height: 27px;
border: 1px solid #CCC;
border-radius: 5px;
background: white;
outline: none;
margin: 15px 3px 25px 160px;
padding: 2px 0 2px 8px;
}
input.submit {
text-indent: -9999px;
width: 114px;
height: 30px;
background: url(http://www.example.com/images/join-red.png) no-repeat top;
cursor: pointer;
border-radius: 4px;
border: none;
margin: 15px 0 0 0;
padding: 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?
I really appreciate all the helpful adivce you give Martyn, thank you!
If you already have a viable business, then my advice is option number three – hire Martyn. You won’t be disappointed.
Unless you want to become a pro, save yourself the time and effort. Martyn knows how to design and optimize a site for maximum results. Not only did I save myself time, but we eliminated many of the “mistakes” I made that were actually taking visitors away from my site.
I had no idea how much I didn’t know.
Now I’m freed up to focus on producing actual results in my business and my non-profit. I think that’s called a no-brainer.
Thanks Martyn
Wow Brian – thanks for the testimonial! I really appreciate that.
Which reminds me – I need to follow up on some stuff at Trinity Effect. Pretty swamped this morning but I’ll catch you in the afternoon.
Damn! I needed this post like three days ago;) Had to learn the hard way (google). Thanks for the codes though so I finally can get the “subscribe”-button exactly where I want it to be=)
Sorry I’m late, man.
The subscribe button can be super tricky. I’m scared of how many hours I’ve spent experimenting to see what works best.
Thanks for this… I’ll give it a try. I’ve been trying to teach myself stuff, but I actually do want to learn it myself. Would be nice to hire someone to do it for me, but I’d rather have the control by having the knowledge myself.
Thanks for the resources
Awesome Denise. And should you ever decide it’s not worth your time, I’m always around.
OK, Martyn… I tried and I did it right because it came out just fine. But it bores me so much just looking at it, that I deleted it. Maybe I’ll just have you do it…
Any time. Haha.
Really cool tutorial, Martyn, with all the goodies attached!
However, for those people out there who are technically-challenged like me …
CSS, PHP, and HTML were not part of their course of studies in school — I suggest they hire YOU! Why take the risk? Your fees are reasonable, right?
Yep, and they’re extra special reasonable if you win a free blog tweak.
You can say THAT again!
And I should know.
thanks MC, appreciate this much. more power and blessings!
LOL Martyn, you’re always putting your finger in Brian Clark’s eye.
Very good tutorial here. I also agree with the previous comments, hiring you is affordable and it saves a lot time and pain.
Cristina
Well, I only criticize people I really like.
Very helpful post. I really love how you add codes so actual work could be done. Most influential blogs just talk about the theory or give a shotgun approach. You said in one of your posts somewhere that I wouldn’t regret signing up for your newsletter. You were right.
Thanks Josh! That truly means a lot to me. And yes, I’m biased for real solutions.
Me neither!
I’ve been marketing longer than Martyn’s been alive(!) and yet he teaches me new stuff all the time.
Damn again=( CSS will not work with Blogger+mail chimp.
Love this kind of guides, not easily spotted on the net, and not as simple as yours either. Please do more guides like this, and perhaps with html codes and not only CSS? If there is a difference I don´t know, hehe;)
I highly recommend switching to self-hosted WordPress. It’s a lot less frustrating.
Cool tutorial on how to improve subscribers. I prefer designing my own feed box. thanks