PHP Contact Form Tutorial

In this article, we will make a contact form for your website. The contact form contains only the necessary fields required in most contact forms.

The contact form needs to have two parts: the client side ‘front end’ of the form and the server side ‘back end’ of the form. The client side of the form is coded in HTML (actually, XHTML 1.0 strict to be exact) plus some style (CSS) and JavaScript.

Download the code

Download the contact form code here. You can download the form that best fits your needs. Each of the download below contains a different contact form with some variations. See the ReadMe.txt (in the downloaded zip file) for installation instructions.

This is a simplified version of the contact form code. (The actual code in the download above has some more elements for better style and security). The HTML code for the form is in the contactform.php file.

The ‘label’ tag describes the input element to the user. The ‘for’ attribute associates the label with the corresponding input element.

Each of the input element has a ‘name’ and an ‘id’ attribute. The ‘name’ attribute is used to identify the value in the server-side script.

The fieldset tag is used to group the elements together. The ‘legend’ tag gives a caption to the ‘fieldset’.

Small textboxes are created using the ‘input’ tag with type=’text’ attribute. The large text area for the message is created using the ‘textarea’ tag.

Finally, the ‘input’ with type=’submit’ creates the submit button.

Input Validations

Input validations are essential for an web form. Validations using Javascript provides immediate feedback to the user. Please note, however, that server side validations should not be avoided.

For the validations in this contact form, we will use the Javascript form validation script from JavaScript-coder.com. Using this script, it is really easy to add client side validations.

The first line includes the main JavaScript validation script. Then the Validator() object is created and initialized. The addValidation() calls adds validation for each element in the form For more information on the validation descriptors, see the documentation.

Server side processing

The server side (back-end) processing is done using the free PHP script: fgcontactform.php. Here is the server side form processing code:

First, we include the fgcontactform.php file. Then, we create an instance of FGContactForm() and add the recipient addresses. Make sure you edit the file ‘contactform.php’ and change the email address to yours!.

The ProcessForm() function does all the work (validates and sanitizes the form submission data and sends the email )

For better security of the form, we use a FormID parameter. The FormID is generated runtime and is unique for each visitor. While submitting the form, we verify the FormID value. This is one step in preventing automated bots from submitting the form.

We have to add a form ID hidden attribute to the form.

Inside the script

You can open the script ‘fgcontactform.php’ in the folder ‘include’ to see the inside working of the contact form script.(although you will rarely need to open the script). Here is the code for the ProcessForm() function.

As the sequence indicates, first we validate the submission, Collect the data and sends the form submission email.
The Validate() function validates the input values. Name and email are mandatory fields. See the Validate() function for details.

The SendFormSubmission() function composes the form mail and sends the email. We use the PHPMailer email class to send HTML emails.

Customizing the form

You can customize the style of the form by editing the contact.css file. You can add more fields to the form. The field values will automatically be included in the form submission email.

Thanks! Truth be told I have never been all to fond of PHP. It has always seemed clumsy and tedious. This form was a breath of fresh air. It did not require a PHD in rocket science to figure out and it was simple to customize. Cant say enough about how much I like this form!