Create a Form in Dreamweaver
In this Dreamweaver Form Tutorial I will show you how to create and style a form in Dreamweaver. I hope it helps!
Creating your first 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.4That 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.
Styling your Dreamweaver Form
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
1. Styling the Form
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.4Show 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.5Selector 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) 2. Styling the Textareas
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.
More Dreamweaver Tutorials
Fetching RSS feed... please stand byby David_Sa
Hi, my name is David. I'm writing about anything that comes in my way. (Often some tech stuff) (more)
