How to create a Contact Form with Validation in Dreamweaver?

Labels: , · Posted by at
First of all, select "FORM" from the insert tab as shown in figure(1).
figure(1)

This will create a form indicated with red dots. [figure(2)]

figure(2)

Now add a text field like in figure(3).
figure(3)

Give it a label of Name:
figure(4)

This will create a text box with label "Name:"  [figure(5)]
figure(5)

Simply repeat a step to create another text field with label "E-mail:" [figure(6)]
figure(6)
 Now select the Text Area from the bar where you select the Text Field and give it a label "Message:". It will look like this:
figure(7)

Now add buttons through which we can submit or reset our form. Select Button
and press OK.
figure(8)

Now you can see in the below picture that couple of buttons are added to submit and reset our form. But both have the same value i.e. Submit and both will submit the form but we want one to submit and other one to reset the form. For this change the value of the second button as shown in figure(9) and its action to Reset Form.
figure(9)

Now we have completed our work. The form will look like this:
figure(10)


Now to validate our form, go to Tag Inspector and open Behaviors tab and click on the plus sign. [figure(11)]
figure(11)

Select "Validate Form"
figure(12)


Validate the form as your requirement.
figure(13)
 Run the webpage in the browser and test your work.
figure(14)

Hope its helpful...

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)