view cart
 1-866-363-5633
www. Expression - Web - Tutorial .com


Expression Web Tutorials:  Learn How to Build Web Sites with CSS & HTML  ~  A Place For Beginners



ew4 dvds

Getting Started Steps



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.

WATCH THE VIDEOS

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".

 

  1. Form Element - begins the form.  <form action="" method="post"></form>
  2. Label - structures the text.
  3. Input (text) - a place for viewers to enter their info.
  4. Textarea - a larger area for viewers to add comments, questions, etc.
  5. Input (submit) - the Submit button, to submit the form data.
  6. CGI Script to make the form send you the form data via email. - a Server Side Script that will email you the form data submitted by the viewer.  Date will be encoded (scrambled) to make it difficult to read by spambots.

 

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)

  • The "Method" is almost always set to "post".
  •  The "action" is the cgi script.   (the CGI script can be retrieved from your web hosting account)

 

 

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.

 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 in the code view, then double click input (text).

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).

Example: 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.












The HTML

<label for="name">Name: </label><input name="name" type="text" /><br />

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

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

<label for=questions">Questions: </label><br />

<textarea cols="20" name="TextArea1" rows="2"></textarea><br />

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

 

Next, we will use CSS to style the form and make it look a bit more presentable.

Watch the Videos to see how this is done.