This guide will instruct you on how to insert a mail form into your page, so users may send you a message directly from your Web site. This tutorial is written for use with Dreamweaver. The tutorial may still be helpful for users of other editors because all the programs are somewhat similar.
Putting a Basic Form in Your Page:
To save you some time, we have created a very basic form which you will use as the base for your form. So first you must download our basic form. To do this, you need to save the following link to your computer. Please use the following directions to do this:
Internet Explorer users:
Right click on the link below and choose “Save Target As” in the menu that appears. Save the file to somewhere on your computer that you can remember easily, such as the Desktop.
Right click on the link below and choose “Save Link As” in the menu that appears. Save the file to somewhere on your computer that you can remember easily, such as the Desktop.
Now open the file you just downloaded in Dreamweaver. It should contain a basic form for you to start.
Adding and Editing Your Fields
Now if the basic four fields already provided in the template are all you need, you can move on to the next steps, but odds are you probably need more fields then that.
First of all, if you don’t need some of the fields provided for you, you can select them and press the delete key, similar to how you would remove any other object.
The whole form is surrounded by a dashed line. When you add any new fields, they must be added somewhere within this box.
Now to add a new text field follow these steps.
- Place the cursor where you want the field.Go to the Insert MenuGo to Form. A second menu will appear, with the available form objects. Select “Textfield“.
The textfield object should now be on your page.
Select the new textfield and right click on it.
In the menu that appears, select “Properties” as seen below.
This will open the Properties window, which is by default on the bottom of the Dreamweaver workspace. To the left hand side, you will see “Textfield” with a white box underneath. This field is called the Name field. Change this to the name of your field. Make sure the name is something that makes sense. When you get the form mail, the information is displayed with just this name and the data the user enters. Also note the name cannot be the same as any other names of fields.
If you want to change the width of the field, change the number in the “Char Width” section.
- Now type in a label next to the new field and you are all set. To insert a multi-lined textfield, follow the exact same steps, except choose the “Multi line” radio button from the Properties window. Repeat this process for each new field you wish to create.
Adding More Form Fields
If necessary, you may proceed to add more advanced form fields in your form such as drop-down menus and check boxes. Please visit the tutorial on how to add more advanced form fields or simply view a sample advanced form.
Configuring the Form
Now that you have all the fields in your form, we need to set it up for your page.
Click at the top of your the form, making sure the cursor is still inside the form element.
Go to the Insert menu and choose Form. Then choose Hidden Field in the next menu. You will be doing this for a total of 3 times. The three fields you will be making are:
- Field #1
- Field Name: recipient
- Field Value: email@example.com
- This field holds the value of the email address of where you want the forms to be mailed to.
- Field #2
- Field Name: redirect
- Field Value: http://www.uri.edu/department
- This field refers to the Web page the user will be taken to after they have submit the form. You may wish to make a special page that tells them that their form has been successfully submitted. If so, please put the full Web address of the page. Make sure when you later create the page the name is exactly the same. If you do not want a special page, just put the address of the page you want them to go to, such as your department home page.
- Field #3
- Field Name: required
- Field Value: email
- This sets which fields the user must enter to successfully submit the form. In this field, enter the names of the fields separated by commas that you want to make required.