Creating Forms

 

 


 

Expression Web Tutorial:  How to Make a Simple Contact Form

Forms may seem quite mysterious at first.  But once you know what how they work and the basic building blocks, you will see how easy forms can be.

 

What Do We Need To Make A Form?

1.  Form Controls:
First, we need to learn a little bit about the Form Controls (also called Form Elements).  These form Controls are listed in the Toolbox Task Pane, which is located in the upper right task pane of the EW interface.

Please take the time to locate the form controls in the Toolbox.   They are HTML tags, so look for HTML in the Toolbox and click on the little plus sign to view the HTML tags.  Then  choose "Form Controls".

Form Controls that we will use in this Tutorial:

 

1.  Place the form tag on your web page.

 Place your cursor on your page in the general area where you would like to insert a form, and double click on the Form icon in the Toolbox Form Controls.  Typically, nesting the form inside an existing div is all that is necessary. 

Do NOT Click and Drag the Form to open it up.  Instead, we will style the form, including adding height or width to it if necessary, using CSS.  Likewise, we will add a background color or a background-image. 

 

When you insert the form tag, Expression Web writes the following code:

<form action="  " method="post"></form>

In Design View, you will see a rectangular box.  (see step 2)

However, since more and more hosting providers are doing away with FPSEs,  it would behoove you to learn how to find the cgi script you need for your form.  You will find the script in your hosting account under FormMail or CGI library.  

The cgi script will look like a URI -->  http://yourdomain-name.com/cgi/FormMail  or something along those lines.  

When someone fills out a form and clicks submit, the data is sent to your server, where the cgi script is located,  and the cgi script processes the data and sends it back to you as you describe in the code of the form.  You can have the form results emailed to you, or you can have the data sent to a database.

We will have the form data sent to an email as this is quite common for basic contact forms.

2.  Place your cursor inside the rectangular box that is your form. 

Above is an image of the form element in Design view.  
It is similar to a div in that the form is also a block 
level element.

 Locate the Label under form controls in the Toolbox and double click on it to insert it.  You will type the word "Name" inside the label. 

Next, click on Split view to see the code.  Move your cursor so that it is imediately after </label> in the code view, then double click input (text).

 

I can't tell you why Expression Web does not get it right, but when using the label you have to manually move your cursor as described.  Otherwise, the label tag will not close when it is suppose to which then means you cannot insert the second label.  The label is very important for a few reasons.  First, it meets accessibility requirements. but it also provides the structures we need to format a form using CSS, and thus, avoid the use of tables.

So, insert a new label for each of the following:

Name: 
Email:
Phone:

It will look like this in the code:

<label id="label1">Name: </label>

After the closing label, insert input(text) for each of the above (Name, Email, Phone).

Later, we will change the label tag to look like this:  <label for="name"> etc.   Simply change the id attribute to the for attribute.





Here is a simple form put together using the form element, labels, input (text), textarea, and input(submit). The only CSS I applied so far was on the form itselft.  I will share the styles with you on the example page.
form element











The HTML:

<form action="" method="post">

<label for="name">Name: </label><input name="name" type="text" /><br />
<br/>
<label for="email">Email:</label><input name="Text1" type="text" /><br />
<br/>
<label for="phone">Phone:</label><input name="Text2" type="text" /><br />

<label for=questions">Questions: </label>
<textarea cols="20" name="TextArea1" rows="2"></textarea><br />

<input name="Submit1" type="submit" value="submit" /></form>

NOTE:   It is better if we changed the id attribute to the 'for' attribute.   For instance, id="Label1" would be for="name".    Using the "for" attribute helps people using screen readers to understand what the form is asking them to complete on each line.

You can copy the HTML and paste it inside your layout (via code view).
Next, we will use CSS to style the form and make it look a bit more presentable.

We only need to add a few styles to format the form and align the elements.  You can see the final result and CSS used here.  Feel free to copy and paste the css and use it to practice.

Watch the 3 Part Video Tutorials that show you how to make this basic contact form.  It will help you make better sense of this tutorial.  Watch the Videos