Ever seen those big submit buttons on some optin forms?

The first time I saw this kind of optin form was from Armand Morin’s ecover generator site. Something in me just made me wanna click the submit button! It just looks so clean and appealing!

So how do you “create” these big buttons?

Well, I’ll show how you can create them.

Basically, here’s what you do to create the big buttons (and then, the overall look):

1 - Modify submit button text size, width, and height.

2 - Add borders around the submit button

3 - Enclose the optin form with a box.

The challenge here is finding out what code and attributes values(color,height,etc) one should use to create the look, and where to place the line of code in the optin/autoresponder form.

Fortunately, I’m going to share it with you now.

Ready?

First, you need your autoresponder code.

Your autoresponder code starts and ends with the <form></form> tag.

Aweber’s default autoresponder code looks somewhat like this:

There are basically 2 parts in an autoresponder form.

The first part - the upper part before the <table> tag , says “Don’t touch me or no subscribers shall be added to your list.”

The lower part, after the <table> tag says “You can modify me, but make sure I’m seen!”

First, the code above might look scary, so let me arrange it a bit:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<--upper code here-->;
 
<table border="0">
<tbody>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td>Name:</td>
<td>
<input name="name" size="20" type="text" /></td>
</tr>
<tr>
<td>Email:</td>
<td>
<input name="from" size="20" type="text" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input name="submit" type="submit" value="submit" /></td>
</tr>
</tbody></table>

Now that it looks good, this lower part is basically where we edit.

First, what I make sure to do is change the “submit” text itself to some other text that says “I Want My Downloads or Claim Free Download! or Free Access!”.

To Change What The Submit Text Says:

Inside the <input type=submit…> tag, change the text value=”submit” to value=“Claim Free Download!” .

So its going to look like this (changes at line 6):

1
2
3
4
5
6
7
8

<td>
  <input name="from" size="20" type="text" /></td>
</tr>
<tr>
<td colspan="2" align="center">
   <input name="submit" type="submit" value="Claim Free Download!" /></td>
</tr>
</tbody></table>

The <input type=submit…> tag is usually located at the last part of your autoresponder code.

Making The Button Text Bigger, Wider and Bolder!

To make changes to the submit button, you are going to insert a piece of code in the specified spot:

<td colspan="2" align="center">
<input [insert code here] name="submit" type="submit" value="Claim Free Download" />

(Just notice that we want to edit the submit button, so the input type is submit. The other two input types are text.)

Now, to make the text bigger, bolder, and wider, you are going to want to insert these styling attributes. You are going to want to insert this code:

1

style="font-size:18px;font-family:Arial; width:100%; height:40px; font-weight:bold;"

…inside the <input> tag. So it’s going look like this:

<input style="font-size:18px;font-family:Arial;width:100%;  height:40px;
  font-weight:bold;" name="submit" type="submit" value="Claim Free Download" />

So when you added the style attribute to the line above, you modified the following to the button text:

font-size: 18px;

font-family: Arial;

width:100%;

height:40px;

font-weight:bold;

Note: You can change the values of any of these attributes. (Just Suit it to the overall look of your optin form later) But for now, we’ll be using these values.

Go ahead and refresh your page and see the submit text get bigger and bolder and the button wider! :

Creating Borders Around The Submit Button:

To create borders around the submit button, you are going to need to copy this code:

style="background-color:#800000; padding:5px; width:100%;"

inside the <td> tag. So it’s going to like this (it’s at Line 6):

1
2
3
4
5
6
7
8
9

<tr>
   <td>Email:</td>
   <td><input name="from" size="20" type="text" /></td>
</tr>
<tr>
   <td style="background-color:#800000; padding:5px; width:100%;" colspan="2" align="center">
   <input style="font-size:20px;font-family:Arial; height:40px;" name="submit" type="submit" value="Claim Free Download!" />
   </td>
</tr>

The above looks good, but frankly I prefer to enclose the whole optin form inside a “dashed box” with light yellow background.

Enclosing Your Optin form Inside A “Box”:

