Bootstrap Contact Form With Captcha

This is a contact form with the essential fields like name, email and a message field. The form is built on top of bootstrap framework. Bootstrap makes the styling easy and quick. The form looks elegant without much extra effort.

The form is responsive too. It should work fine on mobile phones and tablets.

Usage:

  1. Press the download button above. The zip file contains all the code you need for the form.
  2. Unzip the file bootstrap-contact-form-with-captcha
  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="row">
    <div class="col-md-6 col-md-offset-3">
        <h2>Contact Us</h2> Got a question ? Feedback? Awesome!
        <p>
            Send your message in the form below and we will get back to you as early as possible.
        </p>
        <form role="form" method="post" id="reused_form"   >
            <div class="form-group">
                <label for="name">
                    Name:</label>
                <input type="text" class="form-control" 
                id="name" name="name"  required maxlength="50">

            </div>
            <div class="form-group">
                <label for="email">
                    Email:</label>
                <input type="email" class="form-control" 
                id="email" name="email" required maxlength="50">
            </div>
            <div class="form-group">
                <label for="name">
                    Message:</label>
                <textarea class="form-control" type="textarea" name="message"
                id="message" placeholder="Your Message Here" 
                maxlength="6000" rows="7"></textarea>
            </div>

                   

                            <div class="row" style="margin-bottom:30px;">
                  <div class="col-sm-5">
                  <img src="captcha.php" id="captcha_image"/>
                  <br/> <a id="captcha_reload" href="#">reload</a>
                  </div>
                  <div class="col-sm-6">
                  <label for="email">Enter the code from the image here:</label>
                  <input type="text" class="form-control" required id="captcha" name="captcha" >
                  </div>
                </div>
            
            
            <button type="submit" class="btn btn-lg btn-success pull-right" id="btnContactUs">Post It! →</button>

        </form>
        <div id="success_message" style="width:100%; height:100%; display:none; ">
            <h3>Sent your message successfully!</h3>
        </div>
        <div id="error_message" 
        style="width:100%; height:100%; display:none; ">
            <h3>Error</h3>
            Sorry there was an error sending your form.

        </div> 
    </div>
</div>

CSS Styling

The default styling is just re-used for this form. It makes the form simple and elegant.

jQuery Form submission handling


<script>
$(function()
{
    function after_form_submitted(data) 
    {
        if(data.result == 'success')
        {
            $('form#reused_form').hide();
            $('#success_message').show();
            $('#error_message').hide();
        }
        else
        {
            $('#error_message').append('<ul></ul>');

            jQuery.each(data.errors,function(key,val)
            {
                $('#error_message ul').append('<li>'+key+':'+val+'</li>');
            });
            $('#success_message').hide();
            $('#error_message').show();

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

	$('#reused_form').submit(function(e)
      {
        e.preventDefault();

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

                    $.ajax({
                type: "POST",
                url: 'handler.php',
                data: $form.serialize(),
                success: after_form_submitted,
                dataType: 'json' 
            });        
        
      });	
});
</script>

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


<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
/*
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();
$validator->fields(['name','email'])->areRequired()->maxLength(50);
$validator->field('email')->isEmail();
$validator->field('message')->maxLength(6000);


$pp->requireCaptcha();


$pp->sendEmailTo('someone@gmail.com'); // ← Your email here

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

 $fh->sendEmailTo(['someone@gmail.com', 'someone.else@gmail.com']);

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.

Customizations

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