Dreamweaver Form

In this Dreamweaver Form Tutorial 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.

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.
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

2. 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 deferens is huge, imagine what you can do.