A Ridiculously Helpful Guide to Creating, Styling, and Using Aweber Forms

A Ridiculously Helpful Guide to Creating, Styling, and Using Aweber Forms

I suspect that this will take me a long time to write. So, let’s skip the small talk and get right down to business.

Not a do-it-yourselfer? Here you go.

I’m writing this tutorial at the request of a past client. If you’d like to request a specific tutorial, contact me with the details and we’ll work something out.

Let’s get to it.

This article looks intimidating. It’s so simple, though. Suck it up and walk through it step-by-step with me. I’ll take care of you.

What is Aweber?

Aweber - Email Marketing SerivesAweber is an email marketing service that allows you to capture email addresses (and other information) from your visitors.

Once someone is on your email list, you have the ability to send them emails on the fly (broadcasts), prewritten emails to be distributed in certain time intervals (follow-ups), an RSS feed of your blog content (blog broadcasts), or a combination of them all.

If you have a blog, you should be building an email list… period. And to do that, I would highly suggest using Aweber.

For those who do already, keep reading. Everyone else, go ahead and sign up ($1 for the first month). Then, get back in here. Hurry up.

Creating Forms with Aweber

This isn’t a technical guide explaining every detail of using Aweber. Instead, I’m going to show you exactly what it takes to create forms on Aweber and then bring them to your blog.

We’re not going to use those butt-ugly forms you’ll find on Aweber, though. Instead, we’ll take the important information from the form code and do the rest ourselves.

Making A New Form

First things first, let’s create a new form. To do that, you’d log into your Aweber dashboard (duh), make sure you’re already on the correct list if you have more than one email list, and click on the “Web Forms” tab.

Aweber Web Forms

Once you’re in there, Aweber does a good job of making you think that there’s a million different things you need to do.

If you’re wanting to depend on Aweber to design your forms for you, well, you do have a lot to do. Not us, though. We’re going to breeze through this at record speeds so that we can design our own forms.

The first thing you should see is a list of forms you already have. Beneath that is a bright green button allowing you to create a new form. Click it.

Here’s the fun stuff. At first glance, this is like heaven to a non-coder. Everything is just point and click!

Aweber Web Form Design

Wack! We don’t want that. Let me tell you exactly what you should do on this screen.

Hover over every section that is not “name” (if you’re requesting names), “email,” or “submit” and click the red “X” like a mad man… or angry woman.

You don’t need any of that extra stuff. If you’re collecting names, leave that field there along with the email field and submit button. Everything else can go. (Don’t forget the footer… it’s empty by default).

You’re left with this bad boy:

Aweber Form

It truly is a thing of beauty.

Now that we’re done cutting the fat, let’s move on to the process your visitors will go through as they sign up for your awesome list.

To get there, you’ll want to navigate to your settings tab within the web forms screen.

Aweber Forms

This page has four steps that we need to cover. The first step is to…

Name the form:

Naming the form may not seem like such a big deal at first. But I learned the hard way when I found myself with 20 different forms and didn’t know which was which.

When choosing a name for your form, keep it simple but make it descriptive.

If you are creating a form to go in your Thesis Feature Box only on the homepage (because you followed my guide for having different Feature Box content on different pages) name it something like “feature box home.”

Of course, you want to make sure it’s specific to the Feature Box, but you might also want to indicate that it’s on the homepage. Reason being, you may add an optin form to the Feature Box on your About page later down the line.

This name will be used later on in your code as well. More on that later.

I’ve named my form “SDM Test” for this particular tutorial.

Thank You Page:

Next up is the page your readers will be directed to as soon as they input and submit their information.

By default, they’ll be directed to the Basic Version which Aweber has created for you. Personally, I don’t think there’s anything wrong with it.

It tells your reader exactly what to do and doesn’t waste any time with distractions. Here’s a look (you’ve probably been here before).

Aweber Thank You Page

That’s about as simple as you can get. Nonetheless, you have the option to input your own page, create a video, or record audio to add a little unnecessary spice to the process.

Click through the options to see how they all work if you feel inclined to do so.

Already Subscribed Page:

Next up is the page that readers will see if they try to subscribe to your email list and they happen to already be on it. Old people do that sometimes… like me.

Again, Aweber does a good job of throwing up the warning sign and telling the visitor that they’re barking up the wrong tree. I typically leave mine alone. However, you can take this as an opportunity to create a custom page since the reader is now free to go wherever they’d like.

That’s for another tutorial, though.

By default, the Basic Version will be selected and you can leave it as such.

Save the Form:

Plain and simple, you can’t do anything else until you save the form. This will save everything you’ve done in the Design tab as well as the Settings tab.

Refresh the page! Yes, after you have saved the form and the page automatically refreshes, you need to refresh the page again. I’ll explain why later.

Publish Your Form

Now, we’re ready to move on to the juicy stuff. Move on over to the “Publish” tab. Here’s what we’ll be looking at.

Aweber Form HTML

We’re not going to get into the bottom two options. We’re the web designers here and we definitely don’t want Aweber to host our forms for us. No need for that.

So, select the first option, I Will Install My Form. This is where things get interesting.

The first option you will see is the Javascript Snippet, a single line of Javascript. You can simply paste this Javascript somewhere on your website and the form you created in the Design tab will display as is. We made that form pretty boring, though, so let’s not take that easy route.

Instead, click the Raw HTML Version option on the right. Don’t be alarmed… it’s not as bad as it looks.

The very first thing you need to do is strip this HTML of its style!

Initially, the HTML form is full of CSS classes and IDs that reference the CSS you see at the top of the code. Not only do we want to get rid of that CSS, we need to get rid of the HTML that references that CSS.

To do that, uncheck the checkbox labeled, “Include beautiful form styles. Uncheck to get unformatted basic form.”

Aweber Form Styles

When you uncheck that box, all of the fluff will disappear immediately. You’ll be left with nothing but the HTML needed for the form.

If you unchecked the box and nothing happened, it’s because you didn’t do what I said to do here. Can I explain this quirky Aweber behavior? Nope. But I know how to sift through it. Refresh the page and try again.

Here’s what your HTML will look like.

<!-- AWeber Web Form Generator 3.0 -->

<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl"  >
    <div style="display: none;">
        <input type="hidden" name="meta_web_form_id" value="1096452921" />
        <input type="hidden" name="meta_split_id" value="" />
        <input type="hidden" name="listname" value="sdavismedia" />
        <input type="hidden" name="redirect" value="http://www.sdavismedia.com/thank-you/" id="redirect_415ef0bb9e00aacc4071248681a70600" />
        <input type="hidden" name="meta_redirect_onlist" value="http://www.sdavismedia.com/already-subscribed/" />
        <input type="hidden" name="meta_adtracking" value="SDM_Test" />
        <input type="hidden" name="meta_message" value="1" />
        <input type="hidden" name="meta_required" value="name,email" />
        <input type="hidden" name="meta_tooltip" value="" />
    </div>
    <div id="af-form-1096452921" class="af-form">
        <div id="af-body-1096452921"  class="af-body af-standards">
            <div class="af-element">
                <label class="previewLabel" for="awf_field-35192102">Name: </label>
                <div class="af-textWrap">
                    <input id="awf_field-35192102" type="text" name="name" class="text" value=""  tabindex="500" />
                </div>
                <div class="af-clear"></div>
            </div>
            <div class="af-element">
                <label class="previewLabel" for="awf_field-35192103">Email: </label>
                <div class="af-textWrap">
                    <input class="text" id="awf_field-35192103" type="text" name="email" value="" tabindex="501"  />
                </div>
                <div class="af-clear"></div>
            </div>
            <div class="af-element buttonContainer">
                <input name="submit" class="submit" type="submit" value="Submit" tabindex="502" />
                <div class="af-clear"></div>
            </div>
        </div>
    </div>
    <div style="display: none;">
        <img src="http://forms.aweber.com/form/displays.htm?id=jAycbCysTJxMjA==" alt="" />
    </div>
