Install Your Own Scripts Form Building Tutorial

Welcome to Part 3 of Building Your Own Forms

In our last lesson, we went through the more advanced form elements you would find in most forms. Hopefully, you did a little practicing . . .

Now it's time to start putting it all together!

The design and layout of your form is as important as the function. If your user cannot understand what you want, or if the overall flow is confusing, then they will not fill out your form.

We're going to build a sample form for gathering information to install a script for a customer (much like the one I made for my Inmarkon site). So let's begin!

Tired of paying others to install your scripts for you?

Are you interested in telling your script installer to "Take a hike!"?

Then you need Install Your Own Scripts. The new ebook from script installer Michael Ambrosio. It's Jam-Packed with extremely easy to follow step-by-step script installation lessons.

And you learn by actually installing THREE different scripts!

Don't delay. Order Now.
Tell your installer to Take A Hike!


Deciding What Information You Need To Gather.

This may seem obvious, but your first step is to just sit down with a pad and pen and decide what information you need to gather, what is required and what is optional, and also to decide how to present your form, along with which tag elements to use.

For our example form, we obviously need to gather informarion regarding our customers installation - server info, ftp info, which script we're installing, and of course our customers name, email address and other personal information.

For this exercize, we will collect the following information:

Name:

Contact Email:

Alternate Contact Email:

Telephone Number:

Script to be Installed:

Web Host Name:

Domain Name:

Control Panel URL:

C/P User Name:

C/P Password:

Your Payment Receipt #:

How did you hear about our services?:

Designing our form.

My guess is that you probably have tried to create a form already, and have noticed that it is fairly impossible to get a nice clean layout using The <BR> and <P> tags. This is because the browser is using proportional spacing. This means that a W uses more space than an i to display. The browser also ignores any extra spaces you might put in to try and pad things in an effort to align your form elements. There are two ways around this problem.

  1. Tables. You can place your various form elements in a table, or tables if needed. This is a good way to format your form, but it CAN increases your chances for creating hard to find bugs.
  2. <PRE></PRE> Tags. This method tells the browser to accept your formatting as entered. You do not use the <BR> or <P> tags to start a new line, just enter a new line! Also, it will use leading spaces as well as spaces between words to make your attempt to line things up work as you intend. This is accomplished by having every character, no matter how wide or narrow, use the same amount of space.

For the purposes of this tutorial, we will be using the Tables method of formatting. The reason is because most beginner HTML users are more familiar with Tables. We will be creating a simple 2 column table for our tutorial. That means our form will flow from top to bottom.

As you become more familiar with form building, you can create more visually appealing or more complex forms using tables. But for now, let's just keep it simple.

Based on our list above, we will need a table with 2 columns and 12 rows (I also put in a cell pad of 5 to add space between the cells):

   
   
   
   
   
   
   
   
   
   
   
   
Note: You don't need the border of the table to be showing, but it's easier for our tutorial.

Now, let's put our "Names" in the left column (I also use the "Align Right" to make it look neater):

Name:

 
Contact Email:
 
Alternate Contact Email:
 
Telephone Number:
 
Script to be Installed:
 
Web Host Name:
 
Domain Name:
 
Control Panel URL:
 
Control Panel User Name:
 
Control Panel Password:
 
Your Payment Receipt #:
 
How did you hear about our services?:
 

At this point, let's make sure that the information we are gathering is everything you need.

We also need to define this as a form. For this, all we need to do is to place the FORM elements around the table, like this:

Look for the table start tag: <table width="70%" border="1" align="center" cellpadding="5" cellspacing="0">

Now, place the form start tag before it: <form><table width="70%" border="1" align="center" cellpadding="5" cellspacing="0">

Next, put the form closing tag AFTER the table closing tag: </table></form>

Now, everything within our table is part of our form.

Tired of paying others to install your scripts for you?

Are you interested in telling your script installer to "Take a hike!"?

Then you need Install Your Own Scripts. The new ebook from script installer Michael Ambrosio. It's Jam-Packed with extremely easy to follow step-by-step script installation lessons.

And you learn by actually installing THREE different scripts!

Don't delay. Order Now.
Tell your installer to Take A Hike!

Adding Tag Elements:

