How to Customise Your Aweber Form for eMail Opt In: 6 Steps 7

Submit KeyThis tutorial shows you how to customise your own Aweber sign up form to attract newsletter subscribers.

Aweber is a very popular email marketing service that manages your email lists for you. I use Aweber myself and can highly recommend their service. If you are not already using this service and would like to check them out for yourself, they still offer a $1 trial for the 1st month.

Why Customise a Sign up Form

Why would you want to customise your own form when Aweber provides so many ready-made sign up forms?

There are actually a number of reasons but the ones that spring to mind most readily include the following:

  • Faster loading pages

    Have you ever looked at the amount of HTML code that you need to paste into your site to display one of the pre-designed form templates? Yes, that’s right, there are lots of lines of code.

    But, you might say, I like to use the one line of JavaScript code that fetches my form from Aweber.

    Yes, this option means less code on your site. However, now your page has to retrieve the form’s code from an external source. In my experience this consequent delay causes the page to jump when it reloads. Not nice.

  • Wording on the Submit button

    If you customise your own form, you can put the message that YOU want on your submit button.

    You might like something a little more friendly and informal on your button than the wording that comes with a pre-set template.

    I have often found a reasonable looking template only to be frustrated by the fixed wording on the button.

  • Smaller Forms
    In some cases, there is quite a lot of empty space between the input boxes (for name and email) and the submit button. If you control the look and feel of your form, you can reduce this extra space significantly.
  • Matching themes
    You might struggle to find a pre-set template that suits your current website theme. If you opt for a customised form, you can choose the colours and fonts to suit.

Taking Control of Your Sign up Form

Well let’s get started on customising your streamlined form.

Step 1: Choose a Basic Aweber From

We will use a trimmed down version of one of the forms that Aweber provides and then customise it to suit.

  • Log in to Aweber.
  • If you already have lists on Aweber, choose the correct list from the Current List dropdown.
  • Click on Sign Up Forms.

    Aweber sign up form
  • Find the Create button

    Create an optin formYou will then see a wide range of templates. But we want the simplest of forms as we will strip out most of the extras so that we can create our own controls.

  • Click Popular >> Modern and  load this template.

    Optin form templates

  • Trim the form like so:
    If you hold your mouse over the form, you will see each different control highlighted and displaying a red cross in the top right hand corner. You can see this in the screenshot below.
    Controls on formDelete each of the controls by clicking on the red cross except for the name, email and button controls. Your form should end up looking like this:

    Name and email sectionsSave your form and Go to Step 2.

Step 2: Complete the Settings for Your Form

You will now be on the Basic Settings Page where you can name your form. This is simply the name that you will see in your dashboard; it won’t appear to your readers. 

I like to use a descriptive name so that I am reminded of this form’s purpose when I look at the list of forms that I have created in my dashboard. For example, you can use a name that tells you where this particular form is to appear (such as your sidebar or below your header).

The next option on that page is the Thank You Page.

Default thank you pageThe Basic Version is the default provided by Aweber. It is a simple message starting with something like: “You’re Almost Done – Activate Your Subscription! ….” 

The Preview button will let you see the wording. I usually just go with the default but you can decide to return to the settings page later on and create your own if you prefer.

I do the same with the Already Subscribed Page; I leave it at the default.

Save your form and Go to Step 3.

Step 3: Get the Sign Up Form Code

Step 3 takes you through to the Publish Page where you can choose who will be installing your form. You will be installing it so choose the 1st option.

Code for form
Now you will be presented with a choice between the raw HTML code or the JavaScript version.

The JavaScript version provides a quick and easy out. However, that would give you the design exactly as you have created it which we intentionally made very, very plain.  And as mentioned earlier in this post, the JavaScript version can cause page-load delays because the code needs to be retrieved from the Aweber site.

Click on the Raw HTML Version.

Now you will see lots and lots of lines of code. We are going to get rid of many of these:

  • At the bottom of the code window you will see:

    Do precisely that, uncheck the box.

    Note: If nothing happens to the code in the box (i.e. you can still see <style type=”text/css”> at the top), then you need to refresh your page and go back into the Publish Page. This time, unchecking the box should work.

    Now all of the styling has been removed from the code. This prunes the lines of code significantly:

    Sign up form code

  •  Copy the code from Aweber and paste it into the code window of a new page (via your HTML editor). We won’t be publishing this page, we are just using it to design how you would like your form to look.