</form>

<!-- /AWeber Web Form Generator 3.0 -->

Not too bad, right?

Let’s take a look at this code and see what we really need.

If you notice, the top chunk of the code is littered with HTML <input> elements that all have a type attribute of hidden.

These input elements are what carry the important details of your form. When you created the settings for your form, named it, etc., all of that information was packed into these hidden elements.

So, really, the opening and closing <form> tags and the hidden <input> elements are all that need to be left untouched.

<!-- AWeber Web Form Generator 3.0 -->

<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl"  >
    <div style="display: none;">
        <input type="hidden" name="meta_web_form_id" value="1096452921" />
        <input type="hidden" name="meta_split_id" value="" />
        <input type="hidden" name="listname" value="sdavismedia" />
        <input type="hidden" name="redirect" value="http://www.sdavismedia.com/thank-you/" id="redirect_415ef0bb9e00aacc4071248681a70600" />
        <input type="hidden" name="meta_redirect_onlist" value="http://www.sdavismedia.com/already-subscribed/" />
        <input type="hidden" name="meta_adtracking" value="SDM_Test" />
        <input type="hidden" name="meta_message" value="1" />
        <input type="hidden" name="meta_required" value="name,email" />
        <input type="hidden" name="meta_tooltip" value="" />
    </div>
        <!-- Start Visible Input Fields -->

        <!-- End Visible Input Fields -->
    <div style="display: none;">
        <img src="http://forms.aweber.com/form/displays.htm?id=jAycbCysTJxMjA==" alt="" />
    </div>
</form>

<!-- /AWeber Web Form Generator 3.0 -->

Take note that the <img> tag near the end of the code is used for tracking purposes. It’s best to leave it in place along with its wrapping <div>.

If you look closely at those input elements, you’ll see familiar things like the Thank You Page URL, the Form Name (SDM_Test), and even the two required input fields, name and email.

Now, we have the freedom to play around with our visible input fields… which we will create shortly.

We’ll be working in the area I’ve created between the start and end comments.

I understand that most folks who don’t know how to write HTML can still pick their way through the HTML code anyway. However, forms are always the hardest thing to grasp. That’s why I’m breaking this down so much.

At this point, we need three input elements to complete the form (only two if you don’t require a name). These input elements are for the name field, email address field, and submit button (the submit button is an input element).

For the name and email fields, they will follow the same basic format. They’ll both need a type attribute with a value of text to make them text fields. Also, they both need a name attribute with a value of name and email respectively.

<input type="text" name="name">
<input type="text" name="email">

I am well aware of the option to use email as the value for the type attribute. However, it’s not required and we’re not hurting anyone. :P

At this point, we have two text fields but no submit button. So, let’s create that.

For the submit button, it’ll need to have a type attribute of submit, a name attribute of submit, and a value attribute of subscribe (or whatever you want your button to say).

<input type="submit" name="submit" value="Subscribe">

These three elements are all we need to make the form display on the front end. Notice how much more slim this code is than before.

Pasting those three elements in place will result in the following form.

<!-- AWeber Web Form Generator 3.0 -->

<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl"  >
    <div style="display: none;">
        <input type="hidden" name="meta_web_form_id" value="1096452921" />
        <input type="hidden" name="meta_split_id" value="" />
        <input type="hidden" name="listname" value="sdavismedia" />
        <input type="hidden" name="redirect" value="http://www.sdavismedia.com/thank-you/" id="redirect_415ef0bb9e00aacc4071248681a70600" />
        <input type="hidden" name="meta_redirect_onlist" value="http://www.sdavismedia.com/already-subscribed/" />
        <input type="hidden" name="meta_adtracking" value="SDM_Test" />
        <input type="hidden" name="meta_message" value="1" />
        <input type="hidden" name="meta_required" value="name,email" />
        <input type="hidden" name="meta_tooltip" value="" />
    </div>
        <!-- Start Visible Input Fields -->

<input type="text" name="name">
<input type="text" name="email">
<input type="submit" name="submit" value="Subscribe">

        <!-- End Visible Input Fields -->
    <div style="display: none;">
        <img src="http://forms.aweber.com/form/displays.htm?id=jAycbCysTJxMjA==" alt="" />
    </div>
</form>

<!-- /AWeber Web Form Generator 3.0 -->

At this point, your form is still totally bare. The only way it could have style at this point is if your CSS has already specified styling for form elements. Otherwise, it’s plain Jane.

Optin Agent - Optin Form Designs and Templates for Aweber and MailChimpKolakube skins come with form styles built into the design. So, if you’re using one of those, you’re done!

Also, I’ve created another way for you to have great looking optin forms. It’s called Optin Agent and it has the coolest little guy for a logo ever.

Otherwise, it’s time to have some fun. To prepare for what we’re going to do, we need to add a <div> around those three elements (as a group) so we can target them later on with some CSS. We’ll give this div a class attribute of optin_form.

<div class="optin_form">
    <input type="text" name="name">
    <input type="text" name="email">
    <input type="submit" name="submit" value="Subscribe">
</div>

Now, let’s get down to business.

Styling Your Form

The first style issue we need to consider is the layout of the form. As of now, our three form elements are horizontally aligned like regular text. And when they run out of room, they break to the next line.

Take a look at the form I use all over this site for an idea of what I mean.

Notice the submit button follows right after the input field.

However, this is only happens because we’ve lined our input elements one after another. HTML doesn’t recognize line breaks. So, in our HTML code, three input elements stacked on top of each other is no different than three input elements lined up side by side by side.

The WordPress 3.4 update changed a few things about how the Visual/HTML editor works! In order for the following code to do what I say it’s supposed to do, you’ll want to understand these changes and their fix. I wrote all about it so open it up in another tab as you continue.

To visually stack the input fields and submit button, each one of them can be wrapped in <div> tags. By default, divs stack on top of each other.

Therefore, using this HTML…

<div class="optin_form">
    <div><input type="text" name="name"></div>
    <div><input type="text" name="email"></div>
    <div><input type="submit" name="submit" value="Subscribe"></div>
</div>

…will result in a vertically stacked optin form. It will resemble the form in my sidebar (no name required in that one).

Handling the layout is the first step to styling your form. Next, we can start playing with the input fields and buttons.

