Sexy CSS Horizontal Aweber Form

Aweber already has some pretty sweet web form templates but they’re still a bit too stylized for my liking.

I wanted a simple horizontal form to fit with the style here at Silicon Shovel so I created this CSS optin form for Aweber. I had a couple of people ask how I did it, so I’ve created an html file containing the optin form source code so you can give it a spin yourself.

Why Just Collect an Email Address?
I’m only collecting emails (no names) because I want to increase the signup rate and I really don’t need your name to send you cool stuff.

In fact, I was recently looking through my subscriber database and found that over 10% of names were either entered incorrectly, plain nonsense or just plain profanity so using them in emails just looks wrong. Besides, most of my blog readers know all about auto-responders anyway so using names in emails doesn’t really impress anybody anymore.

Styling The Optin Form

It’s styled using inline css so if you’re a code-ninja, knock yourself out and tweak it as you want. But if you know just enough code to be able to break it, I’d just run with it. Why bother screwing around with it when I’ve gone and done it all for you?

You can always change the button text if you want though. And to make it work you MUST ENTER YOUR OWN aweber LIST NAME and FORM CODE that you can get from your Aweber account (It’s the 10 digit number).

These are the rest of the bits you can / should customize

They’re marked up in the attached html file that you can just load up to your server.
<!–1–> 10 Digit Aweber Number (ESSENTIAL)

Aweber Form Code

<!–2–> This is your list address (eg.YOURLIST@aweber.com) (ESSENTIAL)
<!–3–> You can also change the confirmation page URL although I like the aweber video option that’s already there
<!–4–> You can add an optional tracking code here to monitor optins using this exact form
<!–5–> Change the submit button text

Get the source code here or preview the html file

Let me know how you get on and if you have any questions, just add them below. And don’t forget to click all the shiny social buttons to spread the mojo on digg and twitter and stuff.

  • http://www.PoorManSurvival.com Bedavid

    Even though most of this is Greek to me, I like your style.
    Bruce 'the Poor Man'

    • http://siliconshovel.com Marc

      I hear you Bruce – I know it can seem really complicated so I added some annotations to the text that tells you exactly what to enter in the code file.

  • http://innovatemediapublishing.com Craig

    Hi Marc,

    I’ve been looking for a horizontal aweber optin form for a while, so it was cool to read your post.

    How would this work if I wanted to use it on a wordpress blog? Because I notice you’ve styled the form using inline styling which is inside the head tags.

    Also, how do you get the Aweber 10 digit number if you’re creating your own form? I though Aweber assigned this number to the forms you create on its site.

    Thanks buddy

    Craig

    • http://siliconshovel.com Marc

      I added an image above to show where you get the 10-digit number from Aweber (You’re correct – Aweber generates this number for you)

      To add the form to my blog here, I just added the html part to a sidebar widget and added the CSS to the custom.css file in thesis. If you’re using a different theme, just add the css in your main .css file.

      Make sense?

      • http://www.facebook.com/craiglingard Craig Lingard

        Yeah cool. Thanks Marc.
        I dropped the html into my page, added the css to the stylesheet, made a few adjustments and BANG! It worked. (Had to drop the @aweber.com from the list address though).
        Works fine.
        Thanks buddy :-)

  • http://twitter.com/SimonWithLove Simon

    Thank you!
    But how can I change submitt button text and colour? 
    I don’t like grey “Go”…
    I want it wider and green or pink..
    It’s very important for me…

    • http://siliconshovel.com/ Marc Eglon

      It’s pretty easy to change the style using the CSS inside the style tags.
      If you need a hand with CSS – google it or find somebody on fiverr.com.

      http://www.w3schools.com/css/ is a good starting point.

  • http://www.facebook.com/internetgenius Ben Cope

    I recorded a screencast video showing you how to create a horizontal AWeber opt-in form: http://www.youtube.com/watch?v=cncEcgqWW7E

  • http://gabrieljohansson.com/ Gabriel Johansson

    Hey this is AWESOME!

    I just installed my form to the footer of every blog post (using the endcode plugin) and I am curious to see how it performs versus a standard Aweber, email only form!

    Thank you very much as I was looking for this!
    -Gabriel Johansson

    • http://siliconshovel.com/ Marc Eglon

      Nice Job Gabriel – Your form looks sweet.
      You could also try adding a form at the top of your home page – You should get a ton of subscribers. 

      • http://gabrieljohansson.com/ Gabriel Johansson

        Thanks Marc! I couldn’t have done it without this post here, so thank you!

        I have my sidebar form and popup as well as ViperBar at the top, so having another form would be a bit too much in my eyes. I even added a cool looking version of that same form into my blog header, but it was right under my ViperBar thing.

        The only other thing I was thinking of doing is using the optional feature section to add a video and opt in form on my homepage only kinda like what you said in the first place.. lol 

        Thanks again,
        -Gabriel 

  • Ken

    Hi Marc,

    Thanks for the code, but for some reason it’s not showing correctly on my site.  Mind taking a look?   http://awesomephysique.net/hi/

    Thanks,

    Ken

    • http://siliconshovel.com/ Marc Eglon

      Nice angle Ken, I like what you’re doing on that page.

      I also started getting this problem with thesis and had to update things a bit. Took me a while to track it down at first.

      Anyway, I created a quick screencast to show you how to fix it on YOUR site.

      here’s the link: http://www.screencast.com/t/LKL5clqh 

      • Ken

        Thanks Marc!  Worked like a charm!

        Ken

Previous post:

Next post: