PHP Form

One of the most common active feature a website is the contact form.
I’m going to show you how to create a contact form using PHP.

The complete PHP contact form example will consist of six files. Below’s a brief description of these files.

phpform.htm – The main HTML form code
phpprocess.php – The PHP script which will process the submitted form and send an email
phpsettings.php – This is the file to configure the form
phpstyle.css – Basic CSS styles to format the form
phpvalidation.js – JavaScript validation file use when the form is submitted
phpthanks.htm – Page which hold the Thank you message shown after the form is submitted.

Here is a screen capture of how the form will appear (this is an image, not a function form!).

File: phpform.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>php Contact Form</title>
	<script src="phpvalidation.js"></script>
	<script>
	required.add('Full_Name','NOT_EMPTY','Full Name');
	required.add('Email_Address','EMAIL','Email Address');
	required.add('Your_Message','NOT_EMPTY','Your Message')
	</script>
	<link rel="stylesheet" type="text/css" href="phpstyles.css">
	</head>
	<body>
	
	<form name="phpform" method="post" action="phpprocess.php" onsubmit="return validate.check(this)">
	<table width="400px" class="cflite">
	<tr>
	 <td colspan="2">
	  <p style="text-align:center">Fields marked with <span class="required_star"> * </span> are required.</p>
	 </td>
	</tr>
	<tr>
	 <td valign="top" class="cflite_td">
	  <label for="Full_Name" class="required">Full Name<span class="required_star"> * </span></label>
	 </td>
	 <td valign="top" class="cflite_td">
	  <input type="text" name="Full_Name" id="Full_Name" maxlength="80" style="width:250px">
	 </td>
	</tr>
	<tr>
	 <td valign="top" class="cflite_td">
	  <label for="Email_Address" class="required">Email Address<span class="required_star"> * </span></label>
	 </td>
	 <td valign="top" class="cflite_td">
	  <input type="text" name="Email_Address" id="Email_Address" maxlength="100" style="width:250px">
	 </td>
	</tr>
	<tr>
	 <td valign="top" class="cflite_td">
	  <label for="Telephone_Number" class="not-required">Telephone Number</label>
	 </td>
	 <td valign="top" class="cflite_td">
	  <input type="text" name="Telephone_Number" id="Telephone_Number" maxlength="100" style="width:250px">
	 </td>
	</tr>
	<tr>
	 <td valign="top" class="cflite_td">
	  <label for="Your_Message" class="required">Your Message<span class="required_star"> * </span></label>
	 </td>
	 <td valign="top" class="cflite_td">
	  <textarea style="width:250px;height:120px" name="Your_Message" id="Your_Message" maxlength="2000"></textarea>
	 </td>
	</tr>
	<tr>
	 <td colspan="2" style="text-align:center"  class="cflite_td">
	  <input type="submit" value=" Submit Form ">
	 </td>
	</tr>
	</table>
	</form>
</body>
</html>

File: phpprocess.php

<?php
if(isset($_POST['Email_Address'])) {
	
	include 'phpsettings.php';
	
	function errorfound($error) {
		echo "Sorry, but there were error(s) found with the form you submitted. ";
		echo "These errors appear below.<br /><br />";
		echo $error."<br /><br />";
		echo "Please go back and fix these errors.<br /><br />";
		die();
	}
	
	if(!isset($_POST['Full_Name']) ||
		!isset($_POST['Email_Address']) ||
		!isset($_POST['Telephone_Number']) ||
		!isset($_POST['Your_Message'])) {
		errorfound('We are sorry, but there appears to be a problem with the form you submitted.');		
	}
	
	$full_name = $_POST['Full_Name']; // required
	$email_from = $_POST['Email_Address']; // required
	$telephone = $_POST['Telephone_Number']; // not required
	$comments = $_POST['Your_Message']; // required
	
	$error_message = "";
	$email_exp = "^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$";
  if(!eregi($email_exp,$email_from)) {
  	$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
  }
  if(strlen($full_name) < 2) {
  	$error_message .= 'Your Name does not appear to be valid.<br />';
  }
  if(strlen($comments) < 2) {
  	$error_message .= 'The Comments you entered do not appear to be valid.<br />';
  }
  
  if(strlen($error_message) > 0) {
  	errorfound($error_message);
  }
	$email_message = "Form details below.\r\n";
	
	function clean_string($string) {
	  $bad = array("content-type","bcc:","to:","cc:","href");
	  return str_replace($bad,"",$string);
	}
	
	$email_message .= "Full Name: ".clean_string($full_name)."\r\n";
	$email_message .= "Email: ".clean_string($email_from)."\r\n";
	$email_message .= "Telephone: ".clean_string($telephone)."\r\n";
	$email_message .= "Message: ".clean_string($comments)."\r\n";
	
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
header("Location: $thankyou");
?>
<script>location.replace('<?php echo $thankyou;?>')</script>
<?
}
?>

