How to Create a Horizontal AWeber Opt-in Form

http://internetgenius.com AWeber has some really cool pre-designed opt-in form templates, but unfortunately none of them allow you to create a horizontal optin form (where the name, email, and submit button appear in a single row).

This video explains how to create an opt-in form in AWeber, as well as how to embed the form using the javascript snippet, and how to style the form using CSS so that it displays horizontally instead of vertically. Below is a copy of the necessary CSS code:

#af-form-1809711154 .af-element { float: left; }
#af-form-1809711154 .af-clear { display:none; }
#af-form-1809711154 .af-body input.text { width: 150px!important; margin-right:15px!important; }
#af-form-1809711154 .buttonContainer { margin-top:-6px!important; }

Category:

People & Blogs

Tags:

• AWeber
• opt-in
• horizontal
• javascript
• CSS
• HTML
• optin
• CamtasiaForMac

[MiguelAngel75]

what if I already have two webforms and I don't want them to have the horizontal labels...

by changing the CSS file, will all the webforms have this "horizontal look"?

[internetgenius]

@MiguelAngel75 As long as you target the appropriate web form with the correct form ID, then the CSS code should only affect the specific web form that you want to be horizontal.

[ChrisFarrellFanTube]

Thanks for this clear and articulate tutorial, it was really easy to follow and I got a bit lost initially with the stylesheet as I am definitely not a coder.......but I got it to work in the end and it looks fab.....thanks again, Trish

[MiguelAngel75]

@internetgenius thanks a lot. now, i'm not sure where i should plug the java snippet/code. i want to place it just below the end of a post. how can i do that? do i have to do it thru the widgets and place it in the footer? i have syncronized aweber with my wordpress blog...

[Prok444]

Great tutorial. This CSS worked well for all the browsers except Internet Explorer.  Is there a way to get Internet Explorer to place all the fields on one row?

[nsankowski]

this is so helpful! thanks!

[saumitramg]

Great information.

I am trying to do this , but not getting this horizontally at all !

[jimkaspari]

Fantastic work - very helpful - simple, elegant solution - thanks! Jim