Web/ Design/ Vista

Resources for Designers & Developer

Create a PHP Contact Form with Validation – Part I

This is a basic tutorial on creating a PHP contact form with validation, in 2 parts. In part I, i will show you how to create the form and capture contact details of visitors and save in database.

Part II will deal with retrieving the contact details and displaying on a page.

Let us get started –

Get your MySql database connection details. You will need server name, database name, user name and password.

Create a file create-db.php and insert the following code

// Make mysql connection 
$server = 'localhost';
$database = 'contact';
$user = 'root';
$password = '';

$conn = new mysqli( $server, $user, $password, $database );

// Check connection for errors

if ( $conn->connect_error ) {
    die( "Connection failed: " . $conn->connect_error );
}

// Create table to store information from contact form

$sql = "CREATE TABLE contacts (cname VARCHAR(50), email VARCHAR(50),
    phone VARCHAR(20), msg VARCHAR(750), website VARCHAR(50))";

if ( $conn->query( $sql ) === TRUE ) {
    echo "Table MyGuests created successfully";
} else {
    echo "Error creating table: " . $conn->error;
}

// Close the connection
  
$conn->close();

//

Run the script in browser: http://localhost/create-db.php

If you get an error, then check the script to see if you inserted any wrong value for server, database, user or password.

Create a file process-form.php. Keep it blank, we will populate it later.

Create another file index.php

At the top of this file insert following code

<?php require_once('process-form.php'); ?>

This script will handle form submission.

Create contact form markup/html

<!-- Contact Form -->

<div class="contact-form">
    <form action="" method="post">
        <div>       
            <input type="text" name="cname" placeholder="Your name">
        </div>
        <div>       
            <input type="text" name="email" placeholder="Your email">
        </div>   
        <div>   
            <input type="text" name="website" placeholder="Your website">
        </div>
        <div>       
            <textarea name="msg" rows="5" placeholder="Write a message..."></textarea>
        </div>
        <div>
            <button>Submit</button>
        </div>
    </form>
</div>

Clicking the submit button will send information in form fields to the script in form “action”. It is empty, hence the information will be submitted to the current page/url itself.

Test the script. Run http://localhost/contact.php

Input some values and submit. Data will be submitted to script process-form.php. Nothing happens at this point because we have not
added code to process form data yet.

Open process-form.php and insert the following code

<?php // this script will process and insert form data to database.

// Make database connection

require_once('connect-db.php');

// check if form is submitted

if ( isset( $_POST['submitted'] ) ) 
{

    $cname = $_POST['cname'] ? $_POST['cname'] : '';
    $email = $_POST['email'] ? $_POST['email'] : '';
    $phone = $_POST['phone'] ? $_POST['phone'] : '';
    $msg = $_POST['msg'] ? $_POST['msg'] : '';
    $website = $_POST['website'] ? $_POST['website'] : '';

    $query = "INSERT INTO contacts (cname, email, phone, msg, website) VALUES(
        '$cname',
        '$email',
        '$phone',
        '$msg',
        '$website'
    )";

    // $conn is the connection object obtained from database connection script above

    if ( $conn->query( $query ) === TRUE ) {
        echo "Message stored successfully";
    } else {
        echo "Error: " . $query . "<br>" . $conn->error;
    }
    
    $conn->close();

}

Go to http://localhost/contact.php again and enter values and submit. This time you should get a success message that data is stored in database.

Form validation:

It is a good practice to not trust user input. That means – treat every user as the bad guy out to destroy your site! In reality there are very few bad guys and validation is needed simply to correct rookie user mistakes.

Let us add some validation code.

Create a file validation.php and enter the following code

// User name should not be empty

if ( empty ($_POST["cname"] ) ) {  
    $err[] = "Enter your name";  
}

// User name should contain only alphabets and white space

if ( ! preg_match ( "/^[a-zA-z]*$/", $_POST["cname"]) ) {  
    $err[] = "Only alphabets and whitespace are allowed.";               
}

// Email should be properly formatted.

$email = $_POST ["email"];  

$pattern = "^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$^";  

if ( ! preg_match ( $pattern, $email ) ) {  
    $err[] = "Enter a valid email";          
}

// Phone number is optional but should be a numeric value if entered.

if ( isset( $phone = $_POST["phone"] ) )
if (  ! preg_match ("/^[0-9]*$/", $phone ) ){  
    $err[] = "Phone number accepts only numeric values.";  
} 

// Message should not be empty.

if ( empty ($_POST["msg"])) {  
    $err[] = "Enter a message";  
}

// Website url is optional but must have in valid format if entered.

if ( isset( $website = $_POST["website"] ) )
if ( ! preg_match( "/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i", $website ) ) {  
    $err[] = "Website url is not valid";  
}

Modify process-form.php to include validation.

if ( isset( $_POST['submitted'] ) ) 
{
    $err= []; // array variable to store validation errors
    require_once('validation.php');    
    // Print out validation errors (if any)
    if (  count( $err ) > 0 ) {
      foreach( $err as $e ) {
        echo "<p>$e</p>";
      }
    }
    else {
      $cname = $_POST['cname'] ? $_POST['cname'] : '';
      $email = $_POST['email'] ? $_POST['email'] : '';
      $phone = $_POST['phone'] ? $_POST['phone'] : '';
      $msg = $_POST['msg'] ? $_POST['msg'] : '';
      $website = $_POST['website'] ? $_POST['website'] : '';

      $query = "INSERT INTO contacts (cname, email, phone, msg, website) VALUES(
        '$cname',
        '$email',
        '$phone',
        '$msg',
        '$website'
      )";

      // $conn is the connection object obtained from database connection script above

      if ( $conn->query( $query ) === TRUE ) {
        echo "Message stored successfully";
      } else {
        echo "Error: " . $query . "<br>" . $conn->error;
      }
    
      $conn->close();

    }
}

Test the form again by trying to bypass validation rules as defined in validation.php

Note that i have kept the form code minimal. Apply your own styles as you see fit.

That concludes part I of this tutorial. In part II i will show how to pull the information entered by users and display in a page. Stay tuned.

Download source code for part I