Dreamweaver Form

1. Open or create a new webpage and place the insertion point where you want to insert your Form.
2. Select the Form Tab on the insert panel and insert a Form by clicking on the Form icon. Fig.1

In design view the form is shown as a red dotted outline. If the Form isn't visible check that Invisible Elements is selected. (View > Visual Aids > Invisible Elements)

3. Select your just created Form by clicking on the red outline.
4. To create a simple mailto function that will send the form to any given email address go down to the Properties Inspector and add the following without the "".

Action: "mailto:AnyEmail@Address.com"

Select "POST" from the Methods dropdown.

5. Pace your marker inside the Form and insert the Form Objects you need either by going to Insert > Form menu or from the Form category in the Insert Panel.

In this example I'm inserting one Text Field for Name and one Text Area for leaving a comment.

Give your Form Object an ID and Label in the popup dialog. Fig.3
The Label is the text that will appear as a description before the Object.

6. Insert a Submit Button by clicking on the Button Icon in the Insert Panel. Name it something like Send or Submit and leave the rest of the settings as default. Fig.4

That is how simple it is to create a Dreamweaver CS3 Form that uses the visitors email client/program to send a form directly to your email.

In this second part I will show you how you can style your Dreamweaver Form using CSS. If you have already selected a color scheme for your website this is how you can implement it to your form.

This is how my form looks like before I start applying CSS rules. The first image shows you how it looks in Dreamweaver Design View and the second one in my Web Browser. Fig.1, Fig.2

Styling the Dreamweaver Form is the first thing I do when the form is complete.
In Fig.1 you can see the form being marked by a red outline, all the form objects such as "Textareas" and "Radio Buttons" is placed inside this red line.

When styling the form I usually do one of two things, I either blend it in with the rest of my page or I use a different color to catch the visitors eyes. Let's get started!

1. Select the form by clicking on the red outline.
2. Go down to the Properties Inspector and give the Form a name. (This is the ID of your form, it should be specific and something that's logic. If you decide to go back and change something the next year you should understand it) Fig.3

In this tutorial I'll just name it "comment".

3. Create a new CSS Rule by clicking on the "New CSS Rule" icon in the CSS Panel. Fig.4

Show the CSS Panel by going to Window > CSS Styles, or Shift+F11.

4. In the New CSS Rule dialog box enter the following and press OK. Fig.5

Selector Type: Advanced
Selector: #comment (The ID of your Form plus a #)
Define in: This Document Only (This is where your CSS Rule will be saved)

5. In the CSS Rule definition dialog change the following.

Category Background > Background color: #0066FF (Fig.6)

Category Box > Width: 400 pixels (Fig.7)

Category Border > Style: dashed
> Width: 3 pixels
> Color: #000099 (Fig.8)

Changing these things really makes a big difference, it will give your site a more professional look than if you use the standard form style.

As you can see in Fig.10 the comment textarea is way too big, read on to learn how to change it.

Fig.9 (In Design view)

Fig.10 (Preview in Web Browser)

Next I want to show you how to style the two Text areas.

1. Use step 1-4 from before but apply it to the first text field. Name is something like "name_field" or "name_textarea". Remember to name the CSS Rule the same way (with a # before), otherwise it won't link.

2. When the CSS Rule is created try entering the following settings.

Category Type > Font: Arial, Helvetica, sans-serif
> Size: 20 pixels
> Weight: bold
> Color: #000000 (Fig.11)

Category Box > Width: 300 pixels

Category Border > Style: dashed
> Width: 2 pixels
> Color: #000099

3. Repeat this for the second textarea but with a different name of course, I used "comment_field".
Change the Font to Arial and the Size to 14 px then leave the other Font settings as default. Use the same Box and Border settings as for the Name textarea.
This will give you a Dreamweaver Form that looks something like this. Fig.12

If you want some more space around the text in the comment text area try to add 5 px padding in the Box Category of the CSS Rule.

Now you understand the basics of styling your Dreamweaver Form. Try changing the look of your Submit button by using the same steps as above. Everything you can name is possible to style.

Play around with the different CSS settings! We just changed a few of them and the deference is huge, imagine what you can do.