sigForm - a jQuery/AJAX contact form

Overview

A jQuery plugin that generates a fully Ajax-enabled and javaScript degradable form. Form validation and submission is performed server-side by PHP and accessed client-side with Ajax. Both client and server validation rely on the same PHP classes, avoiding the need for duplicate validation methods. Originally this plugin was designed for my own site, but if anyone has any ideas for future development please get in contact.

Installation

This plugin requires PHP and jQuery. The setup involves both specifying the base PHP settings, and the runtime jQuery initialisation.

  1. Download the sigForm zip file and unzip it. Put the CSS folder, sigForm.js and control folder somewhere on your server.

    2. Setting up the PHP

  2. Initial setup requires two PHP files to be edited:
    • system.php - enter your site name and site email address (to which mail is sent) 
      					function getSettings() 
						{ 
							$settings['siteDir'] = null; //this isn't used
							$settings['domain'] = "http://" . $_SERVER["HTTP_HOST"]; // Root Domain - http://example.com
							$settings['siteName'] = "A Site Name";
							$settings['siteEmail'] = "me@example.com";
						return $settings; 
						}
    • mailForm.php - setup all form and field settings 
      						require_once('formClass.php');	
						$formParam = array(	'name'=>'', //form name e.g. 'contactForm'
											'id' => '', 'class'=>'', //form id and class
											'legend'=>'', //form legend e.g. 'This is a Contact Form'
											'method'=>'' //form submission method e.g. 'POST'
						);
	
						$formElements = array(
							array(	'name'=>'', //element name e.g. 'emailAddress'
									'label'=>'', //element label e.g. 'Enter your Email Address'
									'id'=>'','class'=>'', //element id and class
									'valTypes'=>array(), //a list of validation checks e.g. ('string','email')
									'type'=>'', //type of form element e.g. 'text' or 'textarea'
									'title'=>'', //element title
									'length'=>'', //length of element
									'size'=>''  // size of element
							),
						);

    3. Initialise the plugin

  3. Get the latest version of jQuery (or use a hosted version)
  4. Include the references in the header 
    						<head>
						...
						<script type="text/javascript" src="path/to/sigForm.js"></script>
						<link rel="stylesheet" type="text/css" media="all" href="path/to/sfbase.css" />
 						...
 						</head>
  5. Add a container element to your page. Including the PHP code allows the initial form to be generated when the page is loaded. If it is not included the form will be loaded via Ajax. 
    						<div id = "form_holder">
    						 <?php require('control/mailForm.php') ?>
						</div>
  6. Finally, initialise the plugin and pass the settings. You must specify paths to the two form processing files (working examples of these files are included in the control folder) 
    						<script>  
						jQuery(document).ready(function($) {
    						$('#form_holder').sigForm({
    							ajaxHandler :'path/to/control/ajaxValid.php',
								formHandler:'path/to/control/mailForm.php',
								animate:true //form is initially hidden and scrolls out on click (default=true)
    						});		
    					});
						</script>

What are all these files?

After unzipping the plugin zip file you'll find a number of files. The control folder holds a number of PHP files that handle server side form processing, whereas all of the jQuery (including the Ajax) is within sigForm.js. The PHP files are as follows (in order of inheritance):

  • system.php: This contains the parent class of all other classes. It is a basic holder for all site wide information.
  • validation.php: a formValidator class whose methods are the different validation checks (and a validation controller)
  • formClass.php: Three classes. ajaxValidator handles Ajax requests by reading in json variables, and passing them to the parent 'checkElement' method. formController is a generic form class that can generate a form, and validate a form (submitted via POST or Ajax). Finally, mailForm is a child class of formValidator, which specifically handles generating an email from a successfully validated form.
  • mailForm.php: Simply a place to specify all of the form settings, and initialise the mailForm object.

  • ajaxValid.php: Similarly, just a place to initialise the ajaxValidator object.

Expanding the Plugin

The plugin has so far been developed to match exactly my specification, but expanding it to add more validation checks, or form types is pretty simple

  • To add more validation checks include them as methods of the formValidator object (found in validation.php), but remember to add a corresponding case to the checkElement method. Methods are of the form: 
    					function check_type($value) {
	 					// if the $value does not match filter
						if (/*This is the check of $value against something*/) {
							return array('ok' => false, 'msg' => "Your value is wrong");
						}
						else return array('ok'=>true,'value'=>$value);
					}
  • To add more form controllers (i.e. to make it a 'something that is not a contact' form generator) you need to create a new class of the form 
    						class newFormClass extends formController {
							function __construct($form, $elements) {
								parent::__construct($form, $elements); //runs formController setup
								if(empty($this->errs) && !empty($this->submitted)){
									$send = $this->successMethod($this->values); //method to run if validation passed
								}
								elseif(!empty($this->errs)) $this->createForm($form, $elements, $this->errs,$this->values); //else show form with errors
								else $this->createForm($form, $elements); //or if first time initialising class, create the form
							}
							function successMethod($values) {	
								//use the validated form values to do something
							}
						}

Validation Checks

As the form was created as a simple mail form, there are only a limited number of validation methods. The existing validation methods are as follows:

  • Required: checks the field has a value
  • Email: checks the field against the PHP FILTER_VALIDATE_EMAIL
  • String: returns a sanitised version of the input string

Future Updates

  • PRIORITY: Needs an 'animate' option so it doesn't have to pop-up. Added to v1.1
  • Add some more initialisation options (e.g. target email)
  • Add more validation methods
  • Add different types of form controllers

License

This plugin is released under the MIT license

Acknowledgements

Joren Rapine for the inspiration to make my form slide in. James Drummond for a nice tutorial on AJAX, jQuery and JSON. Finally, Matt Doyle for another great AJAX, and jQuery contact form tutorial.