Building a Web Form in Dreamweaver

In this video I'm gonna show you how to build a web form in Dreamweaver...

Download everything we made in this video (ZIP)

Hey everybody, Greg Davis here. In this video I'm gonna show you how to build a web form in Dreamweaver.

Actually, I SHOW you… THIS is the form we are gonna build.

Forms are great, because if your website users wanna send you an email, or order something, they can just type their stuff in, press a button, and be done with it. They don't have to open up an email, they can just go right in, and take care of whatever they wanna do.

Technically, a form is an area on your website where people can fill out information and send it to your server, to an application, like an email marketing software, which will then redirect the information, you could store the information in a database, and do what you have to do with it.

Now, in this video we're not gonna take a look at the programming side of setting up a form. The programming side is creating that application that takes the information from the form and tells it what to do. So we are not gonna code in this video.

All we're gonna do is build this form here in Dreamweaver. If you wanna learn how to code you will have to go to collage and study programming.

But if all you wanna do is get information from a form, and send it to an email address, a pretty simple script can do it for you. You might find a script like that for free, or for like $30 or something, cut and paste some code, and you can make it work without any programming skills.

Now, if you wanna do complex things, like you wanna do email marketing, or you wanna accept credit cards, or maybe you want a membership site, then it will be much easier for you to just go out and buy a software to do those things.

You will find all kinds of great software tools in my online marketing toolkit. There is a link to it below the video in the description. Or just go to my website EasyWebDesignSystem.com, join my list, and I'll send it to you.

So for example, if you wanna do email marketing, then you will need an email marketing software like iContact. If you wanna accept credit cards, you will need a merchant account like PayPal. And if you need a membership site, you can get a membership site software as well. You will find all kinds of great software tools in my toolkit.

Now, let's take a look at setting this form up, because even if you do buy a software, and it gives you the form and everything, you just have to add it to your website, but you still need to know how to create a form, how to edit it, and how to style it.

So I GO back to Dreamweaver, and let's build this form, starting from scratch.

First of all, I'm gonna create a div tag to position my form.

I wanna PUT the form right HERE, I GO to my insert panel, Common, and Insert Div tag.

I'm gonna INSERT my div tag "At insertion point" where I have selected it.

And I'm gonna APPLY a brand new class style to it, and NAME it "formone".

I CLICK New CSS Rule.

It's gonna be a class style, called "formone" there is a period in front of it, because it's gonna be a class style.
And I'm gonna DEFINE my rule inside of "This document only" because I'm creating this class style just for this particular div tag, for my form.

I HIT Ok.

I GO to Box, and the size will BE 400px wide, and 550px tall.

Ok, I'm gonna give it some margin. NOT same for all: Top:30px, Right:auto, Bottom:20px, and Left:auto. I've given it a margin left auto, and a margin right auto just so that I can center it inside of my parent container.

I CLICK Ok, once AGAIN, and HERE is my div tag.

I'm just gonna DELETE this text.

And I'm gonna insert a form. I GO to my Insert panel, FORMS tab, and I SELECT form.

THIS little dashed red box shows up right there. That's my form.

And I'm gonna use a Table to layout my form. I'm SELECTED inside of my form

I GO to my insert panel, COMMON, and I SELECT Table

Ok, let's DO 10 rows, 2 columns, 100% wide, so it's gonna do 100% of the form it is sitting inside of.

And I'm gonna GIVE it some cell padding of 5px.

I CLICK Ok, and HERE is my Table

I'm gonna SELECT the top row, these 2 cells, and MERGE them.

And HERE, I just TYPE in "Enter your information below".

Ok, I SELECT my text, and I BOLD it.

And inside of my table cell, I'm gonna DO a horizontal-align:center.

Vertical-align:bottom.

And I'm gonna RESIZE this table cell to 40px tall.

Ok, I SELECT this cell bellow.

I GO to my INSERT panel, FORMS, and I'm gonna insert a Text Field for getting the first name.

I get THIS dialog box.

The first thing we need to do is set up an ID. And the ID is very important, because it is what your software is going to use to communicate with your form and identify your text field. So when it wants to retrieve the information from this text field, it's gonna be referring to this text field by its ID, or its Name.

I'm gonna GIVE it an ID of "fname"

I use all lowercase, I don't use any special characters, no spaces for the ID.

Now the label is the text that's gonna appear next to your text field. So that's what users are going to see.

I'm gonna TYPE in "First Name:" (and a colon).

And the STYLE, I'm gonna "Attach label tag using for attribute".

