Default Aweber forms are UGLY! They’re fixed-width and non-responsive which is annoying especially when trying to overwrite their CSS.
Thankfully, you can use Twitter Bootstrap’s responsive CSS to change these forms with ease.
You’ll go from this…
To something like this!
If you don’t feel like reading this tutorial, you can go ahead and download the example.
Required Files
In order for your form to look right, you will need to make sure your theme is using these files:
- 1) Twitter Bootstrap CSS
- 2) Aweber Form Code (RAW HTML, Not Javascript Code) – See Below
The Form’s HTML
After you’ve copied your form’s Raw HTML code, paste the code into your favorite text editor (I use TextWrangler). There, you’ll be able to get a good look at what you’re working with.
Now, for the fun part…
Take an axe to the CSS. It’s confusing and it’s making your form ugly. Get rid of it.
You’ll then want to start integrating Bootstrap’s code within your form elements. You should end up with HTML that looks like this…
<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" > <div style="display:none;"> <!-- ADD HIDDEN FIELDS --> </div> <div id="af-form-YOUR-FORM-ID" class="af-form"> <div id="af-body-YOUR-BODY-ID" class="af-body af-standards"> <div class="af-element"> <div class="form-group af-textWrap"> <input id="awf_field-YOUR-FIELD-ID" type="text" name="name" class="form-control text" value="Type your name..." onfocus="if(this.value == 'Type your name...') { this.value = ''; }" onblur="if(this.value == '') { this.value='Type your name...';}" tabindex="500" /> </div> <div class="clear"></div> </div> <div class="af-element"> <div class="form-group af-textWrap"> <input class="form-control text" id="awf_field-YOUR-FIELD-ID" type="text" name="email" value="Enter your e-mail..." tabindex="501" onfocus="if(this.value == 'Enter your e-mail...') { this.value = ''; }" onblur="if (this.value == '') { this.value='Enter your e-mail...';}" tabindex="501" /> </div> <div class="clear"></div> </div> <div class="af-element buttonContainer"> <div class="form-group"> <input name="submit" class="btn btn-primary submit" type="submit" value="Submit" tabindex="502" /> </div> <div class="clear"></div> </div> </div> </div> <div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=YOUR-SPECIFIC-CODE" alt="" /></div> </form>
If you want your form to look similar to my green background one (above), just remember to replace these fields with your own code:
- The form’s hidden input code
- The form’s ID – af-form-987654321
- The form body ID – af-body-987654321
- <div style="display: none;"><img src="ADD YOUR DEFAULT FORM URL HERE" alt="" /></div>
Your Form’s CSS
For this example, we’re going to use Bootstrap’s default CSS. This will make the input fields as wide as their parent container (and responsive too). You can customize the form’s colors and styles if you want.
You will also need to add this code to footer.php, just before the