Categories
Tutorials

Creating a Contact Form

A contact form is a simple and effective way of allowing your customers and viewers to get in touch with you. This contact form is comprised of two parts; the client side and the server side.

HTML Form

This is the HTML front end of the contact form:

<form id='contactus' method='post'>
<fieldset>
<legend>Contact us</legend>
 
<input type='hidden' name='submitted' id='submitted' value='1'/>
 
    <label for='name' >Your Full Name*: </label><br/>
    <input type='text' name='name' id='name'  maxlength="50" /><br/>
 
    <label for='email' >Email Address*:</label><br/>
    <input type='text' name='email' id='email' maxlength="50" /><br/>
 
    <label for='phone' >Phone Number:</label><br/>
    <input type='text' name='phone' id='phone' maxlength="15" /><br/>
 
    <label for='message' >Message:</label><br/>
    <textarea rows="10" cols="50" name='message' id='message'> </textarea>
 
    <input type='submit' name='Submit' value='Submit' />
 
</fieldset>
</form>

The code above will give you a simple form, certainly not the most secure or stylish.

The ‘label’ tag describes the input to the end-user with the ‘for’ tag pairing it to its corresponding element. Textboxes are created by using the ‘input’ tag with the ‘text’ type. Textarea is used for larger pieces of text such as the message. Finally we use the input type ‘submit’ to create a button.

Input Validations

Input validations allow the user to see feedback based on the values they have entered into the contact form. A simple, free to use validation script is available from JavaScript-coder.com

<script type='text/javascript' src='scripts/gen_validatorv31.js'>
 
<script type='text/javascript'>
// <![CDATA[
 
    var frmvalidator  = new Validator("contactus");
    frmvalidator.EnableOnPageErrorDisplay();
    frmvalidator.EnableMsgsTogether();
    frmvalidator.addValidation("name","req","Please provide your name");
 
    frmvalidator.addValidation("email","req",
                "Please provide your email address");
 
    frmvalidator.addValidation("email","email",
                "Please provide a valid email address");
 
    frmvalidator.addValidation("message","maxlen=2048",
                "The message is too long!(more than 2KB!)");
 
// ]]>
</script>

The first line ensures we ‘include’ the JavaScript file.

Server Side Processing

The server side processing is done using the free PHP script, fgcontactform.php

<?PHP
 
require_once("./include/fgcontactform.php");
 
$formproc = new FGContactForm();
 
//1. Add your email address here.
//You can add more than one recipients.
$formproc->AddRecipient('yourname@your-website.com'); //<<---Put your
                                                          //email address here
 
//2. For better security. Get a random string from
// this link: http://tinyurl.com/randstr
// and put it here
$formproc->SetFormRandomKey('gkEFthfv6gvGAuL');
 
if(isset($_POST['submitted']))
{
   if($formproc->ProcessForm())
   {
        $formproc->RedirectToURL("thank-you.html");
   }
}
 
?>

Remember to input the recipient email address and delete the placeholder email address.

This contact form will allow viewers and customers to send messages and their details to a designated address. The CSS for this contact form will need to be created as it will look pretty poor if implemented in its current state!

Leave a Reply

Your email address will not be published. Required fields are marked *