Dreamweaver Article

Using Adobe Dreamweaver Developer Toolbox to Create a Contact Form

Create the contact form

In this section of the tutorial, you will build the contact form. It will save messages into the database, through the connection you've created when planning out the application.

1. Open the index page.
2. Start the Insert Record Form Wizard. You can access this wizard in two ways:
   • From the Developer Toolbox tab of the Insert panel.
   • From the Server Behaviors tab, by pressing the Plus (+) button, and then selecting Developer Toolbox -> Forms -> Insert Record Wizard.

The Insert Record Form Wizard user interface opens, allowing you to set options regarding the table, form elements and rules for validating the user input. You can follow the steps below, or simply use the images as a guideline.

1. In the first step, you must define a database connection, the table where to store data into and where to go after the page is successfully submitted to the server.
   • In the Connection drop-down menu, select connForm.
   • In the Table drop-down menu, select contact_con (we don't want to add departments, but the contact form contents).
   • Leave the Primary key column at its default, the id_con field.

   • In the After inserting, go to text-box, you'll have to enter the thankyou.html file. Either type the file name, or use the Browse... button to locate it.

     

     Figure 3. Insert Record Form Wizard Step 1

   • Once done with this step, click the Next > button to proceed to the field definitions.
2. In the second step, you can configure how each field will be represented in the page, how it will be submitted, and what labels they have. Most of the fields are set by default, with adjustments being made for the fields with fixed values, as the department name and the preferred method of contact:
   • For the departments field, a drop-down menu will be used. To set it up, select the id_dep_con field in the grid, and set its Display as property to Menu. Upon selection, two new options will become available: the Menu Properties and Add Recordset buttons.

   • Since the department information is stored in a database table, you have to create a recordset to retrieve it. Just hit the Add Recordset button, and use it to retrieve all of the departments from the department_dep table:

     

     Figure 4. Create a recordset

   • Once you've set up the recordset, hit the OK button. Now you can associate its values to the menu. To do so, click on the Menu Properties button and set it to retrieve the menu values From Database:

     

     Figure 5. Set menu properties

   • The department table fields containing the labels and values are the department name (name_dep) and the department unique identifier (id_dep). Once configured, click the OK button to finish.
   • The second field to change the preferred method of contact, which lets your company communicate through the means they like most: through e-mail, phone or regular mail. To show these options in an easy-to-understand manner, you will use radio buttons. Select the preferred_con field in the grid, and set its Display as property to Radio group. Once you do this, a new option will become available: the Radio Group Properties button.

   • Once you click on the Radio Group Properties button, you open a dialog box where the labels and values for each radio button in the group can be set. Enter the "Phone", "E-mail" and "Regular mail" as labels, and 1, 2 and 3 as values. Hit OK to return to the wizard:

     

     Figure 6. Set radio button options

   • The last field to set is the message. Set it to be displayed as a Text area, instead of a Text field, to allow visitors enter more text. You can then move on to the last (optional) step of the wizard: validation rules.

     

     Figure 7. Insert Record Form Wizard Step 2

3. In this last step you can add a validation rule for each field. If the user enters bad data, it will be processed first in the browser, and an error message will be displayed. Since you have to somehow identify the user, you should add validation rules and required status for the name, e-mail address and message, in the following manner:
   • For the name and message field, you only have to set them as required. To do so, select each of them in the grid, and check the "Required" checkbox.

   • For the e-mail address field, aside checking the "Required" checkbox, select the "E-mail" option in the Validation format drop-down menu:

     

     Figure 8. Insert Record Form Wizard Step 3

4. With this last step, the contact form is built. You can now click on the Finish button to apply the wizard to the page.

You will notice all of the elements it adds to the page: all of the HTML form elements, the recordset created for the menu, the Form Validation triggers, and the Insert Record transaction. The finished form should look like the image below (in the Dreamweaver's editable area):

Figure 9. Preview form in Dreamweaver

Above the actual form, a translator indicates the place where the main error message will be displayed if the transaction fails. After you save the page, you can also test it, by loading it in your browser and submitting a message.

Figure 10. Preview form in browser

Note: the red * showing that the field is required, as well as the "(E-mail)" mark, showing what kind of data you must enter.

Before moving on to the next section, there is one more thing left to do in order for the contact form to be usable: create the thankyou.html page. Open it in Dreamweaver, and type in an appreciation message for their opinion. Also, you should add a link to the index page, for those who still have things to say. A sample page could look like this:

Figure 11. Preview thank you page in browser

In the next topic, you will enhance this page so that when a visitor submits a message, it will be automatically sent to the corresponding department.

Page 3 of 4

Previous Page

Next Page