And I'm gonna position the label before the form item. That's gonna put it to the left-hand side.

I HIT Ok.

And HERE is my label, and my text field.

I'm gonna SELECT my text field, just the text field, and DRAG it over to this cell.

Now if you SELECT your text field, down HERE you can edit the ID, the character width, the number of maximum characters, and you can also type in some initial value. There are some other things you can do here, but I never use those.

Ok, I'm gonna RESIZE my left-hand column to 155px wide.

And my label is aligned to the left inside of my table cell, so I'm just gonna SELECT these cells on the left-hand side, and I'm gonna DO a horizontal-align:right.

Ok, I SELECT this cell bellow

I GO to my INSERT panel, Forms, and I'm gonna insert an other Text Field for getting the last name

ID will BE "lname" all lowercase, no special characters, no spaces for the ID.

And the label will BE "Last Name:" (and a colon).

I'm gonna "Attach label tag using for attribute".

And I'm gonna position my label before the form item.

I CLICK Ok.

And HERE is my label, and my text field.

Again, I SELECT my text field, and DRAG it over here.

Ok, I SELECT this cell bellow.

And I'm gonna insert an other Text Field for getting the email address.

ID will BE "email" again, all lowercase, no special characters, no spaces for the ID.

And the label will BE "Email:" (and a colon).

Attach label tag using for attribute.

And position my label before the form item.

I HIT Ok.

And HERE we go!

I just SELECT my text field, and DRAG it over here.

Ok, I SELECT this cell bellow on the right-hand side.

And I'm gonna insert a Checkbox Group for product selection.

I'm gonna NAME it "products".

All lowercase, no special characters, because the name is just like the ID of our Text Fields. So that's what our software is going to use to identify this Checkbox Group.

Ok, my first choice will BE "Product 1".

I HIT Tab, and its value will BE "product1" lowercase, no special characters, no spaces.

The LABEL is what users are going to see next to your checkbox. And depending on which box they select, the VALUE is what your software is going to use to identify that checkbox.

Ok, my next choice will BE "Product 2"

I HIT Tab, and its value will BE "product2"

I HIT the plus button to add an other one

And my third choice will BE "Product 3".

I HIT Tab, and its value will BE "product3".

Ok, I'm gonna LAY this Checkbox Group OUT using a Table.

I HIT Ok.

And HERE is my Checkbox Group.

HERE, I just TYPE in "Select products:" (and a colon).

Ok, I SELECT this cell bellow on the right-hand side.

And I'm gonna insert a Radio Group for choosing a delivery method

It's gonna be pretty similar to the Checkbox Group we just did.

The Name will BE "delivery" all lowercase, no special characters

And my first choice will BE "Download" assuming it's a digital product

I HIT Tab, and its value will BE "download" lowercase

My second choice will BE "Box"

I HIT Tab, and its value will BE "box"

I'm gonna LAY this Radio Group OUT using a Table.

I HIT Ok.

And HERE is my Radio Group.

HERE I just TYPE in "Delivery:" (and a colon).

Now with a Radio Group users can only select one particular box. So that's the difference between a Radio Group and a Checkbox Group.

Ok, I SELECT this cell bellow.

And I'm gonna insert a List or Menu, so users can tell me whether they are returning costumers, or not. It's gonna be kind of a drop down menu if you will.

ID will BE "costumer"

The label will BE "Returning costumer?".

Attach label tag using for attribute.

And I'm gonna position my label before the form item.

I HIT Ok.

And HERE is my Menu.

I just SELECT my menu field, and DRAG it over here.

Ok, I SELECT it again, and down HERE I can edit it.

This is a menu right now. You can CONVERT it to a list if you want. A list allows users to select MULTIPLE values using the ctr key. And you can also change the HEIGHT of a list. You can not do those things with a menu, but I don't even need those right now, so I'm gonna STICK with a Menu.

And I'm gonna SET some List values

The first one will BE "Yes"

I HIT Tab, and its value will BE "yes" lowercase.

I ADD an other one.

It's gonna SAY "No".

I HIT Tab, and its value will BE "no" lowercase.

I ADD an other one.

And it's gonna SAY "Choose…"

I'm not gonna set a value for that. I'm just gonna MOVE it up the list all the way up to the top.

I HIT Ok

And I'm gonna SELECT the word "Choose…" HERE in the initially selected box, because that's what I want people to see when they get to this Menu.

Ok, I SELECT this cell bellow

And I'm gonna insert a Textarea for additional comments.

ID will BE "comments"

And the label will BE "Comments:" (and a colon)

Attach label tag using for attribute.

