All opt-in forms are created with HTML tables. By default, most list managers create forms with the tables stacked on top of each other for a vertical opt-in form that fits easily into sidebars. For most applications this works just fine but there are times when a horizontal form would fit your layout better. Unfortunately none of the major list management services seem to provide the WYSIWYG option for creating this style of form.
The code below is the same code I use for the horizontal form on this website. It is fully customizable so you can change the colors to match your website’s color scheme by simply changing the hexidecimal color codes within the HTML. You can find a full hexi-color chart here. All you have to do is replace the #xxxxxx with your preference. You can change the background-color and the font color.
You will also need to replace the following with your own information from the HTML code you get from Aweber when you create your web form. This code will also work with other autoresponders, but since I use Aweber, I have focused on it.
Step-by-step instructions for creating a horizontal Aweber form:
2. Cut and paste the code below into a wordpad txt file so you can edit it to add your own information.
<div style=” text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;”><table width=”600″ border=”1″ cellpadding=”2″ cellspacing=”2″ style=”background-color: #003366;”>
<td style=”border-width : 0px;”>
<font color=”#FFFFFF”><font size=”4″>****PLACE YOUR CALL TO ACTION HERE*****</font></font>
<form method=”post” action=”http://www.aweber.com/scripts/addlead.pl” target=”_new”>
<input name=”meta_web_form_id” value=”****PASTE YOUR 10 DIGIT FORM ID HERE****” type=”hidden”><input name=”meta_split_id” value=”" type=”hidden”>
<input name=”unit” value=”****PASTE YOUR FORM NAME HERE****” type=”hidden”><input name=”redirect” value=”http://www.aweber.com/thankyou.htm?m=default” id=”redirect_4af967ba4a112dea2d51284d1bb07ac5″ type=”hidden”>
<input name=”meta_adtracking” value=”****YOUR AD TRACKING GOES HERE*****” type=”hidden”><input name=”meta_message” value=”1″ type=”hidden”>
<input name=”meta_required” value=”from,name” type=”hidden”><input name=”meta_forward_vars” value=”0″ type=”hidden”>
<table cellpadding=”0″ cellspacing=”10″>
<td><font color=”#FFFFFF”>Name:</font></td><td><input name=”name” value=”" size=”20″ type=”text”></td>
<td><font color=”#FFFFFF”>Email:</font></td><td><input name=”from” value=”" size=”20″ type=”text”></td>
<td colspan=”2″ align=”center”><input name=”submit” id=”af-submit-image-397933617″ type=”image” style=”background: none;” alt=”Submit Form” src=”http://www.blog-mechanics.com/subscribe.png” tabindex=”502″ /></td>
Now you can customize the code.
- I have set the table width=”600″. You can make the background of the table wider or narrower to fit your layout by changing the number.
- If you do not want the blue background, just change the hexidecimal code to match your site colors. or change it to #FFFFFF if you just want a white background.
- You can also change the font colors for the call to action, name and email.
- Next, add your call to action by replacing the ****PLACE YOUR CALL TO ACTION HERE***** with your own text.
- All web forms have their own numeric ID. Look in the code you copied from Aweber and find the meta_web_form_id and replace the ****PASTE YOUR 10 DIGIT FORM ID HERE**** with your own 10 digit code.
- When you created your list you assigned it a name. In your code it will be the “unit” value=. You will need to input that name into the form replacing the ****PASTE YOUR LIST NAME HERE****
- Next, you gave the form a name when you created it. In the code it is known as the meta_adtracking. Replace the ****YOUR AD TRACKING GOES HERE***** with your form name.
- I have left the thank you page as the default Aweber page. If you want the visitor to be taken to a custom page after they fill in the form, you will need to replace the “http://www.aweber.com/thankyou.htm?m=default” id=”redirect_4af967ba4a112dea2d51284d1bb07ac5″ with your thank you page URL from within the code.
- If you want to change the size of the horizontal form, you may need to also change the size of the form fields. I have them set as size=”20″. Making this number larger will make the fields wider, making it smaller will narrow the boxes.
- If you want a different “subscribe” button. Just replace the image url with your own graphics.
That’s all there is to it. Now you have a nice custom horizontal Aweber opt-in form that you can use on your blog and squeeze pages. If you want to add the code to the bottom of all of your posts you can see the tutorial for that here.