My design editor of choice is Dreamweaver, which has the ability to add form elements at the click of the button. Many editors can. If your does not, don't worry. You can add the tag elements by hand by following the tutorial parts 1 and 2.

Ok, let's move on. We need to decide which elements we will use for each part of the form:

Name:

Contact Email:
Alternate Contact Email:
Telephone Number:
Script to be Installed:
Web Host Name:
Domain Name:
Control Panel URL:
Control Panel User Name:
Control Panel Password:
Your Payment Receipt #:
How did you hear about our services?:

Search Engine
Recommended
Ezine Ad
Other

 

Ok, now let's look at the source code for this form:

<form>
<table width="70%" border="1" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width="52%"> <p align="right">Name:</p></td>
<td width="48%"><input name="name" type="text" id="name" size="25"></td>
</tr>
<tr>
<td><div align="right">Contact Email:</div></td>
<td><input name="email1" type="text" id="email1" size="25"></td>
</tr>
<tr>
<td><div align="right">Alternate Contact Email:</div></td>
<td><input name="email2" type="text" id="email2" value="Alternate Contact Email" size="25"></td>
</tr>
<tr>
<td><div align="right">Telephone Number:</div></td>
<td><input name="phone" type="text" id="phone" size="25"></td>
</tr>
<tr>
<td><div align="right">Script to be Installed:</div></td>
<td><select name="scripts" id="scripts">
<option selected>Script 1</option>
<option>Script 2</option>
<option>Script 3</option>
<option>Script 4</option>
<option>Script 5</option>
</select>
</td>
</tr>
<tr>
<td><div align="right">Web Host Name:</div></td>
<td><input name="webhost" type="text" id="webhost" size="25"></td>
</tr>
<tr>
<td><div align="right">Domain Name:</div></td>
<td><input name="domain" type="text" id="domain" value="http://" size="25"></td>
</tr>
<tr>
<td><div align="right">Control Panel URL:</div></td>
<td><input name="cpanel" type="text" id="cpanel" value="http://" size="25"></td>
</tr>
<tr>
<td><div align="right">Control Panel User Name:</div></td>
<td><input name="cpuser" type="text" id="cpuser" size="25"></td>
</tr>
<tr>
<td><div align="right">Control Pane lPassword:</div></td>
<td><input name="cppass" type="text" id="cppass" size="25"></td>
</tr>
<tr>
<td><div align="right">Your Payment Receipt #:</div></td>
<td><input name="receipt" type="text" id="receipt" size="25"></td>
</tr>
<tr>
<td><div align="right">How did you hear about our Services?:</div></td>
<td><br>
<input name="search" type="checkbox" id="search" value="checkbox">
Search Engine
<br>
<input name="recommend" type="checkbox" id="recommend" value="checkbox">
Recommended
<br>
<input name="ads" type="checkbox" id="ads" value="checkbox">
Ezine Ad
<br>
<input name="other" type="checkbox" id="other" value="checkbox">
Other
<input name="other" type="text" id="other" size="20">
</td>
</tr>
<tr>
<td colspan="2"><div align="center">
<input type="submit" name="Submit" value="Submit">
<input type="reset" name="Reset" value="Clear Form">
</div></td>
</tr>

</table>
</form> 

I have made all of the tag elements orange, and the ID's (inside the quotes) blue, so it's easier to identify. You'll notice that in all of the Text fields, I defined the size of them all, but left the maximum characters blank. That means the BOX may be 25 characters, but the user can type in as many as they want. It will scroll to the right.

I have also given unique names to all of the tags. This is PARAMOUNT to proper operation of the form once it's submitted to your server.

The best thing for you to do now is to review this lesson and the code above. You will begin to understand more clearly how to build your forms. This one is very basic and they CAN get very complex. But once you know HOW to build a form, the complexity will mostly lie in how to effectively lay it out.


End of Part 3

Our next lesson will focus on how to make your form "live". Until then, practice what you've learned.


The "One More Chance" box. Click on our sponsors below for excellent products and services.

Tired of paying others to install your scripts for you?

Are you interested in telling your script installer to "Take a hike!"?

Then you need Install Your Own Scripts. The new ebook from script installer Michael Ambrosio. It's Jam-Packed with extremely easy to follow step-by-step script installation lessons.

And you learn by actually installing THREE different scripts!

Don't delay. Order Now.
Tell your installer to Take A Hike!