Publishing System Settings Logout Login Register
Simple E-Mail Response Form
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on February 5th, 2007
9460 views
PHP Coding
Ok, I am going to teach you have to make a simple contact form, with a bit of CSS added.
I am going to assume you have knowledge of Dreamweaver's layout and functions.

Ok, so, first off create a form in Dreamweaver in a PHP page.



Now set the forms properties so that the form posts to contact.php. Now insert a Div inside the form. Delete the text that comes with the form. Now create a text input field. See the image below and copy the details from it.



Now select the text field you just made and go to the Property Inspector, change the name of the field to 'name'. Now switch to Code View and find the label for this field. Change the value of for="textfield" to for="name". You need to do this because the balue of the "for" attribute must be the same as the ID.



Repeat everything we just did, adding the Div, text field (just don't add a new form). But, this time change everything for the text field from "name" to "email". Once that is all done add a third div tag and insert another text field, give this a label of comments, change the properties to 'comments' in the Code View. Change the Character Width to 30 and Number of Lines to 6.



If you know nothing about PHP and this is purely a copy/paste job then you will include this, if you know a bit about PHP you can get rid of this if you wish. It isn't essential, I will show you how to do it, purely to show you what can be done, but I never use this... Anyway, add a Div tag and insert a checkbox with a label of Add me to your mailing list. Select it and in the Property Inspector set the name to mailing and the checked value to true. The default should be set as "unchecked". Go into the Code View and edit the attribute tags.

Now add a Submit button, click no label tag in the window that pops up asking you for tag stuff. In the Property Inspector give the button the value of Submit


Now lets add some CSS to it, make it look more user friendly. In the CSS panel click Add a New CSS Rule. It will pop up with a box, change it to the settings in the picture below.



Now a box will pop up, if you have never seen this before, it is Dreamweaver's CSS editing box, you can put in all your CSS properties in a user interface, rather than writing out the code yourself. So, lets style the body, make the font: Verdana, the colour #000000 and the size 0.8 ems. Click ok, now your text should go from the default Times New Roman to Verdana.

We need all the labels to line up, so create a rule for the label tag and go to the Box tab, set the width to 200px and float to left.



Now create a new style called #form 1 div, this will style all the divs inside the form. In the Box tab, set the clear property to left and uncheck the margin's Same for all box, set the Top as 10.

Create a new CSS rule called .text. This will style the input fields. Go to Border and set the style as inset, the width as 2 pixels and the colour as #996666. Now go to the Box tab and set the padding as 0.2 ems for all (left, right etc) & set the width as 300 pixels. Click Ok and set the text fields CSS as the rule we just created in the property inspector.



Now we are going to style the submit buttom. Create a new style and call it .btn. Give the button a border of solid & 2 pixels. In the Box tab give it 0.2 ems of padding. Choose a background colour and hit enter. Apply the class to your button using the Property Inspector.

We have now finished our form!




Now it's time to code!

Switch to code view, which we will be using from now on. Go to the very top of the code. Firstly enter:


<?php
if(isset($_POST['Submit'])) {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $comments = $_POST['comments'];
    $mailing = $_POST['mailing'];



This must go at the very top of your document, before the <html> tag.

All this code does is check to see if the form has been posted (which happens when you press submit) and turn the content in the fields into variables.

You would get lots of empty posts if you allowed the users to submit the form without anything in the fields.

So, add this straight after the code above


if($name == '' or $email == '' or $comments == '') {
        $err = true;
        $msg = 'Please complete your name, email address and comments to submit the form.';
    }


Now we need to display the message, go to then end of the body tag and press enter to go onto a new line. Enter:

<?php
if($err == true) {
    echo '<p class="error">'. $msg . '</p>';
}
?>


This will echo (display) the error message if the form hasn't got anything in it.

We just gave p a class of .error. So create a new style, make it a class and call it .error. Make the font weight bold and the colour #990000.

Losing Data

If the user submits the form and misses out a field, the error message will be shown and the user will loose their data. To solve this, we can use the code we wrote at the top of the page to our advantage. We turned the field content into variables, so all we have to do is echo them back out again.

Go to your name field in code view and enter this:

value="<?php echo $name; ?>"


Do that for every field (apart from the mailing one) and change $name to $mail and $comments respectively. This will stop the user loosing their data.

Add an else comment after the } to the end of the code we wrote at the top of the page.

Now enter this code:

       $mailmsg = 'The following email has been sent from the contact form:' . "nn";
        $mailmsg.= 'Name: ' . $name . "n";
        $mailmsg.= 'Email: ' . $email . "n";
        $mailmsg.= 'Comments: ' . $comments . "n";


This basically will put all the data into a non-geek e-mail message.

Now we will check the mailing box preferences. Add this to the bottom of the code.

        if($mailing == 'true') {
            $mailmsg.= 'I would like to be added to the mailing list';
        }


This will put "I would like to be added to the mailing list" into the e-mail if the user has checked the box.

Now we will check for spam.

        if (eregi("r",$email) || eregi("n",$email)){
            die ("spam!");

        } else {


This just checks for spam in the fields.

Now we need to actually send the e-mail. Again add this to the bottom of the code at the top of the page.

            if(mail('[email protected]','Contact Form', $mailmsg, "From: [email protected]")) {
                header("Location: thankyou.html");
            }
        }
    }
}
?>


This just sends the email. Change the emails to yours.

All the coding is done!

Create a new page and call it thankyou.html. Just enter a message like:

Thanks for filling out my form.

The Contact form redirects to thankyou.html after it has finished. If you wish to change it, change thankyou.html to a page of your choice.

Full top of the page code:

<?php
if(isset($_POST['Submit'])) {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $comments = $_POST['comments'];
    $mailing = $_POST['mailing'];
    if($name == '' or $email == '' or $comments == '') {
        $err = true;
        $msg = 'Please complete your name, email address and comments to submit the form.';
    } else {
        $mailmsg = 'The following email has been sent from the contact form:' . "nn";
        $mailmsg.= 'Name: ' . $name . "n";
        $mailmsg.= 'Email: ' . $email . "n";
        $mailmsg.= 'Comments: ' . $comments . "n";
        if($mailing == 'true') {
            $mailmsg.= 'I would like to be added to the mailing list';
        }
        if (eregi("r",$email) || eregi("n",$email)){
            die ("spam!");

        } else {
            if(mail('[email protected]','Contact Form', $mailmsg, "From: [email protected]")) {
                header("Location: thankyou.html");
            }
        }
    }
}
?>


That's it! Just test the form now. And enjoy.

Thanks for using my tutorial.
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
jold101

Am I suppose to write something interesting here?
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top