Two Hour Blogger

On Marketing and Writing

How to Make Your Opt-in Box Look Professional

image of an opt-in box

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.

image of the Copyblogger search box

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?

The #1 Thing Your Can Do for Your Business Today

What is the one thing all of my clients have in common? Find out.

21 Replies

  1. I really appreciate all the helpful adivce you give Martyn, thank you!

  2. 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

    1. Martyn Chamberlin

      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.

  3. 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=)

    1. Martyn Chamberlin

      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.

  4. 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 :)

    1. Martyn Chamberlin

      Awesome Denise. And should you ever decide it’s not worth your time, I’m always around. ;)

      1. 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… :)

        1. Martyn Chamberlin

          Any time. Haha.

  5. 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? :)

    1. Martyn Chamberlin

      Yep, and they’re extra special reasonable if you win a free blog tweak. :P

      1. You can say THAT again!

        And I should know. ;)

  6. Riki

    thanks MC, appreciate this much. more power and blessings!

  7. 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

    1. Martyn Chamberlin

      Well, I only criticize people I really like. ;)

  8. 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.

    1. Martyn Chamberlin

      Thanks Josh! That truly means a lot to me. And yes, I’m biased for real solutions. :D

    2. Me neither!

      I’ve been marketing longer than Martyn’s been alive(!) and yet he teaches me new stuff all the time.

  9. 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;)

    1. Martyn Chamberlin

      I highly recommend switching to self-hosted WordPress. It’s a lot less frustrating. ;)

  10. Cool tutorial on how to improve subscribers. I prefer designing my own feed box. thanks