Put the following code (Lines 1-6) above your optin code and the </div> below after your autoresponder code(line 18).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div style="background-color:#ffffcc; font-family:Tahoma; width:350px; margin:auto; border:5px dashed #000; padding:15px; ">
<div style="font-size:28px; font-family:Tahoma, Arial, serif;font-weight:bold;">
 
SIGNUP FREE To Claim Your Download!</div>
Just enter your first name and primary email address below to receive your free download:
 
<--your autoresponder code-->
<form>
.
.
<input name="meta_web_form_id" type="hidden" value="x" />
<input name="meta_split_id" type="hidden" />
<input name="unit" type="hidden" value="x" />
<input name="redirect" type="hidden" value="http://x" />
<input name="meta_redirect_onlist" type="hidden" />
.
.
</div> <-- be sure to include the closing </div> below your autoresponder code!)

Line 7 is where you paste YOUR autoresponder code.

After all that’s done, it’s going to look like this:

lookin slick!

By the way, you can change the values of the background-color, font-family, width, border, etc.:
-> Reminder: Just don’t forget the semi-colon (;), after every style value.

Also, don’t forget to change what the text says.

You should also decide on how wide you want your optin box to be and change the width value.

For example, if I want the width of the optin box to be a bit wider, I would change the width to 450px. And if I want less space between the box and the text, I would change the padding to 5px instead of 15px:

By the way, if you want to include a double arrow at the end of your submit text, add &raquo to your text.

Example:

<input type="submit" value="Claim Your Free Download &raquo;" />

Now at this point you might be saying, “it’ll do”, and I hear you. But, I find it more attractive making the text fields wider!

Check it out first.

Making The Text Field Wider

In most cases there are two text fields that you use in your forms. One for the Name text field, and the other for the Email Address text field.

To make the text field wider, you want to find the lines of code that says input type=text:

<input name="from" size="20" type="text" />.

.. and change the size value.

If you are blinded with the autoresponder code and can’t find that line above, the keyword to find here is <input type=text.

You see, there are actually 10 input types in the html world: text , submit, password, checkbox, radio, reset, file, hidden, image and button. All of which you can substitute the text input type with.

However, we don’t want to burden ourselves with the others types. In fact, most autoresponders only utilize 2 of the input types when you generate the form codes. Though, some use 3 input types- text, submit and then reset, but in most cases only 2 input types are used(submit and text).

(By the way, you can also use input type=image to substitute the submit button with an image, but thats not covered here. )

Anyway, back to making the text field wider…

That line above is usually located after the “Name” or the “Email Address” <td>.

Example, lines 5 and 11 is where you want to edit.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<tr>
 <td>
   <font size="3" face="tahoma,arial, verdana">First Name:</font>
 </td>
 <td><input type=text size=20 name="fname"></td>
</tr>
<tr>
 <td>
  <font size="3" face="tahoma, arial, verdana">Email address:</font>
 </td>
 <td><input type=text size=20 name="email"></td>
</tr>
<tr>
<td style="background-color:#800000; padding:5px; width:100%;" colspan="2" align=center>
<input style="font-size:20px;font-family:Arial;width:100%;height:40px;font-weight:bold;" type="submit" value="Claim Your Free Download! &raquo;">
</td>
</tr>
</table>
</form>

What we are going to change is the value of the size attribute.

Change it to 30. I usually use 25,30 or 35, depending on the widness of my optin box.

Another thing you can also improve is aligning the “Name” and the “Email Address” text to the “right” so that it won’t create a space in between the text field. It’s your call, though.

Example: aligning text to the right, add the code align=”right” at lines 2 and 8:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<tr>
 <td align="right">
   <font size="2" face="tahoma,arial, verdana">First Name:</font>
 </td>
 <td><input type=text size=20 name="fname"></td>
</tr>
<tr>
 <td align="right">
  <font size="2" face="tahoma, arial, verdana">Email address:</font>
 </td>
 <td><input type=text size=20 name="email"></td>