And position my label before the form item.

I HIT Ok.

And there we go!

I SELECT my Textarea, and DRAG it over here.

It's quite large, so I just SELECT it, and I'm gonna SET the character width to 18.

And the number of lines TO 3.

If you do single line, your Textarea will become a Text Field just like the ones we used for the name and email address. And you can also type in some initial value if you want.

Ok, I SELECT this cell bellow.

And I'm gonna insert a Checkbox to make people agree to the terms of service.

ID will BE "terms".

The label will BE "I agree to the terms of service".

Attach label tag using for attribute.

And I'm gonna position my label after the form item. That's gonna put it to the right-hand side.

I HIT Ok.

And HERE it is.

I just SELECT these 2 cells, and MERGE them.

And I DO a horizontal-align:center.

Ok, I SELECT this checkbox, and I'm gonna TYPE in the checked value: "agree".

You can also change the initial state to checked, or unchecked.

Ok, I SELECT this cell bellow.

And I need is a Submit button. I GO to my INSERT panel, Forms, and I SCROLL down a bit.

THERE it is "button" I CLICK it.

ID will BE "submit".

And we don't need a label here, since this is a button. I just HIT Ok.

And HERE is my submit button.

I just SELECT these 2 cells, and MERGE them.

And I DO a horizontal-align:center.

Ok, I SELECT my button.

And down HERE the VALUE is what the button actually says. You can change it here, but I don't wanna change it, I wanna use an image for my button.

So let's GO to Code View.

Ok, THIS is my submit button, since I have selected it.

And you can see a tag HERE that says "type" and it is "submit".

I'm gonna CHANGE the type to "image"

And I have already created an image for this button, I just have to define its source.

So right HERE I'm gonna TYPE in "src" (source).

And I just BROWSE my image. It's called bn_order.

I HIT Ok.

And HERE is the source of my image for this button.

I GO back to Design View.

And my button is now an image, and it looks much better than that default button.

Ok, I also need a background image for my FORM.

I just CLICK inside of my form, and I SELECT my "formone" div tag.

This is the div tag I have created just for this form. It's 400px wide, and 550px tall.

Ok, I'm gonna OPEN UP the Fireworks file of this website.

And I'm gonna create a background image for that div tag.

THIS is the same exact document here that I created back in the first Fireworks video.

I'm just gonna CREATE a brand new Slice

And this is gonna be the background image of my "formone" div tag, so I'm gonna NAME it "bg_formone".

And the size will BE 400px wide, and 550px tall.

Ok, I TURN my slice OFF.

And HERE I can now create my background image.

I'm gonna CREATE a rectangle.

I SELECT it.

And the size will BE 400px wide, and 550px tall.

I just MOVE it to its position.

Ok, I'm gonna GIVE it a white background.

And I need a 2px, grey (#666666) stroke.

I ALIGN stroke to inside, so it's not gonna effect the size of my rectangle.

And I CHANGE the roundness to 15%.

Ok, I TURN my slice back ON.

And I'm gonna export it to PNG32 format.

I just RIGHT,CLICK on the slice (or ctr,click on the mac) and CHOOSE "Export selected slice".

All my website images go into my "images" folder. I CLICK Save.

And I GO back to Dreamweaver.

I GO to my CSS panel, and I'm gonna EDIT my "formone" class style. I DOUBLE CLICK it.

I get this CSS dialog box.

I GO to background.

And I just BROWSE my background image.

"bg_formone"

I CLICK Ok, once again.

And there we go!

I TURN live view ON, and HERE is my form.

Now, you are gonna need some script to really make your form work.

If you work with a software that gives you the form, then you won't have to worry about that. You just cut and paste the code, edit a little bit, and it's gonna work. Or if you work with a programmer, then you can just pass it over to him, and he or she is gonna take care of it for you.

So this is how you build a form here in Dreamweaver. I end this video now. I hope you enjoyed it. If you wanna get more videos from me, go to my website EasyWebDesignSystem.com, and join my list.

Thanks a lot for watching, and see you in the next video. Bye!

Next video:

Dreamweaver CSS Website Layouts>>>

All videos in recommended learning order:

How to design a website using Adobe Fireworks>>>

Building a Website Start To Finish With Dreamweaver>>>

How To Embed a YouTube Video On Your Website>>>

Floating Div Tags in Dreamweaver>>>

How To Create a Table in Dreamweaver>>>

Building a Web From in Dreamweaver>>>

Dreamweaver CSS Website Layouts>>>

Creating a CSS Drop Down Menu in Dreamweaver>>>