Dreamweaver Article

Using Adobe Dreamweaver Developer Toolbox to Create a Contact Form

Plan the contact form

Before you start building this application, make sure you have a correctly configured Dreamweaver site, and a working database connection.

You will only have to create two files in your site's root. You can create them at the very beginning, so that you will not waste time with this operation again. To create files and folders in the site's root, use the corresponding options in the File menu of the Files tab. The file structure will look as in the example below, and you can create it easily by unpacking the zip file corresponding to your server model in your site root:

Figure 1. Site structure

The index of your site will display the contact form and perform most of the actions, while the thankyou.html page is only used to show a message to visitors that submit their messages.

After having created the files for your pages, it is time to set up the database to store the information for display. For this tutorial, you will use two tables: one for the departments, and one for the visitor's messages. The tables and fields are shown below:

Figure 2. Database structure

Note: The database diagram in the image above was built with Query Builder to better illustrate the database structure. You do not need to build it in order to complete this tutorial.

Here's a listing of the tables and columns used in this database:

1. department_dep - stores the department’s information.
   • id_dep - the primary key for the department table. No two departments will have the same ID.
   • name_dep – the department name (Sales, IT).
   • email_dep – this field stores the email address of the department.
2. contact_con - the contact table stores a list of contents for each department. It is linked to the department table by the id_dep_con foreign key, which stores the ID of the department associated to each contact record
   • id_con – the primary key for the contact table. No two contacts will have the same ID.
   • id_dep_con – the foreign key to the department table. This field stores the same value as id_dep.
   • name_con – the contact’s name.
   • email_con – the contact's email address.
   • phone_con – the contact's phone number.
   • address_con – the contact’s address.
   • preferred_con – here the preferred means of contact is stored (phone, email, postal mail).
   • message_con – this field stores the content of the email message.

You can find the script needed to create an identical table structure inside the attached samples, in the contact_form.sql file.

Note: The SQL code in contact_form.sql is for a MySQL database. If you are using another database server, or you want to try this tutorial on a different database, you will have to use a similar database structure.

Note: The departments stored in the department_dep table all have dummy e-mail addresses. To be able to see the sent message, you will need to replace them with real e-mail addresses.

Once you have created the index of your site, open it, and if you haven't already, create a database connection to the tables you've just created. Throughout this tutorial, the connection used will be called connForm.

After the connection has been created, you also need to setup the SMTP server to use for sending e-mails.

1. Open the Developer Toolbox Control Panel. You can access it in two ways:
   • From the Developer Toolbox tab of the Insert bar by pressing the last button.
   • From the Server Behaviors tab, by pressing the Plus (+) button, and then selecting Developer Toolbox -> Control Panel.
2. Click on the image in front of the label E-mail settings
3. In the dialog that opens you will need to enter the following information:
   • Mail server – the hostname or IP of the SMTP server.
   • Port – the port to use. The default (25) is automatically prefilled.
   • Username – the username needed to authenticate to the SMTP server.
   • Password – the password needed to authenticate to the SMTP server.
   • Default sender – this address will be used if you do not specify an e-mail address for the From field.

Note: For the PHP server model, if the SMTP settings have been set in the php.ini configuration file, this step can be skipped as the ones from php.ini will be used.

Having completed all of the prerequisites, it is time to move on and start building your application in the next section.

Page 2 of 4

Previous Page

Next Page