File: phpsettings.php

<?php

$email_to = "youremailaddress@yourdomain.com"; // your email address
$email_subject = "php Contact Form"; // email subject line
$thankyou = "phpthanks.htm"; // thank you page

?>

File: phpstyle.css

.cflite {
 width: 400px;
 font-family: arial;
}
.cflite_td {
 padding:4px;
 font-size:12px;
}
.cflite p {
 padding:4px;
}
.cflite label {
 padding:4px;
}
label {
 padding-right:10px
}
.required {
 font-weight:bold;
}
.required_star {
 font-weight:bold;
 color:#F00;
}
.not-required {
 font-weight:normal
}

File: phpvalidation.js

function has_id(id) {
  try {
    var tmp = document.getElementById(id).value;
  } catch (e) {
    return false;
  }
  return true;
}
function has_name(nm) {
  try {
    var tmp = cfrm.nm.type;
  } catch (e) {
    return false;
  }
  return true;
}
function $$(id) {
  if (!has_id(id) && !has_name(id)) {
    alert("Field " + id + " does not exist!\n Form validation configuration error.");
    return false;
  }
  if (has_id(id)) {
    return document.getElementById(id).value;
  } else {
    return;
  }
}
function $val(id) {
  return document.getElementById(id);
}

function trim(id) {
  $val(id).value = $val(id).value.replace(/^\s+/, '').replace(/\s+$/, '');
}
var required = {
  field: [],
  add: function (name, type, mess) {
    this.field[this.field.length] = [name, type, mess];
  },
  out: function () {
    return this.field;
  },
  clear: function () {
    this.field = [];
  }
};
var validate = {
  check: function (cform) {
    var error_message = 'Please fix the following errors:\n\n';
    var mess_part = '';
    var to_focus = '';
    var tmp = true;
    for (var i = 0; i < required.field.length; i++) {
      if (this.checkit(required.field[i][0], required.field[i][1], cform)) {} else {
        error_message = error_message + required.field[i][2] + ' must be supplied\n';
        if (has_id(required.field[i][0]) && to_focus.length === 0) {
          to_focus = required.field[i][0];
        }
        tmp = false;
      }
    }
    if (!tmp) {
      alert(error_message);
    }
    if (to_focus.length > 0) {
      document.getElementById(to_focus).focus();
    }
    return tmp;
  },
  checkit: function (cvalue, ctype, cform) {
    if (ctype == "NOT_EMPTY") {
      if (this.trim($$(cvalue)).length < 1) {
        return false;
      } else {
        return true;
      }
    } else if (ctype == "EMAIL") {
      exp = /^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
      if ($$(cvalue).match(exp) == null) {
        return false;
      } else {
        return true;
      }
    }
  },
  trim: function (s) {
    if (s.length > 0) {
      return s.replace(/^\s+/, '').replace(/\s+$/, '');
    } else {
      return s;
    }
  }
};

File: phpthanks.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Thank You</title>
	</head>
	<body>
	<h1>Thank You.</h1>
	<p>We have received your message.</p>
</body>
</html>

After you’ve had a chance to look through the above code, you should notice how things hang together.

Subscribe to RSS feed

PHP Form

Leave a Reply Cancel reply

Archive

Blogroll

Meta

Recent Posts

Tags