Getting Started Steps

• Expression Web 3
• Expression Web 4

 

• HTML 5
• HTML Form Videos
• Scrolling Text Box
• CSS for Beginners

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

 

 

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:

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.

Name:

Email:

Phone:

Questions:

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.