</tr>
<tr>
<td style="background-color:#800000; padding:5px; width:100%;" colspan="2" align=center>
<input style="font-size:20px;font-family:Arial;width:100%;height:40px;font-weight:bold;" type="submit" value="Claim Your Free Download! &raquo;">
</td>
</tr>
</table>
</form>

The image below shows the results after you aligned the texts to the right, and made the text field wider:

The button will auto adjust since its width is set to 100%.

Increasing The Text Size

There are actually several ways you can increase the size of the First Name and Email text.

It’s either in you visual editor when you paste the autoresponder code and switch to the visual view that you just highlight the text and increase its size. (works with aligning it to the right, too. )

Or you can code it yourself by enclosing the First Name, and the Email Address text with the tag.

Some autoresponders have these generated by default, so all you’ve gotta do is change the values in it.

Below, I’ve changed the text size value to 3, and for the font face, I left the default font alone. (changes at lines 3 and 9):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<tr>
 <td align="right">
   <font size="3" face="arial, verdana">First Name:</font>
 </td>
 <td><input type=text size=35 name="fname"></td>
</tr>
<tr>
 <td align="right">
  <font size="3" face="arial, verdana">Email address:</font>
 </td>
 <td><input type=text size=35 name="email"></td>
</tr>
<tr>
<td style="background-color:#800000; padding:5px; width:100%;" colspan="2" align=center>
<input style="font-size:20px;font-family:Arial;width:100%;height:40px;font-weight:bold;" type="submit" value="Claim Your Free Download! &raquo;">
</td>
</tr>
</table>
</form>

Be sure to close the <font> tag with </font> (just like above).

Soooo… In Summary, click the image below.

I did leave out the <font> part in the image above since it was already generated by default.

Here’s how the optin box looks after the finishing touches:

You see it and it is gooood!

RE: Different Autoresponder Code Structure.

By the way, several autoresponders have different autoresponder code structure.

Like for example their submit button usually does not span the two columns such that the submit button sticks to the right side.

What we want to do is edit the code so that the submit button occupies all the space in its row:

Autoresponder services like Norabots, Hegabots, Responsebot, Parabots and the like have this structure. Here’s a sample code:

Notice, the generated autoresponder code created an empty <td></td>(see the one in green) before the submit button, whereas other autoresponders like aweber cleaned this out.

Having this extra <td></td> allocates an empty space on the left side.

What we want to do is delete this and add colspan=”2″ to the next <td></td> (which contains align=center) so that the submit button spans both columns.

So it should look like this:

Now you can proceed to modifying your optin code further by following the above directions!

Supplements:

Making life easier:

Here’s a summary of the lines of code you would want to copy to create the big button look and the optin box. Refer to the directions above regarding where to paste them.

Code to make the submit text bigger, wider and bolder (insert inside <input type=submit …>):

1

style="font-size:20px;font-family:Arial;width:100%;height:40px;font-weight:bold;"

Code to add borders to the submit text, place inside the (insert inside <td>):

1

style="background-color:#800000; padding:5px; width:100%;"

Code for the optin box (enclose your autoresponder code with this):

1
2
3
4
5
6
7
8
9

<div style="background-color:#ffffcc; font-family:Tahoma; width:380px; margin:auto; border:5px dashed #000; padding:15px;">
<div style="font-size:28px; font-family:Tahoma;font-weight:bold;">
SIGNUP FREE To Claim Your Download!
</div>
Just enter your first name and primary email address below to receive your free download:
 
<-autoresponder code here->
 
</div>

As you might be speculating, yeah, you can change the style values like font-family, font-size, padding, width, etc.

