2torial Blog|photoshop tutorials, website design tutorials and graphic design articles and tutorials

2torial Blog RSS

Form Validation using PHP

Filed Under (Forms, Web Design) by Dave on 05-17-2008

Tagged Under : form validation, html & php E-mail form, PHP email script

On an earlier tutorial I wrote about how to create and send an email form using html and a basic php script. Today I’ll take it up a level and re-write that script using the if, else conditional and empty() function to include form validation.

Using an if, else conditional: if (condition) {do something} else { do this} , we can make certain fields of our form required that they be filled out. Let’s start by making a basic form with first name, last name, email and comments as our text inputs. Copy the following code into a text document then save and name it form.html:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Feedback Form</title>

<style type=”text/css”>
<!–
#form {
width: 500px;
margin-right: auto;
margin-left: auto;
}
–>
</style>

</head>

<body>
<div id=”form”>

<form action=”sendmail.php” method=”post”>
<fieldset><legend>Enter your information in the form below.</legend><br />
First Name:<br/>
<input type=”text” name=”fname” size=”20″ maxlength=”40″ /><br /><br />
Last Name:<br/>
<input type=”text” name=”lname” size=”40″ maxlength=”60″/><br /><br />
E-Mail:<br />
<input type=”text” name=”email” size=”40″ maxlength=”60″/><br /><br />
Comments:<br />
<textarea name=”comments” cols=”40″ rows=”7″/></textarea>
</fieldset>
<div align=”center”><input type=”reset” />
<input type=”submit” name=”submit” value=”Submit my information” /></div>

</form>

</div>

</body>
</html
>

The action for the form is the same as the last form tutorial (send.php) but we’ll re-write it now to include the changes. The easiest way to check to see if a user has typed in a value in the text boxes is to use the empty() function. Using the old send.php the code looked like this for the Name variable: $msg = “Name; $_POST[name]\n”; . Using the empty() function and an if, else conditional to make sure the user typed in a value for the “first name” text box, the revised script is written like this:

if (!empty($_POST['fname'])){
$msg = “fname; $_POST[fname]\n”;
}else{
$fname = NULL;
echo “Please fill out your first name.<br />”;
}

In the above script the empty() function checks to see if the “first name” box has a value. If yes, the value of the $fname variable would be sent to the recipients email. If the box is empty the $fname variable is set to NULL and the user sees the message “please fill out your first name” followed by a line break <br />. The “\n” that you see in the string simply adds a line break to the information being sent so that when the recipient receives the email, its not one continuous line.

So, the entire PHP script to check all text inputs is:

<?php

if (!empty($_POST['fname'])){
$msg = “fname; $_POST[fname]\n”;
}else{
$fname = NULL;
echo “Please fill out your first name.<br />”;
}
if (!empty($_POST['lname'])){
$msg .= “lname: $_POST[lname]\n”;
}else{
$lname = NULL;
echo “Please fill out your last name.<br />”;
}
if (!empty($_POST['email'])){
$msg .= “email: $_POST[email]\n”;
}else{
$email = NULL;
echo “Please leave your email address.<br />”;
}
if (!empty($_POST['comments'])){
$msg .= “comments: $_POST[comments]\n”;
}else{
$comments = NULL;
echo “You forgot to leave a comment.<br />”;
}
$recipient = “yourname@yourdomain.com”;
$subject = “Form Feedback”;
$mailheaders = “Reply-to: $_POST[email]“;

//send the mail

mail($recipient, $subject, $msg, $mailheaders);

?>

Put this between the body tags of a new html document (make sure to change the $recipient to your email address) then save and name it send.php . Style the form.html to match your website then upload both the form.html and send.php to your server in the same directory you keep all of your other web site pages, and your done.

Share and Enjoy:
  • StumbleUpon
  • Digg
  • Technorati
  • del.icio.us
  • Facebook
  • YahooMyWeb
  • Google Bookmarks
  • blogmarks
(3) Comments
Read More

Comments

  1. clarice said...
    Posted on: 27/Jun/2008 at 11:06

    Nice Site!
    http://google.com

  2. Azhar said...
    Posted on: 24/Jan/2009 at 06:01

    nice work

  3. photoshop king said...
    Posted on: 3/Mar/2009 at 07:03

    Nice, I’m going to try this out

Leave a Reply

Search:
Graphic Design Blogs - Blog Catalog Blog Directory Join My Community at MyBloglog! blogarama - the blog directory Add to Technorati Favorites
  • September 2010
    S M T W T F S
    « Dec «-»  
     1234
    567891011
    12131415161718
    19202122232425
    2627282930  
  • Categories

    • After Effects (3)
    • Photoshop (18)
      • Graphic Design (11)
      • Navigation (1)
      • Photo Manipulation (1)
      • Text Effects (5)
    • Web Design (7)
      • CSS (3)
      • Dreamweaver (2)
      • Forms (2)
      • Web Navigation (1)
  • Recent Posts

    • Age Progression
    • Photoshop Brushes
    • Photoshop Matte Painting
    • Create a Horror Face in Photoshop
    • Create a Planet and Outer Space Scene
    • 3D Photoshop text tutorial
    • Photoshop Displacement effects
    • Photo Effect – fade into line drawing
  • Archives

    • December 2008
    • November 2008
    • August 2008
    • July 2008
    • June 2008
    • May 2008
  • Pages

    • About
    • Contact
  • Meta

    • Register
    • Log in
    • Entries RSS
    • Comments RSS
    • WordPress.org
  • Tags

    3 column layout 3d text Absolute Positioning After Effects Expressions After Effects shatter award winning web design Blend modes cool text effects create planet CSS CSS in Dreamweaver CSS menu Displacement effects Displacement Maps Dreamweaver tutorials form validation Grapic Design html & php E-mail form html & php mail form Image effects mail form Photo Effects Photoshop Photoshop & Dreamweaver Photoshop brushes Photoshop buttons photoshop displacement map Photoshop text effects Photshop Matte Painting php e-mail script PHP email script print ad design Space scene Vanishing point filter vista style menu web design colors website navigation Zombie Face
© All Rights Reserved. 2torial Blog