Programmer's Interview 101: Create a Simple Single Page Contact Form Using PHP

Problem

Create a PHP single page named contact.php that accepts inputs and sends email to a certain recipient. Basically, this serves as the usual contact page used on a PHP based website.

Analysis

We can divide the problem into two parts:

• A script part that verifies the input and sends to an email
• A layout or UI part that accepts inputs

The Code

PHP

This is the server side code that sends the message to the email using the mail(). This PHP function allows you to send e-mails directly from a script. The sample below sends a simple text email.

NOTE: The code requires you to have an installed and working email system in your server to function. It is also important to set the php.ini configurations properly. Setting this up will not be discussed in this tutorial.

<?php
// disregard error reporting on the front end
error_reporting(0);

// checks if post exists, then send the message to $to email
if($_POST['subject']){
 $to = 'EMAIL@HERE.COM'; // replace this with a proper email
 $subject = $_POST['subject'];
 $from = $_POST['email'];
 $message = $_POST['message'];
 $message = "Name : ".$name."\nSite: ".$_POST['site']."\nEmail : ".$from."\nMessage : ".$message;
 $headers = "From:" . $from;
 mail($to,$subject,$message,$headers);
}

?>

HTML

This part of the code gives you a HTML layout that accepts inputs. It is then sent to the same URL location ($_SERVER['PHP_SELF']) where the action above will take place. Though, upon clicking the submit button, a script validation will take place first before proceeding.

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" onSubmit="return validate(this);">
  
    <fieldset id="user-details">
  <label for="name">Name *</label><br/>
  <input type="text" name="name" id="name" value="" required="required" /><br/>
    
  <label for="email">Email *</label><br/>
  <input type="email" name="email" id="email" value="" required="required"  /> <br/>
    
  <label for="site">Site</label> <br/>
  <input type="url" name="site" id="site" value="" /><br/>
    
  <label for="subject">Subject *</label><br/>
  <input type="text" name="subject" id="subject" value="" required="required" /><br/>
  
  <label for="message">Message </label><br/>
  <textarea name="message" id="message" rows="0" cols="0"></textarea><br/>
  
  <input type="submit" value="Send Message" name="submit" id="submit" class="submit" style="width:220px;" />
    </fieldset>
    
</form>

JavaScript

The script validation is merely a checking of data on the client side before passing it to the server functions. Here simple validation takes place in case the browser doesn't support the HTML5 code we used above.

<script>
/* 
 * THIS IS JUST A BASIC JAVASCRIPT CONFIRMATION ON THE FRONT END.
 * YOU CAN ACTUALLY DO A BETTER CHECKING ON THE SERVER SIDE USING PHP ON THIS SAME PAGE.
 */

function validate(form){
 var error="";

 if(form.name.value == ""){
  error=error+"Name could not be blank.\n";
 }

 // checks 
 var email = document.getElementById('email').value;
 if(form.email.value == "")
  error=error+"Email could not be blank.\n";
 else{
  atpos = email.indexOf("@");
  dotpos = email.lastIndexOf(".");
  if (atpos &lt; 1 || ( dotpos - atpos &lt; 2 )){
   error=error+"Invalid Email.\n";
  }
 }

 if(form.subject.value == ""){
  error=error+"Subject could not be blank.\n";
 }

 if(error!=""){
  alert('Errors found. Form could not be sent:\n'+error); return false;
 }
 else{
  alert('Sending Message Now.');
 }
}
</script>

Summary of the code

Here is how it will looks like together:

<?php
// disregard error reporting on the front end
error_reporting(0);

// checks if post exists, then send the message to $to email
if($_POST['subject']){
 $to = 'EMAIL@HERE.COM'; // replace this with a proper email
 $subject = $_POST['subject'];
 $from = $_POST['email'];
 $message = $_POST['message'];
 $message = "Name : ".$name."\nSite: ".$_POST['site']."\nEmail : ".$from."\nMessage : ".$message;
 $headers = "From:" . $from;
 mail($to,$subject,$message,$headers);
}

?>

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" onSubmit="return validate(this);">
  
    <fieldset id="user-details">
  <label for="name">Name *</label><br/>
  <input type="text" name="name" id="name" value="" required="required" /><br/>
    
  <label for="email">Email *</label><br/>
  <input type="email" name="email" id="email" value="" required="required"  /> <br/>
    
  <label for="site">Site</label> <br/>
  <input type="url" name="site" id="site" value="" /><br/>
    
  <label for="subject">Subject *</label><br/>
  <input type="text" name="subject" id="subject" value="" required="required" /><br/>
  
  <label for="message">Message </label><br/>
  <textarea name="message" id="message" rows="0" cols="0"></textarea><br/>
  
  <input type="submit" value="Send Message" name="submit" id="submit" class="submit" style="width:220px;" />
    </fieldset>
    
</form>

<script>
/* 
 * THIS IS JUST A BASIC JAVASCRIPT CONFIRMATION ON THE FRONT END.
 * YOU CAN ACTUALLY DO A BETTER CHECKING ON THE SERVER SIDE USING PHP ON THIS SAME PAGE.
 */

function validate(form){
 var error="";

 if(form.name.value == ""){
  error=error+"Name could not be blank.\n";
 }

 // checks 
 var email = document.getElementById('email').value;
 if(form.email.value == "")
  error=error+"Email could not be blank.\n";
 else{
  atpos = email.indexOf("@");
  dotpos = email.lastIndexOf(".");
  if (atpos &lt; 1 || ( dotpos - atpos &lt; 2 )){
   error=error+"Invalid Email.\n";
  }
 }

 if(form.subject.value == ""){
  error=error+"Subject could not be blank.\n";
 }

 if(error!=""){
  alert('Errors found. Form could not be sent:\n'+error); return false;
 }
 else{
  alert('Sending Message Now.');
 }
}
</script>

Now just add some basic HTML tags and CSS styling and the page should now be fine! :)

Download contact.php file sample