PHP Contact Form Template

The form is material design based. It uses materialize CSS & JS.


  1. Press the download button above. The zip file contains all the code you need for the form.
  2. Unzip the file php-contact-form-template
  3. Open the file named "handler.php"
    Look for sendEmailTo add the email addresses to receive the form submissions.
  4. Upload the whole folder to your website
  5. Open the formpage.html in your browser and test

See the customization guide . You can change the validations, edit the styles, and more

See a video demo here

The sections below explain the code of this form

The HTML Code

<div class="imagebg"></div>
    	<div class="container">
    		<div class="form-container z-depth-5">
    			<h3>Contact Form</h3>
    			<div class="row">
			    <form class="col s12" id="reused_form">
			      <div class="row">
			        <div class="input-field col s12">
			          <input id="name" type="text" name="name" required class="validate">
			          <label for="name">Name</label>
			      <div class="row">
			        <div class="input-field col s12">
			          <input id="email" type="email" name="email" required class="validate">
			          <label for="email">Email</label>
			      <div class="row">
			        <div class="input-field col s12">
			          <textarea id="message" name="message" class="materialize-textarea" class="validate"
			          <label for="message">Message</label>
				    	<button class="waves-effect waves-light btn submitbtn" type="submit">Submit</button>
			    <div id="error_message" style="width:100%; height:100%; display:none; ">
		            Sorry there was an error sending your form.			    
			    <div id="success_message" style="width:100%; height:100%; display:none; ">
					<h4>Success! Your Message was Sent Successfully.</h4>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src=""></script>
      <script src=""></script>

CSS Styling

The following extra CSS styling is used to make the form look better

<link rel="stylesheet" href="form.css" >

jQuery Form submission handling

    function after_form_submitted(data) 
        if(data.result == 'success')

                $('#error_message ul').append('<li>'+key+':'+val+'</li>');

            //reverse the response on the button
            $('button[type="button"]', $form).each(function()
                $btn = $(this);
                label = $btn.prop('orig_label');
                    $btn.prop('type','submit' ); 


        $form = $(this);
        //show some response on the button
        $('button[type="submit"]', $form).each(function()
            $btn = $(this);
            $btn.prop('type','button' ); 
            $btn.text('Sending ...');

                type: "POST",
                url: 'handler.php',
                data: $form.serialize(),
                success: after_form_submitted,
                dataType: 'json' 

Form Validations

HTML5 validations are used. For example, the Name and Email fields have 'required' validation and the email field is of input type 'email'.

  <input type="email" class="form-control" id="email" name="email" required>

Similarly, the message field (textarea) allows a max length of 6000 characters

<textarea  name="Message"  maxlength="6000" required></textarea>

using the built-in HTML5 validations has the advantage that the browser itself shows the error message.
You can customize those validations to fit your needs

Server Side Handling

Every form requires a server side script to collect the form data and do the processing like send emails, save to database etc. This form comes with a PHP script to handle the form submissions. PHP is widely supported server side scripting platform.

When the form is submitted, the javascript form submission event handler above collects the form data and sends it to the server side script.

The serverside script entry point is handler.php (see in your downloaded zip file). The script uses a library called FormHandler, which inturn, uses other libraries.

Here is the code of the handler.php

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
Tested working with PHP5.4 and above (including PHP 7 )

require_once './vendor/autoload.php';

use FormGuide\Handlx\FormHandler;

$pp = new FormHandler(); 

$validator = $pp->getValidator();

$pp->sendEmailTo(''); // ← Your email here

echo $pp->process($_POST);
You have to edit the handler.php and change "" to your email address. If you want to add a second or third email address, you can do so like this:

 $fh->sendEmailTo(['', '']);

Server Side Form Validations

Server side form validations are essential for any form. You can't trust data sent to a form processing script.

For this form, the server side form validations are done using this PHPFormValidation library. See the documentation to add or update the validations.


Edit the handler.php and change abc@cdef to your email address. Remove the second email address, if not required.

See the customization guide for more customization options.

Preview the form Download

Download Simfatic Forms (paypal form generator). Form builder on your desktop