If you’ve used Thesis for more than 2 minutes, chances are you’ve noticed those ugly ass form styles. The input fields are boxy and the submit button looks ancient. We can get rid of that, though, with a little simple CSS.

The first thing we’ll target is the common text field.

Remember that div we wrapped around all three input elements with a class of optin_form? Well, that’s about to come in handy.

To see all of the changes we’re making, considering making a new page on your blog and pasting your form into the HTML editor. Don’t worry, only internet ninjas will be able to see the page.

This post was written for Thesis 1.x. You can find Thesis 2 here.

In your custom.css file (Dashboard => Thesis => Custom File Editor), let’s target all input fields (remember, this includes the button) and give them some padding (space between the text and the border), a bottom margin (space between the bottom of the element and the element beneath it), and a border radius (rounded corners).

If you’re using Thesis 2, see my comment about adjusting the CSS to use in your Custom CSS panel.

.custom .optin_form input {
    padding: 10px;
    margin-bottom: 1em;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

That CSS targets both the text fields as well as the submit button. Targeting them together allows for basic uniformity in the properties that they will both share. It also allows us to keep from writing the same code twice, which would make our stylesheets (CSS files) longer and causes the pages to load slower.

If you’re using a pretty plain Thesis install, your form should look something like this now.

Aweber Form

Now, let’s play with the two text fields and get them looking spiffy.

To do that, we’ll use the following CSS rule to give them a white background, a text color, and a light gray border. Add this to your custom.css file beneath the last CSS rule I gave you:

.optin_form input[type="text"] {
    background: #fff;
    color: #666;
    border: 1px solid #c8c8c8;
}

At this point, you may be wondering why we care so much to change the text color for the input field when there’s no text in there to begin with.

That’s a legitimate concern. So, let’s add a little trickery to our text field.

The text color that I had you set in your CSS is for when your visitor is actually typing into the text field. However, we’re going to use a pretty cool method to place default text in your form fields that will automatically disappear when the visitor starts typing.

I didn’t include this HTML attribute on the input fields earlier because we needed to stick with the basics. Let’s have some fun now, though.

Go back to your HTML form so we can add a new attribute with values to the text fields.

value:

What we have to do is add the placeholder attribute. For input fields, this specifies the content that will be in the field by default. We’ve already used it for the submit button. Now, lets add it to our text fields.

<div class="optin_form">
    <div><input type="text" name="name" placeholder="Enter Your Name..."></div>
    <div><input type="text" name="email" placeholder="Enter Your Email..."></div>
    <div><input type="submit" name="submit" value="Subscribe"></div>
</div>

Here are the results.

Aweber Form

Now, we’re in business. To just the fields that will accept user input, we added the placeholder attribute with values of “Enter Your Name…” and “Enter Your Email…” respectively.

We did not replace the submit button’s default text attribute and value, though. It must remain as value=”Button Text” as it is slightly different than the text fields.

Now, when you click into the text fields and start typing, the text will disappear making room for your name or email address. Cool beans.

It’s time to move on to the submit button, though. That thing is still suffering.

We’re going to give it a nice gradient background, color the text white, remove the default border, and give the text a drop shadow.

Before displaying the CSS, let me explain something about the gradient background CSS. It looks super-freakin’-complicated. But it’s not. Here’s the website that I use to create my gradient buttons.

CSS Gradient Background Maker

Aweber Form ButtonsYou can create whatever color gradients you want. All you have to do is select the two colors you want to use on your button (see the image on the right). If you’d like the button to change from red to dark red, top to bottom, you’d choose a shade of red in the first field and a darker shade of red in the second field.

Once you have chosen your colors, you will aslo have to choose where the gradient starts and stops. I would suggest selecting top to bottom as it gives the buttons a slick look. And we all know… slick is good.

Aweber Form Buttons

Once you’ve made these selections, there’s a gift for you at the bottom of the screen.

The CSS is written for you! However, it’s packed full of comment explanations and it is not properly formatted for use just yet. Let’s do that really quick.

Here’s what you should see.

/* IE10 */
background-image: -ms-linear-gradient(top, #EB0000 0%, #B00202 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #EB0000 0%, #B00202 100%);

/* Opera */
background-image: -o-linear-gradient(top, #EB0000 0%, #B00202 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EB0000), color-stop(1, #B00202));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #EB0000 0%, #B00202 100%);

/* Proposed W3C Markup */
background-image: linear-gradient(top, #EB0000 0%, #B00202 100%);

First of all,  as I stated earlier, I want to keep my CSS as short as possible. With that being said, I don’t design websites for the Opera Browser or Internet Explorer. So, I tend to remove those lines (and corresponding comments) from the above CSS.

Secondly, I do not like to include comments inside of my CSS rules. So, I will delete all of the other lines starting with “/*” to clean up my CSS rules.

Comments are allowed inside of CSS rules. I just think it’s too busy and hard to read. I place my comments before each chunk of CSS for clarity.

Lastly, the background-image property is not necessary to implement the background style. Instead, I like to use shorthand CSS and change the property to just background.

When all is said and done, here’s my gradient CSS (which is not ready for the custom.css file just yet).

background: -moz-linear-gradient(top, #EB0000 0%, #B00202 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EB0000), color-stop(1, #B00202));
background: -webkit-linear-gradient(top, #EB0000 0%, #B00202 100%);
background: linear-gradient(top, #EB0000 0%, #B00202 100%);

Now, we can get back on course.

If you’re still with me, we’re planning  to style the submit button by adding a gradient background, coloring the text white, removing the default border, and giving the text a drop shadow.

Here’s the entire block of CSS to do just that.

.optin_form input[type="submit"] {
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
    border: 0;
    background: -moz-linear-gradient(top, #EB0000 0%, #B00202 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EB0000), color-stop(1, #B00202));
    background: -webkit-linear-gradient(top, #EB0000 0%, #B00202 100%);
    background: linear-gradient(top, #EB0000 0%, #B00202 100%);
}

Now, our form is almost done. This is what it should look like right now.

Aweber Forms

The only thing we have left to do give the button a hover effect. As of now, there is no difference between the button itself and what it looks like when you hover over it with your cursor.

This part is fairly simple. We’ll add another CSS rule to override the original background gradient.

.optin_form input[type="submit"]:hover {
    background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);
    background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae));
    background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%)
}

If you notice, those CSS properties and values are just like the background gradients we added before. The only difference is the two colors chosen for the gradient.

Too easy, right?

We’re done making forms! If that’s all you wanted to know how to do, you’re good to go now. Just make adjustments on each step to fit your needs for each individual form.

For more helpful tutorials, be sure to sign up for my email list.

Adding Your Aweber Form Around Thesis

Now, let’s get this new form added to our Thesis site.

Some time ago, Derek Halpern of SocialTriggers.com wrote a great article about the three places where your optin forms should always be on your blog. Funny thing is, when I look at the performance of my many optin forms, these three locations always have the most submissions.

The first area he listed was the About page. It’s almost the always the first place people stop when they land on your site.

Placing a form on your About page is simple. All you have to do is paste the HTML form we created into your page. You must use the HTML tab on the editor, though.

Aweber Forms

There’s one adjustment we should make before publishing. Remember when I explained that the divs stack vertically by default?

Well, we probably don’t want that in our content column. Instead, let’s line all of the input elements up horizontally.

To do this, remove the divs from around the input elements. You’d be left with this.

<div class="optin_form">
    <input type="text" name="name" placeholder="Enter Your Name...">
    <input type="text" name="email" placeholder="Enter Your Email...">
    <input type="submit" name="submit" value="Subscribe">
</div>

Here’s what it would look like on your page. (Don’t forget the rest of the code.)

Aweber Optin Form About PageToo easy, right? Just remember to create a new form in Aweber for this. It’s not absolutely necessary, however, it’s much smarter to track the performance of your forms by giving each area its own special form to use.

Let’s move on.

The second location Derek mention was the post footer. You know, the very end of your article but before the comments section.

This is a great place to put an optin form because a reader who makes it that far down the page is probably pretty into your work. Why not give them a call to action at this perfect moment?

We’ll use a little bit of PHP to handle this one.

Add this to your custom_functions.php file:

// SINGLE POST FOOTER
function single_post_footer() { if(is_single()) { ?>
	<!-- Start HTML for the single post footer -->

        <!-- End HTML for the single post footer -->
<?php } }
add_action('thesis_hook_after_post', 'single_post_footer');

As you can see, there is an empty area for you to put in your HTML content. Guess what that HTML content would be?

If you guessed your optin form, you’re a freakin’ genius.

You would use the same format that we used for the About page since they will be in the same width column most of the time.

Your complete code would look similar to this:

// SINGLE POST FOOTER
function single_post_footer() { if(is_single()) { ?>
	<!-- Start HTML for the single post footer -->
<!-- AWeber Web Form Generator 3.0 -->
<h3>Enjoy this article? Get Free Updates.</h3>
<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" &nbsp;>
    <div style="display: none;">
        <input type="hidden" name="meta_web_form_id" value="1096452921" />
        <input type="hidden" name="meta_split_id" value="" />
        <input type="hidden" name="listname" value="sdavismedia" />
        <input type="hidden" name="redirect" value="http://www.sdavismedia.com/thank-you/" id="redirect_415ef0bb9e00aacc4071248681a70600" />
        <input type="hidden" name="meta_redirect_onlist" value="http://www.sdavismedia.com/already-subscribed/" />
        <input type="hidden" name="meta_adtracking" value="SDM_Test" />
        <input type="hidden" name="meta_message" value="1" />
        <input type="hidden" name="meta_required" value="name,email" />
        <input type="hidden" name="meta_tooltip" value="" />
    </div>
    <!-- Start Visible Input Fields -->

<div class="optin_form">
    <input type="text" name="name" placeholder="Enter Your Name...">
    <input type="text" name="email" placeholder="Enter Your Email...">
    <input type="submit" name="submit" value="Subscribe">
</div>

    <!-- End Visible Input Fields -->
    <div style="display: none;">
        <img src="http://forms.aweber.com/form/displays.htm?id=jAycbCysTJxMjA==" alt="" />
    </div>
</form>
<!-- /AWeber Web Form Generator 3.0 -->
        <!-- End HTML for the single post footer -->
<?php } }
add_action('thesis_hook_after_post', 'single_post_footer');

With that pasted into your custom_functions.php file, you now have a post footer to capture emails after someone has read your post.

You may have also noticed that I added an H3 headline to the form to add a little touch. No big deal.

Lastly, we want to have an optin form in our sidebar. 

This is nothing new. Hopefully, you haven’t dismissed this location as being extremely effective.

Plain and simple, create a new text widget in your sidebar. In the field for your widget content, simply paste your optin form HTML and save the widget.

Again, though, your need to have the input elements vertically stacked for them to fit into the sidebar.

Placing divs around each of your visible input elements will do the trick. At this point, I’m sure that we don’t need to go into detail about how to do that! If so, I’ve wasted about 5 hours. :P

The Rest Is Up To You

Ladies and gentlemen, I couldn’t possibly give you every style example for your form that CSS is capable of. Likewise, I can’t suggest every area of your site that would gladly welcome your optin form with open arms.

At this point, you have to get creative. Use sites like w3schools.com to learn more about CSS.

And check out the Thesis Manual for tips on using hooks to place your form in other locations.

If you would like to get crazy with it, but you don’t want to do the heavy lifting, you can hire me to do it for you. Or, if you just want to pick my brain for a while, we can do some 1-on-1 consulting.

Cheers :)

113 Comments:
  1. Sean this is one of the best articles I’ve read on the internet.

    Simple, easy to follow and just brilliant.

    Nice job man!!!

    I’ll implement this stuff on my “About Me” page, can’t wait :)

    • “Sean this is one of the best articles I’ve read on the internet.” <= That had me grinning from ear to ear lol. 

      Thanks, man! I'm glad it's what you were looking for with your request. When I started to write it, I knew it would take a little while but not as long as it did. I didn't want to take any shortcuts, though. I'm glad that I didn't.

      Do me a favor and keep making requests when you feel the need to do so. If it's something actionable that I can write about, I definitely will.

      And you know where to find me if you have any issues implementing what you read here! Thanks again.

      Sean

      • Awesome stuff!

        I already have a new idea for you … will let you know tomorrow probably :)

        Just actionable stuff.

  2. Sean,

    Finally someone created an fantastic tutorial on styling aweber web forms.

    Excellent stuff, dude. Keep up the rocking work.

    -Dev

    • Hey, thanks a lot, man. I still feel like I could have gone into more detail but I definitely didn’t want to lose people in the process.

      Soon, I plan to create a follow up post that gives a few different form designs that people can use instead of the simple look I gave.

      Thanks again for reading!

      Be sure to let me know if there are any other tutorials you’d like to see here.

  3. Awesome tutorial dude :)

    I want to know can I replace aweber subscription form with any feedburner form ??

     

    • Thanks, man!

      Well I don’t think there has to be any replacing going on. But if you are wanting to style a Feedburner form, yes that is possible as long as you can get the raw HTML for the form.

  4. I am still in a dilemma to choose between Aweber & MailChimp.. I am running on low budget now and the 2000 free users is tempting me to choose MailChimp.. what is your final suggestion..?

    • I use Aweber so I will always suggest them. I understand that you’re running on a budget but we’re all here to make money. So, you should always be in the mindset that whatever you purchase will be paid for by your efforts afterwards anyway! That’s how I like to think, at least.

      I have never used MailChimp but a lot of people that I trust choose Aweber over MailChimp as well. And as of now, I see exactly why. 

  5. Many people have written about creating and styling Aweber form, but I haven’t seen such an awesome and detailed tutorial like this :)

    Simple, Pratical and Effective

    Thank you Sean :)

    • You know, sometimes I keep from writing stuff because I’m always so sure that someone has done it already. But I really like to go into detail with stuff… even if it takes me 4500 words. :P I think I will do this more often to help as many people as possible!

      Thanks for checking it out and please let me know if you need help with anything.

  6. The opt-in form looks great :) I have never read such a detailed tutorial like this. However, it’s sad that you make it for Thesis only. Is there any way to integrate with Genesis too?

    • Hey, Robert. I see no reason why this tutorial can’t be used for Genesis as well. There will only be minor changes.

      In the CSS I give, anywhere you see “.custom” you’d want to omit that as that’s a body class added to Thesis sites. And once you get down to the Single Post Footer PHP, obviously that would change a bit as that PHP is written specifically for Thesis.

      As for the forms, though, this tutorial isn’t specific to Thesis in that aspect. :)

      Thanks a lot for reading and for your kind words. If you need help getting your form to display on Genesis, I may be able to help. I’m a Genesis customer as well. I just don’t use it heavily. I’m always available for help!

  7. Thank you so much for this detailed guide.  There’s nothing more annoying than a guide that takes you halfway there and you’re left trying to figure out how the pieces go together.

    I have a question that’s about your email form but not about the process of putting it together it’s about its use.

    You said that: “Once someone is on your email list, you have the ability to send them emails on the fly (broadcasts), [...] an RSS feed of your blog content (blog broadcasts), or a combination of them all.”

    To clarify: with Aweber someone can sign up (on this site ”Get Free Updates” in the left sidebar) once and get both all the blog posts sent by email AND broadcasts?    

    I’m asking this because currently on our site we have two forms one to sign up for blog posts (run by FeedBurner) and one where once you sign up you get a free report and then you get sent broadcasts (run by 1ShoppingCart) and I think two forms is just too confusing.

    • Outstanding question, Yael.

      What I actually meant there is that you have the ability to send broadcasts, or blog broadcasts through your Aweber admin panel IF YOU’D LIKE TO.

      Feedburner is an RSS feed service. If you want someone on your Feedburner, they have to sign up for your Feedburner. If someone opts into your Aweber email list, they don’t actually have the option to pick what they get. But YOU have the option to give them random emails (broadcasts) or a constant feed (blog broadcasts).

      I also have two… Aweber and Feedburner. But I only use a form for Aweber. You can see that here. http://www.sdavismedia.com/subscribe/

      Any I don’t give my readers the blgo broadcasts on my Aweber account.

      Hope that helps and thanks for reading!!!

      • I’m confused by what you mean by “Any I don’t give my readers the blgo broadcasts on my Aweber account.”

        By entering my email into your ”Get Free Updates” in the left sidebar form, what will I receive in my inbox?

        • “Blog Broadcast” is an actual feature in Aweber. It’s an automatic broadcast of your blog content to your email list. Every time you write a new blog post and publish it, your Aweber email list will receive an email linking to that blog post.

          But that’s an option. With Aweber, you can actually have people on your email list and send them nothing. You can create “Follow Ups” which are prewritten emails scheduled to go out based on a time you select (day 1, 7 days later, etc.). You can create “Broadcast” which is when you log into Aweber and write an email on the spot and send it out to your list. And you can set up the “Blog Broadcast” which automatically sends all of your readers an email every time you publish a new post.

          So, when I said I don’t give my readers the blog broadcast, I’m saying that they don’t receive an email every time I publish. They don’t receive an email unless I go in there and write one (Broadcast).

          If you signed up to my email list, after you confirmed your email address, you would immediately receive my welcome email. That email is a “Follow Up.” After that, you will receive NOTHING unless I go in there and create a broadcast. That’s why I said that I don’t give my readers the blog broadcast. Meaning they don’t get emailed just because I published a post.

  8. “Blog Broadcast” is an actual feature in Aweber. It’s an automatic broadcast of your blog content to your email list. Every time you write a new blog post and publish it, your Aweber email list will receive an email linking to that blog post.

    But that’s an option. With Aweber, you can actually have people on your email list and send them nothing. You can create “Follow Ups” which are prewritten emails scheduled to go out based on a time you select (day 1, 7 days later, etc.). You can create “Broadcast” which is when you log into Aweber and write an email on the spot and send it out to your list. And you can set up the “Blog Broadcast” which automatically sends all of your readers an email every time you publish a new post.

    So, when I said I don’t give my readers the blog broadcast, I’m saying that they don’t receive an email every time I publish. They don’t receive an email unless I go in there and write one (Broadcast).

    If you signed up to my email list, after you confirmed your email address, you would immediately receive my welcome email. That email is a “Follow Up.” After that, you will receive NOTHING unless I go in there and create a broadcast. That’s why I said that I don’t give my readers the blog broadcast. Meaning they don’t get emailed just because I published a post.

  9. Thanks so much for this helpful post. I am confused about where to put the html code. I currently have the feature box setup with the 1 line of javascript. Do I replace the javascript with the html code in custom_functions?

    • Hey, Wendy.

      You will need to go back to Aweber and get the HTML version of your form as shown here: http://www.sdavismedia.com/style-aweber-forms/#refresh

      Once you have that, you would simply paste the HTML in place of anywhere you’ve placed the javascript.

      If your feature box code is written in your custom_functions.php file with the javascript included, you would replace just that javascript with the HTML code.

      Replace:
      < -script type="text/javascript" src="http://forms.aweber.com/form/xx/xxxxxxx.js">

      ...with the HTML. (I purposely altered the code above so it would be invalid javascript and show in the comment.) PLEASE be careful, though. Follow my directions closely ( http://www.sdavismedia.com/style-aweber-forms/#refresh ) in the article in order to remove all of the styling from the form before pasting it into your custom_functions.php file. If you don't do exactly what I say there, you could end up pasting code into your custom_functions.php file that crashes your site.

  10. You … are … a … genius! :D

    I thought the title was funny and thought of checking it out – wasn’t even expecting all this much info!

    Thanks a lot! Liked and shared!

    • Thanks, Bruno! Well… isn’t it ridiculously helpful? :P

      Glad you found it useful and thanks a ton for sharing!

  11. He’s at it again!

    Good stuff Sean. I am actually in the process of making an Aweber form style tutorial using the javascript code (gotta love alternatives, right?)

    Quick clarification, if you wrap all your Aweber forms in the optin_form class they will all maintain the same styling from the CSS properties, correct?

    If you have more than one form on your blog or use more than one form you need to make that class specific to the form.

    You agree?

    Thanks again…

    • Yo! Thanks for reading, man. Alternatives helps us all grow. Most definitely.

      You can wrap all of your forms in a div with the class “optin_form” if you intend for all of them to have the same styling.

      The reason why I suggested that is because the CSS selectors I use, like input[type="text"], can apply to not only name and email input fields in your forms, but also the name, email, and url fields on a contact form. Or the name, email, and url fields on a contact form. So if you don’t want those styled exactly like your optin forms, you’ll want to find a way to set them apart.

      I feel like it’s easier and simpler to wrap the optin form input elements in their own div with a class than to specify (with CSS selectors) the input elements of the form in the sidebar…. and the input elements of the form in the post footer… and the input elements of the form on the subscribe page… etc. You know?

      When I wrap them it in “optin_form”, it allows me to target all of my optin forms without disrupting all of my other forms or having to target each optin form specifically.

      So no… you can wrap all of your forms with the same “optin_form” class and target them all with one CSS selector. No need to have a different class for each div holding a form.

      Is this what you’re asking?

      • Yeah kinda, but you answered my question anyway, lol.

        On my site I style my widget subscribe button different than the in-post subscribe button. I have to use a div class like “optin_form_widget” to achieve the different look but same Aweber form going to the same list as my in-post form.

        Thanks tho!

        I’ll drop you a line when I complete my javascript version of this tutorial.

        • I hear you!

          What I would actually do is still use “optin_form” as the containing div class. Assuming (based on what you said) the button is the only thing that is changing in the sidebar, ALL forms can take style from the “optin_form” CSS but then, you can add one more chunk of CSS specifically for the sidebar optin and tweak only the properties for the button:

          #widget_optin .optin_form input[type="submit"] {
          background: …blah blah…
          }

          That way you don’t have to confuse yourself with which variation of the “optin_form” div class applies to what… and the forms, altogether, have a more unified structure.

          With that set up, you could even copy form code from a sidebar widget and place it into a post and it would take the styling of the content as opposed to the sidebar, you know?

          Million ways to skin a cat but I always like to go with the way that takes the least amount of code, easiest for someone else to read, and best for future HTML additions using the same CSS.

          Let me know when you’ve created it!

  12. This is an incredibly thorough- but very clear tutorial.

    I was actually trying to decipher the code I found on a site (trying to learn a little HTML and CSS so I can design my own site), and found this tutorial. I’m hooked!

    • Awesome! I’m glad you found it useful, Rachel. It seems as if many people have trouble understanding the code from Aweber and I don’t blame them. It’s too much!

      Only just a little bit of it is important, though. Hopefully this article could shed some light on that. Let me know if you have any questions!

      Thanks for reading. :)

  13. Just wondering if you could help me decipher this…
    The site that I was looking at I had the same code that you did, but instead of what you have for the div class optin form, they had this:

    /div>

    They actually have just an e-mail box, and submit button. And the text in the e-mail box disappears, even though they don’t have the code that you put there to fade it.

    I was also wondering where they got the two numbers (awf_field and the img src link) from.

    Thanks!

    By the way, the site is called paidtoexist.com

    • Okay, I feel kind of silly.

      I read the tutorial, but hadn’t yet gone through it; I know now what the numbers mean :).
      But still wondering about the code for the name/e-mail fields.

      Thanks!

      • That’s a valid question, Rachel. Since I wrote this article, I actually learned a new tactic and I think it’s about time I updated that.

        But I can tell you right there.

        You no longer need to use onfocus and onblur.

        Now, in your text input elements, you can use “placeholder” instead of “value.” Whatever you set equal to placeholder will be in the input field and disappear when you start typing.

        placeholder=”Enter Your Name…”

        I think I will get that updated today! So just to be clear, you no longer need onblur, onfocus, or value (except for the submit button).

        Thanks for the great question!

  14. Sean, just wanted to say that I’m a researcher by profession. And after spending numerous hours trying to find a solid tutorial about styling aweber forms–I finally came across your post. You explained some of the difficult concepts succinctly, and provided easy to follow graphic examples to illustrate important points. Well done:-)

    • Words like that put a huge smile on my face. Thanks a TON for those words and for reading my article. I’m glad I was able to explain the process thoroughly. :)

      • Lynn is right. I went through several pages on Google and none of them were as good as this.

        Why not consider making a guest post on this for DIY themes?

        • Thanks, Rachel! I definitely have plans to write for DIY Themes in the future. I’ve been pretty selfish with my content in the past and I wanted all of the best stuff on my own site. I’m a little more wise now, though. Look out for me in the coming months to submit work to DIY Themes. :)

  15. Hey Sean! The tutorial worked very well. The only snag I hit was that when I took the individual line ‘s off of the Name/Email/Submit code it still stacked!

    I had to actually ‘unstack’ the code lines in the HTML editor and just put a space in between the lines so that they would show up side-by-side in the post (for the About page/bottom of posts). Otherwise everything worked out!

    • Since WordPress 3.4, there have been some really strange things going on. What makes it worse is that it’s not the same for everyone.

      Glad you got it all working right, though! Thanks for reading, Liv!

  16. Hi Sean!

    I finally got around to putting this on my site. It worked like a charm.

    Just have one question: is there any way to make the e-mail field and the submit buttons larger? They are pretty tiny for my site.

    Thanks!

    • Sure thing. There are a few different ways this can be done depending on WHY they are small in the first place.

      I gave some CSS starting with this in the article:

      .custom .optin_form input

      In that chunk of CSS, you can increase the size of the font with by putting this in and adjusting the value:

      font-size: 1.2em;

      Or you can increase the padding inside of the input elements by going to the very same block of CSS and changing:

      padding: 10px;

      To something like 13px or you can even play with em values like 1.4em.

      Try that out and let me know if that’s what you’re looking for.

  17. Thanks- it is absolutely stunning, if I may say so myself :).

    One last thing: How do I center the submit button under the “enter your e-mail button?” That’s the last thing I have to do and then I am done! Hopefully I’ll be able to move it from my localserver tonight.

    P.S.

    I did change the colors on the hover effect to green, since that is supposed to convert the best. For anyone else who is interested, you just replace the colors in the “hover” command: 1st color: 3C962E
    2nd color: 2D7023.

    • There are a couple of different ways that can be done and it would probably be best if I could see your exact setup to tell you how you should do it. Once you get it live, shoot me a link and it shouldn’t take long at all.

  18. Thanks Sean, I figutred it out. This is what I added:

    float: none;
    display: block;
    margin-left:45%;

  19. Great blog, I really dig your writing style and clear, simple way of explaining things.

    How do you get the heights of the input boxes to be nice and fat like that??

    Here’s my code that doesn’t work:

    This didn’t work either:

    Although this last one works inside of Dreamweaver; just not when I preview in Chrome.

    btw, this is what I have so far for my AWeber form. Quite proud, since I aint a programmer. : P

  20. Oh wait! I see you explained it up there! Got it to work with the padding attribute! Thanks! (it’s ok if you don’t publish these as they won’t help the conversation)

    • Hey sorry for my delayed response! As soon as I went to check my email, this second comment came through. Looks like you got it taken care of!

      Padding is exactly what I would have suggested so good stuff there. It looks like you attempted to paste some code in the first comment which isn’t permitted… so it didn’t show up.

      Anyway, glad you’re good to go and thank you for the kind words!

  21. Thanks again Sean. So far so good, except the form inputs won’t center inside of my WP sidebar Widget like it does on my local computer. Going nuts here. It seems to be aligning Left instead of Centered like I want it.

    http://10in30.com/

    A pic of the form being centered (sortof) locally:
    http://10in30.com/?attachment_id=3015

    How do I center the form inputs??

    • Oh wow… that form is inside of a table. In this article, I teach how to strip your Aweber form of all of that extra stuff so as to give you more freedom to customize. Yours seems to still be flooded with Aweber code (unless you put the form in a table yourself).

      The table itself is littered with inline CSS and HTML that designs the form… which is bad practice. The form should be pure HTML and it should be styled with CSS. The way it’s done up now is the outdated way of doing things and should be avoided.

      If you can strip the form down the way I described in this article, CSS can be used to make it look the exact way you want it to look. As of now, though, there’s way too much inline CSS and HTML styling elements to try to override with CSS.

  22. woohoo, ok I took out all of the crap, went with only divs and voila! http://10in30.com/ The form overlapping off the widget is on purpose, btw.

    I had originally done it with a table and all that before I had found this article. Then when it didn’t align right, I began searching and found this. So thanks again for this amazing article. I’ll tweet it!

    • NICE! I see you got it looking good in there. So glad the article could help, man. Let me know if you have anymore questions and thanks a TON for reading!

  23. Hey Sean, WordPress is removing the placeholder text in the page editor once I get out of html and into the wyswyg editor. Happens only in my page and popup forms but it’s fine in the sidebar widget (uses text widget).

    How did you get the placeholder text to stay in the form in the body of your page?

    I found this fix but before I even begin to look into it, I thought I’d check if you have a simpler way. http://tinyurl.com/9nwqkzl

  24. Great post. It helped me get started on my own project: I wanted a horizontal Aweber form at the end of each post without the default styling. I am also not using a Thesis theme, so those parts I had to skip.
    I did end up with a slightly different approach just using the JavaScript snippet and using CSS to get the job done. I also wanted the functionality to automatically add the Aweber form at the end of each post, but had to use a different hook. Thanks for pointing me in the right direction.
    The final result is my personal plugin Simple Aweber Integration.

    • Awesome! I’m goad you were able to pick it apart and take what you could from it. That’s the kind of stuff I like to read! Thanks a ton for reading.

  25. AWESOME GUIDE!

    The ONLY helpful guide as I’ve been trying to figure out AWeber forms for some time now.

    My only difference is that I use Genesis.

    Sean, for some reason my form just doesn’t work? The submit button doesn’t work?

    I seem to have followed everything here to the T so not sure exactly why my AWeber form is not working? I have a stacked and unstacked example I’m working on at:
    http://www.startofhappiness.com/aweber-form-tests/

    (the form in sidebar works as this is my original from MailChimp, but I’m looking to move to AWeber).

    • Hey, Brendan! Thanks a ton for the kind words.

      The reason your forms don’t work is because they aren’t structured properly as HTML forms. I see you have the different input elements and all separated into divs… which is fine. But absolutely everything related to the functionality of the form, as in the name field, email field, submit button, and the hidden input elements, MUST be wrapped inside of < form > tags. I can’t seem to find the form tags in your HTML.

      Make sure you read my tutorial word-for-word. I think you may have taken a portion of the code you saw and mistook that for a complete form structure… which it is not.

      Read the tutorial again and let me know how it works out! (You should have no problems)

  26. Hi Sean,
    I was able to successfully create a styled aweber form using your awesome tutorial several months. I am now try to create a new form for another site and I’ve run into a snag.

    I cannot get the styles to go away. Per your tip, i refreshed the design and setting pages after saving each one, but each time I refresh I am taken back to the design page. It’s a vicious loop.

    I reached out to Aweber’s help desk and they told me to try clearing my cache and cookies and trying different browser. I did all of that and I still can’t remove the styles.

    I even deleted the form and started a new one. It’s still a no go.

    Have you run into this problem before? Do you have any suggestions?

    Thanks in advance for your assistance.

  27. I was finally able to remove the styles.

    I had to go one of my other forms, uncheck the box to remove the styles and then go back to the new form and uncheck the box and mysteriously it worked.

    Crazy.

    Have a good day! :)

    • Sorry for my delayed response, Wendy! Glad you got it taken care of, though. Every few months, I run into a snag that confuses me beyond belief. Unfortunately, my solutions always end up like yours… it just starts working. Gotta love this stuff!

      Glad you found the tutorial useful. Let me know if you have anymore issues and I’ll try to respond in a timely manner. :)

  28. Awesome stuff! You made something that looked challenging simple and easy to follow. This blog helped me out in a big way.

    Thank you!

    Keep at it!

    • Thanks, Tim!

      So glad it was helpful to you. Let me know if you run into any issues and thanks a ton for reading.

  29. Hi Sean,

    I stumbled upon this post as I was looking for a solution with my feedburner issue. Glad I was able to learn a lot. I’m in the process of publishing my blog and have already subscribed to Aweber and installed the Web Form on my blog. However, I noticed that in my Premium Theme there’s a built-in Subscription form that is integrated with Feedburner. So, now I have two subscriptions. I’m told that I can’t integrate Feedburner with Aweber and have to periodically copy my subscriptions to Aweber.

    Is it OK I go ahead having both subscriptions and regularly import to my Awber Account or is there any other thing that will make my life easy.

    Appreciate your kind help.

    Regards,
    Fayaz

    • Hey, Fayaz.

      In my honest opinion, I wouldn’t do any importing and exporting with the two services. I think you should choose which one you want to use and run with that.

      Oh here, I actually give the option of signing up with an email address through Aweber or just signing up through RSS. You can see how I handle that here: http://www.sdavismedia.com/subscribe/

      I don’t see why you would run into any problems transferring subs but to me, it’s just not worth it. If I were in your position, I’d transfer them to Aweber one last time and then stop using the Feedburner feature of your theme.

  30. Sean,

    this is a fantastic article! What modifications need to be made for MD3? I am having zero luck adding this to my header.

    • Hey, Barry! I’m glad you found it useful!

      Nothing special needs to be done to add a form to your header in MD3. All you need to do is have a box to paste the HTML into and you can simply paste the CSS into the CSS panel. The only issues you may run into are MD3 CSS overriding the CSS for your form. That’s a bridge that needs to be crossed when you get there, though.

      What issues are you having, exactly?

  31. This is the 2nd post, of yours I personally read. And yet I really like this one the best.

    Thanks ,Jodi

  32. Sean,
    Absolutely the best tutorial for Aweber customization I’ve found, and have been looking for a while.
    Thanks for taking time to write this post, your time and effort is much appreciated!
    Mark

  33. Sean,
    This tutorial was amazing. Finally, the real deal for creating simple custom forms with aweber, bypassing that editor thing that hugs.
    Now if I could just figure out how to use a button in a text widget sidebar, and open the form in a lightbox I would be jones’in.
    Thanks again,
    Mark

      • Yes! I’m using themeblvd jumpstart framework that makes use of bootstrap, so a simple button with modal window works perfectly.
        Thanks again for the information, this was a great tutorial.
        Mark

  34. Thank you so much for this tutorial Sean. I’ve found it extremely useful and easy to implement. I had been searching for a horizontal opt-in bar “how to” and was very close to paying someone on fiverr to do it for me! What’s great about this tutorial for me is that I now have an understanding of how the aweber form is put together and can use that knowledge to tweak to my heart’s content. Cheers, Nicola.

    • I love to hear that, Nicola!!!

      That’s exactly what I wanted to accomplish here. I want people to be able to do whatever they want with the forms in the future instead of just paying to have something done once.

      Please let me know if I can help in any other way! This made my night. :)

      Thanks for reading!

  35. Great article Sean! Just when I needed it.

    I was pulling my hair out trying to get Aweber to produce an optin form that did not look corn ball. So I started Googling around and came across this article.

    It gave me just the right nuggets so I can create the form that I need!!

    • Boom! That’s the exact purpose of this article. No need to be stuck inside of a form design bubble. Just a little freedom goes a long way. Glad you found it useful!

    • No worries at all. The only parts of this tutorial that apply to Thesis are the CSS selectors. How to break down and understand the forms themselves remains the same.

      If you are following this tutorial and need help with implementing the CSS on your non-Thesis site, let me know.

      • Hey Sean,
        I would love to have non-Thesis css for the form when you have a chance!
        Thanks again for this article, great job!

  36. Great tips! What if I don’t want to a validation error to open up the default Aweber error screen. I have simple form but want to validate the email field before it gets to the Aweber script for processing. Any ideas?

    • That would take some kind of Javascript. I don’t have the code but I know it can be done. I don’t think Aweber offers that functionality either… especially if you’re using the raw HTML version of the forms.

  37. I was following this until mention of the custom.css file

    I have thesis 2.0, do you have the hand holding tutorial for 2.0? Thanks so much, Holly

    • Hey, Holly! If you’re using Thesis 2, just paste all of the CSS mentioned in this article into the Custom CSS panel in your Thesis 2 Skin Editor.

      However, part of the CSS selector used in my CSS here is “.custom” and that’s specific to Thesis 1. Simply delete “.custom” because you don’t need it.

      So if I gave the CSS selector:

      .custom .optin_form input

      Use this instead:

      .optin_form input

      Everything should work just the same!

      If it doesn’t, it’s probably because you’re using a skin that’s overriding the CSS. If that’s the case, I would have to see your specific website’s HTML to know what to use to override other form CSS. Hope this helps!

  38. Hi Sean. I am so happy I found this. Can you tell me how to add just a basic BG color to the button and not a gradient?

    • Sure!

      The CSS I give you for the button is as follows:

      .optin_form input[type="submit"] {
          color: #fff;
          text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
          border: 0;
          background: -moz-linear-gradient(top, #EB0000 0%, #B00202 100%);
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EB0000), color-stop(1, #B00202));
          background: -webkit-linear-gradient(top, #EB0000 0%, #B00202 100%);
          background: linear-gradient(top, #EB0000 0%, #B00202 100%);
      }
      

      To use just a basic background color instead of the gradient, delete those 4 background properties and replace it with just one basic shorthand background property like so:

      .optin_form input[type="submit"] {
          color: #fff;
          text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
          border: 0;
          background: #f00;
      }
      

      Then, for the hover effect, you’d once again delete those background properties and replace them with one shorthand background hover color like so:

      .optin_form input[type="submit"]:hover {
          background: #aaa;
      }
      

      Let me know if this works for you!

  39. Sean – This post is great! Thanks so much. I do have one question — How do I use an image for the button? My client gave me a 75×75 pixel png file that she wants as the submit button. Can you help me out? BTW – I am not using Thesis, if that matters.

    • Hi, Carol! I’m glad you found the article useful. It’s one of my favorites. :)

      To use an image for the button background, you can still use the “background” CSS property but instead of having a bunch of different declarations for different browsers, you’re good with the basics:

      .optin_form input[type="submit"] {
          color: #fff;
          text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
          border: 0;
          background: #333 url('your_image_url.png');
      }
      

      Inside of url(‘ ….. ‘); place the url of the image that you already have uploaded somewhere… like to your media library. That should be all you need.

      The “#333″ is a fallback color just incase the image doesn’t work. So be sure to pick a color similar to the image.

      You’d follow the same instructions if you wanted a different image on the hover:

      .optin_form input[type="submit"]:hover {
          background: #666 url('your_hover_image_url.png');
      }
      

      Again, pick a color to correspond with the regular fallback color. That should get you taken care of!

      Let me know if you need any help and don’t hesitate to register to my forums for help anytime.

      Sean

  40. I know you wrote this a long time ago but I just had to say how awesome this tutorial was.

    I’m not a tech guy at all but I understand HTML and CSS a little, but this was so easy to follow and the way you write is so easy to understand. Excellent work.

    I was searching all over the web for how to create a horizontal sign up form and nothing was out there, I overlooked your link in a Google search then decided what the hell and I clicked on gold. Glad I did. I’ll be sharing this with my developer for when we start building my site.

    Thanks

    • Awesome! I really appreciate your comment, Derrick. I addressed questions I had answered over and over again so it only made sense to put it in an article. I’m glad you found it useful!

  41. Sir,
    Hats off to you
    You should take over Aweber Documentation.My head hurts from trying to figure those out.And you’ve made it all so easy…
    Thanks for this AWESOME post.You’re a life saver!!!

  42. Is Thesis the only WordPress framework where you can easily and successfully put a sign up form in the header? Can it be placed horizontally?

    • Hey, Tee. Not sure how I missed this comment. Sorry!

      You can put a horizontal optin form in the header of absolutely any theme… both frameworks and standalone themes. It just depends on what theme you’re using as to how you’d do it.

      Contact me if you need help!

    • I have done this in iThemes Builder, Nimubs Opulus, and a ProPhoto4. There were some adjustments, but not many. Sean was a great help with this!

      • Thanks for the kind words, Carol! I’m glad you were able to put it to use and tweak it all to your liking! :)

  43. Hi Sean,

    I don’t usually comment on articles but this one was greatly helpful. You made me laugh a couple of times too. Good stuff!

    Best regards.

    • Haha! I try my best to entertain. ;)

      Sorry for the delayed response. I’ve been having some site issues that are just now getting fixed. Thanks for reading and commenting!

  44. Awesome article Sean! I implemented this code into one of my forms and noticed that if you do not add the display none img pixel code, in aweber on the stats page it won’t track how many times the form has been viewed.

    I think you might need to leave this code in the form :) let me know what you think.

    • You’re 100% right and I’m surprised I let that slip by. It never should have been removed from the first altered code example. It’s back in there now with a note in the article explaining why it should stay. Thanks a ton! Another set of eyes always pays off.

      • No problem Sean! Thank you for updating the code for all of your readers. Take care.

  45. Hmm it appears like your website ate my first comment (it was extremely long) so I guess I’ll just sum it up what I
    wrote and say, I’m thoroughly enjoying your blog. I too am an aspiring blog writer but I’m still new to everything.
    Do you have any points for novice blog writers?

    I’d genuinely appreciate it.

  46. I wanted a responsive opt in box because the AWeber templates I tried looked terrible on small screens. I opted to use the Genesis eNews Extended widget in my sidebar, but I was having a hard time finding the form action URL. Your tutorial was exactly what I needed and helped me tremendously! Thanks!

    • Awesome! That’s exactly why I wrote it… so you could do it yourself and gain more control. I’m glad it worked out for you!

Leave a Reply

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

*