Sample Aweber code with the modifications (Result):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<div style="background-color:#ffffcc; font-family:Tahoma; width:380px; margin:auto; border:5px dashed #000; padding:15px;">
<div style="font-size:28px; font-family:Tahoma;font-weight:bold;">SIGNUP FREE To Claim Your Download!</div>
Just enter your first name and primary email address below to receive your free download:
<form action="http://www.aweber.com/scripts/addlead.pl" method="post">
<input name="meta_web_form_id" type="hidden" value="x" />
<input name="meta_split_id" type="hidden" />
<input name="unit" type="hidden" value="x" />
<input name="redirect" type="hidden" value="x" />
<input name="meta_redirect_onlist" type="hidden" />
<input name="meta_adtracking" type="hidden" />
<input name="meta_message" type="hidden" value="1" />
<input name="meta_required" type="hidden" value="from" />
<input name="meta_forward_vars" type="hidden" value="0" />
<table border="0">
<tbody>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td align="right">First Name:</td>
<td>
<input name="name" size="35" type="text" /></td>
</tr>
<tr>
<td align="right">Email Address:</td>
<td>
<input name="from" size="35" type="text" /></td>
</tr>
<tr>
<td style="background-color:#800000; padding:5px; width:100%; align=" colspan="2">
<input style="font-size:20px;font-family:Arial;width:100%;height:40px;font-weight:bold;" name="submit" type="submit" value="Claim Free Download! »" /></td>
</tr>
</tbody></table>
</form></div>

Sample Norabots, Hegabots, Parabots, Responsebot,etc. code with the modification (Result):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<div style="background-color:#ffffcc; font-family:Tahoma; width:380px; margin:auto; border:5px dashed #000; padding:15px;" align="center">
<div style="font-size:28px; font-family:Tahoma;font-weight:bold;">SIGNUP FREE To Claim Your Download!</div>
Just enter your first name and primary email address below to receive your free download:
<script language="JavaScript">
function checkSub(){
if (document.signup.email.value.indexOf('@', 0) == -1) {
alert("Please fill in your valid Email address.\nYour email should be in the following format: email@address.com")
document.signup.email.focus()
return false}
if (document.signup.fname.value == "") {
alert("Please fill in your First name.")
document.signup.fname.focus()
return false}
}</script>
<form action="http://norabots.com/ar/ar/optin.php" method="post" name="signup" onsubmit="return checkSub()">
<input type=hidden name="action" value="addlead">
<input type=hidden name="member" value="x">
<input type=hidden name="auto" value="x">
<input type=hidden name="thankyou" value="http://x">
<table border=0 cellspacing=0 cellpadding=2>
<tr>
<td align="right">
<font size="3" face="tahoma,arial, verdana">
First Name:</font></td>
<td><input type=text size=35 name="fname"></td>
</tr>
<tr>
  <td align="right">
  <font size="3" face="tahoma, arial, verdana">Email address:</font>
  </td>
   <td><input type=text size=35 name="email"></td>
</tr>
<tr>
   <td style="background-color:#800000; padding:5px; width:100%;" colspan="2" align=center>
   <input style="font-size:20px;font-family:Arial;width:100%;height:40px;font-weight:bold;" type="submit" value="Claim Your Free Download! &raquo;">
   </td>
</tr>
</table>
</form>
</div>

And For Some Reminders:

Things to double-check:

1) Be sure to enclose the values of the attributes with quotations

(ex: style = “background-color:#800000“). If you miss to close the quotation, chances are nothing will show or things won’t be right.

Well, you may not enclose it with quotations actually, and it will still work. The biggy is when you open a quotation and do not close it, like “border:5px dashed #000; .

2) Watch out for semi-colons(”;”), they should be positioned after every attribute inside “style” .

ex: style=”background-color:#880000; padding:5px; width: 100%; “

They look small, but they’re deadly when disregarded.

3) If you copy-pasted the codes from this blog directly, be careful with the double quotations. I think the wordpress editor is sometimes a little evil and messes up with the double quotes.

I’ve installed a plugin for this, but just check to be sure, though.

HTML Tip: These two are different things: ” ” and ” “ .

The first one are double quotes we normally type using the keyboard and the ones you should use when coding. The latter are open and close double quotes which messes up the html code.

Enjoy and hope you learned something!

oh… and if you need some clarification or help, post away!

The optin form would look good with these gorgeoues squeeze pages! (optin form guide included).