Home About Us Contact Us Advertising Submit Site Link to Us Terms of Use Privacy Policy
 
 
NAVIGATION
DIRECTORY

How to Create a 'Contact Us' Form

Published: October 4 2007

This guide takes you through the process of creating a contact us form on your webiste. The examples use PHP to process the form inputs.

INTRODUCTION

Most websites have a "Contact Us" form whereby visitors can submit a question or comment. In many cases, the information submitted is emailed to the website owner. This guide will take you through the steps of creating a contact form for your own website. It is assumed you have a basic understanding of HTML.

Creating a contact form, or any form in general, consists of two tasks:

  1. Creating an input form using HTML into which visitors can enter information
  2. Writing a script to handle the form details once they have been submitted
This article provides a guide for each step, starting with the input form.

CREATING THE INPUT FORM

The input form enables visitors to input their details. The one used below employs simple HTML using tables.

Full name
Email address
Message
 

<form action="script_name.php" method="POST">
<table border="0" cellpadding="5" cellspacing="0">
  <tr>
    <td>Full name</td>
    <td><input type="text" size="30" maxlength="80" name="name" /></td>
  </tr>
  <tr>
    <td>Email address</td>
    <td><input type="text" size="30" maxlength="80" name="email" /></td>
  </tr>
  <tr>
    <td>Message</td>
    <td><textarea name="message" cols="29" rows="5"></textarea></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="submit" value="Submit Message" /></td>
  </tr>
</table>
</form>

This form has four inputs, name, email, message, and the submit button. When the submit button is pressed by the visitor, the variables are sent using the POST method to script_name.php [1] [2].

You will note that script_name.php has a .php extension rather than an HTML extension. The reason for this will be discussed in the next section.

CREATING THE FORM HANDLING SCRIPT

Now that the form has been written, you need a script that can handle the submitted details. This script uses a .php extension because it uses the scripting language PHP to handle the form submission. Alternatives include a CGI script or ASP script. PHP has been chosen here because it is widely supported by hosting companies. If you are unsure whether your web host supports PHP, just ask your host, or check out the package details section of their website.

The script will consist of three sections

  1. Variable collection and validation
  2. Emailing the data to yourself
  3. Display of confirmation that the details have been submitted
The code below contains comments in the form: // comment goes here

<?php
if (isset($_POST['submit'])) {
  // Collect variables
  $name = $_POST['name'];
  $email = $_POST['email'];
  $message = $_POST['message'];
	
  // Send email
  $body = "The following feedback has been submitted:\n\n";
  $body .= "Name: $name\n";
  $body .= "Email: $email\n";
  $body .= "Message: $message";
  mail ("you@yoursite.com","Feedback Received",$body,"From: you@yoursite.com");
	
  // Output confirmation
  echo "<p>Your message has been received.</p>";
}
?>

The outputted email will take the format:

The following feedback has been submitted: 

Name: Bob Smith
Email: bobsmith@hotmail.com 
Message: I think your site is great!

The script first checks that the form has been submitted. If it has, it saves the submitted POST variables as PHP variables. It then constructs the body of the email message. The code \n is used to start a new line within the email. The script then sends the email using the mail() function, which takes the form mail("Your email address","subject","body","headers") [3]. Finally, the script outputs a message to the user.

This script can be placed within normal HTML tags, i.e.

<html>
<body>
  <h1>Contact Us</h1>
  <?php
    // Code goes here ..
  ?>
</body>
</html>

While this script does the job, it isn't 100% robust. It doesn't validate whether the user has submitted appropriate details, or even if the user has submitted variables at all. Depending on your server settings, the script may also struggle if a user submitted a message that contained single or double quotation marks.

Below is a slightly better script. This version employs simple validation for the form inputs. While it isn't bullet proof, it should serve the needs of most small websites.

<?php
if (isset($_POST['submit'])) {
  // Collect variables
  $name = stripslashes($_POST['name']);
  $email = stripslashes($_POST['email']);
  $message = stripslashes($_POST['message']);

  // Validate variables
  $okay = true;
  if (strlen($name)==0) {
    $okay = false;
    echo "<p>Please input a valid name.</p>";
  }
  if (strlen($message)==0) {
    $okay = false;
    echo "<p>Please input a valid message.</p>";
  }
  if (eregi("\r", $email) ||
    eregi("\n", $email) ||
    eregi("%0a", $email) ||
    eregi("%0d", $email) ||
    eregi("Content-Type:", $email) ||
    eregi("to:", $email) ||
    !eregi("@", $email) ||
    !eregi("\.", $email) ||
    eregi("cc:", $email)) {
      $okay = false;
      echo "<p>Please input a valid email address.</p>";
  }
	
  // If all is well, send the email
  if ($okay == true) {
    // Send email
    $body = "The following feedback has been submitted:\n\n";
    $body .= "Name: $name\n";
    $body .= "Email: $email\n";
    $body .= "Message: $message";
    mail ("you@yoursite.com","Feedback Received",$body,"From: $email");
	
    // Output confirmation
    echo "<p>Your message has been received.</p>";
  } else {
    echo "<p>Click back on your browser to resubmit the form.</p>";
  }
}
?>

This version ensures that the visitor has submitted their name and a message by checking that the string length of their inputs are greater than zero. It also verifies that the email address contains a @ and . but at the same time does not contain harmful code that could be used in the email headers. Unlike the previous script, this sends you the email with the visitor's email address as the sender. This is convenient when you want to send a quick reply.

Well there you have it! Your first contact us form. Comments and questions can be directed to webmaster@walshaw.com.


Notes:
[1] An alternative is to send the variables using the GET method. For contact forms this isn't recommended because it GET variables are appended to the script_name.php URL when the variables are submitted (e.g. http://www.yoursite.com/script_name.php? name=Bob&email=bob@hotmail.com&message=Awesome&submit=submit). The GET method is more appropriate for scripts such as search functions (run a Google search and look at the URL in the address bar).

[2] This script does not use any client-side validation using JavaScript. While this would be convenient to a visitor, client-side validation isn't required, and it would only create unnecessary confusion here. The use of client-side form validation will be the subject of a future how to guide.

[3] You could set the mail header to be "From: $email" so that the website visitor will appear in your email client as the sender. This, however, would require validation to ensure the visitor doesn't submit malicious code as their email address.

ServerPronto, affordable dedicated servers

 

Home About Us Contact Us Advertising Submit Site Link to Us Terms of Use Privacy Policy
© 1998-2017 Walshaw.com. All Rights Reserved.  

Walshaw.com is owned and operated by Walshaw Internet Services

ABN: 43 549 443 349