Dreamweaver Email Form Tutorial

This beginner level tutorial is about creating forms in Dreamweaver. You may be familiar with creating web pages in Dreamweaver. This tutorial takes you one step ahead and shows you how to build great interactive forms in Dreamweaver.

The general working of a web form

Before we begin, I would like to get you up to speed with the general working of a form. The form is composed of a front-end and a back-end. The front-end is the HTML form that is displayed to the user in the browser. The front-end also consists of the styling part (known as CSS) and the Javascript validations. The back-end is the script running on your webserver. The back-end script receives the form submission and does the heavy stuff like emailing the form submissions or saving to a database. Both the front-end and the back-end are essential for a functional web form.

In this quick and simple tutorial, we will build an email form in Dreamweaver. We will write the back-end in PHP. PHP is a simple, easy, popular server-side scripting language.

We will be creating a simple feedback form with fields: name, email and message. We will also look at how we can label the form elements, align them so that they look good and finally some validation right on the client side.

On the back-end, we will create a simple PHP script which will email the form submissions and also validate the input on the server side. Validation on the server side is necessary in case the user had disabled JavaScript on their browser. It is always good to do validations on the server side as well.

Create the HTML form

So let us head on and create our form using Dreamweaver. We will create a new HTML file “form.html” which will be our form page. We will then insert the input elements. This can either be done using code or using the buttons below the menu bar.

For this demonstration, we will do it the easy way and use the buttons. In case you do not see them, go to Window then Insert. In the toolbox that appears, click on the dropdown named “Common” then select the Form option.

The form tools will now appear:

You can split the code view and the design view into two or work entirely in design view. Now drag a form onto the design view and you will see some code being displayed in the code view. You can edit the code and change the name of the form from “form1″ into something more descriptive.

Next, drag a text field from the Form tools and drop it onto the form in the design view. A dialog box will appear where you can specify the label and id for the text field you have inserted into the form. Do this for the name, email and message fields labeling each one correctly in the dialog box that appears. At this point, the inputs will be aligned in a straight line with the overflow going to the next line. Not to worry as we can get them all separated by adding a bit of code. In the code view, place the paragraph tags around each of the labels for the controls. Opening paragraph tags look like this <p>. You should also place a closing tag >/p< at the end of the text field.

Next, we will add a button that will be used to submit the form. Navigate to the last paragraph tag you entered and click on the button labelled “Button” in the form tools. In the dialog box that comes up, select “submit” in the drop down list.

Our form will now look like this:

At this point, it does not look that appealing to the eye  so we will style it using a bit of CSS code. Type the following code inside the html code inside the

tags.

label {   display: block;   float: left;   width : 120px;    }

The form appears like this now:

Javascript Validations

We can now include some validation on the client side using simple JavaScript:

function validateForm() {     var name=document.forms["feedbackForm"]["name"].value;     if (name==null || name=="")     {         alert("Name cannot be left blank");         return false;     }           var z=document.forms["feedbackForm"]["message"].value;     if (z==null || z=="")       {       alert("Please Enter a Message");       return false;       } }

Email the form submission using PHP back-end script

Now, we would like to have the feedback sent to us via email. This can be done only on the server-side. We will use a piece of PHP script which will make use of the mail() function to send the contents of the feedback form to an email that we specify. We can do this using the following code segment.

<?php if(!isset($_POST['submit'])) {     //This page should not be accessed directly. Need to submit the form.     echo "error; you need to submit the form!"; } $name = $_POST['name']; $visitor_email = $_POST['email']; $message = $_POST['message'];   //Validate first if(empty($name)||empty($visitor_email)) {     echo "Name and email are mandatory!";     exit; }   $email_from = 'tom@amazing-designs.com';//<== Put your email address here $email_subject = "New Form submission"; $email_body = "You have received a new message from the user $name.\n".     "email address: $visitor_email\n".     "Here is the message:\n $message".       $to = "tom@amazing-designs.com";//<== Put your email address here $headers = "From: $email_from \r\n";   //Send the email! mail($to,$email_subject,$email_body,$headers); //done. redirect to thank-you page. header('Location: thank-you.html');     ?>

The first part of the script is a bit of validations to make sure the form is submitted. Then we email the form submission.
Note that the PHP code above redirects to a thank-you.html page after successful form submission. You can change this to any page on your website. Just make sure that your user gets the message that the form is submitted.
Once all your pages – the form page, the PHP script and thank you page – are ready, just upload to your website and test it out.