Step 4: Edit the Form Code

The only blocks of code that are needed are shown in the screenshot below.

  • Delete the lines of code in between.
    This would be all of the lines of code beginning with:
    <div id="af-form ........

    down to the lines above:

    <div style="display: none;"><img src= .....

Form code to edit

  • Now we will add code that will display a message followed by the email, name and button controls.

    These new lines of code go in the space indicated by the red arrow, just before the line of code that starts with this:

    <div style="display: none;"><img src ...

    First, add your form message right where the red arrow is pointing, a message such as inviting a subscriber to sign up to get your post updates.

    {your message here } 

    Add the following 3 lines of code under your message.

    <input type="text" name="name">
    <input type="text" name="email">
    <input type="submit" name="submit" value="Sign Up">

Step 5: Add Style to Your Form

Unless you already have styles in your stylesheet for forms, then this sign up form will look very, very bland at this point.

Now it is time to give it some style.

  • Wrap the 3 input lines of code in their own div so that we can apply a class style to how they look.
    <div class="styled-sign-up">
        <input type="text" name="name">
        <input type="text" name="email">
        <input type="submit" name="submit" value="Sign Up">
  • So that the name input box and the email input box line up underneath each other, we need to give each of them their own <div> like so:
    <div class="styled-sign-up">
        <div><input type="text" name="name"></div>
        <div><input type="text" name="email"></div>
        <div><input type="submit" name="submit" value="Sign Up"></div>
  • Now we will give the 1st 2 controls a label and position the button:
<div class="styled-sign-up">
    <div><label for="name">Name:</label><input type="text" name="name"></div>
    <div><label for="email">Email:</label<input type="text" name="email"></div>
    <div style="text-align:center;"><input type="submit" name="submit" value="Sign Up"></div>
  • Save your page (without publishing) and now load the stylesheet via your WordPress dashboard menu:

    Appearance >> Editor >> stylesheet

  • At the bottom of your stylesheet you can add any styles that you like, for each of the controls, if you are familiar with CSS.

    If not, then you can start with the following suggested styles and edit them to suit.

  • In your stylesheet enter a style for the form:
        border: 1px solid #D2C0C0;
        border-radius: 5px;
        width: 260px;
        border-radius: 5px;   
        padding-left: 8px;
        padding-right: 8px;
        background: #E6E6E6;
  • Apply this style by returning to your form page and wrapping all of the form code in a div like so:
<!-- AWeber Web Form Generator #.0 -->
<div class="customisedForm">

<!-- /AWeber Web Form Generator #.0 -->
  • Now we can write the style (in the stylesheet) for the class that we have already assigned to the input boxes:
.styled-sign-up input {
    padding: 5px;
    margin-bottom: 1em;
    width : 150px;
    border-radius: 4px;   
  • And finally the styles for the submit button:
.styled-sign-up input[type="submit"] {
    text-align: center;
    width: 100px;
    color: #fff;
    font-family:Verdana, Geneva, sans-serif;
    font-weight: bold;
    border: 0;
.styled-sign-up input[type="submit"]:hover {
    color: #fff;
    background-color: #004040;  

Save your stylesheet.

Step 6: Position the Form Code

Save your page that contains the form code, again without publishing it. You can preview your form to see how it is looking. 

Copy all of the code between the AWeber comments (including these 2 comments) into your sidebar text widget or to a location of your own choosing.

<!-- AWeber Web Form Generator #.0 -->

<!-- /AWeber Web Form Generator #.0 -->

So, we now have a form that is not bloated with code but one that you can alter to suit. You can edit the styles until you have the colour scheme that you are after.

Styled Aweber Sign Up Form

You can re-locate your form to a different location. Just remember, if you want to have more than one form on your site, always start with another basic form from Aweber, one with a unique name, so that you can retrieve statistics that are relevant for each form.

Have fun redesigning your Sign Up forms.

If you have a customised form that you are happy with, let’s know via the comments.

Thumbnail image courtesy of  Stuart Miles,

Leave a Reply to Leena Shah Cancel reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

7 thoughts on “How to Customise Your Aweber Form for eMail Opt In: 6 Steps