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.
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".
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 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.
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:
It will look like this in the code:
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.
</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>
Watch the Videos to see how this is done.