Dreamweaver Form Tutorial
Forms are an effective and convenient method of gathering various types of information from website visitors. Common uses include marketing efforts and contact pages; however, website owners find that forms are useful for multiple purposes. Using Dreamweaver's "Forms" feature, you can easily add this enhancement to any page.
-
Adding the Form
-
To add a form to a web page, open an existing Dreamweaver file or create a new one. In the design window, place the cursor in the spot where you want the form to go.
Using the "Insert" toolbar, click the "Forms" tab and then click the "Form" icon on the left-hand side. This gives you a rectangle shape representative of the form being built.
Finally, click the "Text" tab in the "Insert" toolbar and add a "h1", "h2" or "h3" heading to the form. Because we are designing a contact form, type in the name "Contact Us" or use a similar title. Press the "Return" or "Enter" key to add a space.
Setting Form Properties
-
Set the form's properties to give it a name and determine how visitors' data is sent to a server for processing.
Begin by clicking the form's rectangle shape in the design window and then go to the "Properties" toolbar to get a customized view of options available. Go to the "Form name" text field and enter an identification word, such as "contact," so that the web server knows how to identify this particular form's information.
Next, fill in the "Action" text field. The action points to a location where the data of a form is going to be submitted. Common actions include the location of a Hypertext Preprocessor (PHP) script, which may be in a folder name or a URL address. Use a free service, such as Free-PHP.net, to get a script that sends form information to your email address, or check with your web host provider.
Lastly, select the "Method" to determine how the data is sent to the server for processing. For the purposes of a contact form, choose the "POST" option.
Inserting Form Elements
-
Insert the text field, text area and button elements to give visitors a way to fill out the contact form.
Add text fields for the first and last name, as well as the email address. Go to the "Forms" tab in the "Insert" toolbar and click on the text field icon. In the dialog box that opens, type in the name of the "ID," such as "firstname." The IDs are not publicly visible and are used by the server for processing.
Continue by entering a "Label," which is the text field descriptor that visitors actually see. For example, to ask for a first name, enter "First Name:" in the text field. Now, choose a "Style" to determine where the label goes with the text field, which may be before or after the field. Again, this data is used by the server and not published with the form. Click the "OK" button when finished. The design window now shows the text field. Repeat these steps to add the "Last Name:" and "Email Address:" fields and enter the appropriate label for each one.
Next, add a text area so that people can leave comments before submitting their information. Go to the "Forms" tab and click the "text field" button to enter the attribute information. For the "ID," type in the "comments" identifier and enter "Comments:" as the label. You may now click the comments box in the design window and go to the "Properties" toolbar to format this box, if you choose. For example, you can set the character width and number of lines that visitors may enter.
At the end, insert "Reset" and "Submit" buttons at the bottom of the form. Do this by accessing the "Forms" tab and clicking the "Button" icon. In the attributes dialog box, type "reset" in the "ID" field, leave the "label" field blank and click the "No label tag." Finish by clicking the "OK" button. Now, click the new "Reset" button in the design window to bring up the "Properties" toolbar. Select the "Reset" value to assign this action to the button. Repeat this step for the "Submit" button, making sure to type "submit" this time.
Save the form and use your web browser's "Preview" function to see how the contact page looks.
-
