FREE Dreamweaver Video Tutorials

home | Dreamweaver Forms

Dreamweaver IconDreamweaver Forms

Creating forms are easy with Dreamweaver, however without any programming knowledge they are useless. Be sure to learn a server side language such as PHP, ColdFusion, ASP or any other language that can process info from your forms to a server.

Here is a great site to teach yourself these languages: http://www.w3schools.com/

Adding a Basic Form:

In this tutorial we will be creating a contact form. Fields that we will include are:

  • First Name
  • Last Name
  • Phone Number
  • Email Address
  • Message

Step 1: From the top menu, go to Insert -> Form -> Text Field. A window will then pop up asking you to fill out some info.

Type a name for the ID and also a Label. I usually just type in the same name for both.

Dreamweaver Form - Input Field

Step 2: If your properties panel isn't open go to Windows -> Properties. Then click on the text field you just inserted. In the properties panel there a few options you can set.

Init Val - this sets the value of your text field, the name you give it will show up in the field.

Char Width - type in a number to set the width. 25 - 40 is a good range to stay within.
Note: this number is not in pixels, so if you type in 100px you will get a huge width.

Max chars - Set the number of characters you want someone to type.

Example Text Field:

Code View:

<input name="First_name" type="text" id="First_name" value="First Name" />

Step 3: Continue to add the rest of your text fields. On our last text field "Message" in the properties panel choose Multi line. This is so people can write a little message or description along with their information before sending.

Another way of doing this is to choose Insert -> Textarea instead of Text Field.

Example Form:

Code View:

<input name="First_Name" type="text" id="First_Name" value="First Name" size="30" /> <input name="Last_Name" type="text" id="Last_Name" value="Last Name" size="30" /> <input name="Phone" type="text" id="Phone" value="Phone Number" size="30" />
<input name="Email_Address" type="text" id="Email_Address" value="Email Address" size="30" />
<textarea name="Message" cols="40" rows="5" id="Message">Message</textarea>

Step 4: Adding a Submit and Reset button. Go to Insert -> Form -> Button. The same panel that showed up for Text Field will appear.

By default the button will say Submit, but you can change the value and action in the properties panel.

Code View:

<input type="submit" name="submit" id="submit" value="Submit" />
<input type="reset" name="reset" id="reset" value="Reset" />