Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Follow Us on Twitter Our YouTube.com Channel Facebook Page

PHP Contact Form and Form Validation in Dreamweaver

Create a Luxury PHP Contact Form and Form Validator. Style a modern Contact Form and then attach a Moo Tools Javascript Validation Engine and a back-up PHP form validator. The Contact Form will output to a 'thank you' message and then timed redirect to a page of your choice! Link to Part 2

PHP Contact Form and Form Validator - Discussion

Check out a completed Contact Form here: Contact Form.

contact form image

I originally started work on this Contact Form and Form Validation tutorial in Dreamweaver CS5 way back in October of last year but alas, I had to abandon the project due to existing work commitments and because I took on way too much freelance work. But every now and then I would open up the web form and contact form script and try to find ways to improve the web form and find out how best to deliver a PHP contact form in a concise Dreamweaver tutorial that even a beginner would be able to follow. I think I cracked it.



What I ended up producing was a two part Dreamweaver CS5 video tutorial which not only explains tentatively how to build a contemporary and professional email contact form, but also shows how to process the php contact form and take the message from form to email.

But that wasn’t all that was focused upon in this Dreamweaver CS5 contact form tutorial. I wanted to go beyond the form mail process.I wanted to give a total beginner the ability to connect an advanced form validation system to their email contact form.

I wanted to give a total beginner the ability to connect an advanced form validation system to their email contact form.

A form validation script that would protect the php contact form from email injection and help to keep the recipients email address as free from spam as a form validation system would allow.



I decided to split the tutorial into two parts. The first part of the Dreamweaver CS5 email contact form tutorial would concentrate on the design and structure of the contact form. The web form needed to be styled in a progressive and modern fashion and also properly prepared so that a beginner could easy attach the necessary form to email contact form scripts which would process the web form and send the message to the email address specified on the contact form. The contact form also needed to be designed to take a snazzy and modern moo tools instant client side form validation script.

form validation image

If however javascript was turned off in someone’s browser or a spam bot was trying to bypass the javascript form validation, a back-up php contact form validation script would also need to be attached to the contact form which would kick into action to protect the email recipient.



I wanted to go even further than just creating a contact form tutorial using two types of form validation. So once the contact form does pass the contact form validation process and the message is sent to the recipient, a thank you message appears to the person who submits the form. This message can be programmed to contain anything from a simple thank you, an image and a message or an invitation of some kind.

This Dreamweaver CS5 video tutorial also shows you how to place an inline timed javascript redirect which will countdown to zero and redirect the page to whichever URL you specify.

This Dreamweaver CS5 video tutorial also shows you how to place an inline timed javascript redirect which will countdown to zero and redirect the page to whichever URL you specify.

The email contact form can redirect to a sales page or even your homepage. You could also just redirect the formmail page back to the PHP contact form and let the user navigate away from the web form themselves.




The last step in this Dreamweaver CS5 PHP contact form tutorial is to add the finishing touches to the styling of our email contact form. We move away from inserting the contact form script, the form validation and the web form redirect that is placed after the user submits the form, and back to the contact form input areas where we shall add pseudo selectors to add a hover effect for when someone clicks inside of each contact form input. We start by changing the color of the contact form inputs from white to a light grey color; although once you learn how to style the form inputs, you can change the forms inputs to whatever you want them to be.

We then add a CSS Pseudo selectors which will change the color back to whatever you choose only when someone clicks inside of the form input area. This adds a nice styling touch to our email contact from and give the web form filler some useful feedback as to the position of their cursor.



blog comments powered by Disqus


Dreamweaver Website Templates

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials

paypal