Contact Form Manual

Contact Form gives visitors the opportunity to send messages to the site-owner. The contact data (Name, Email, Text message) is submitted into the corresponding fields. It can be very beneficial if the visitor does not have an Email Client installed or uses someone else's computer (e.g. in the internet club). For this reason we have developed the universal contact form that sends messages to the email specified by the site owner, has the expandable number of fields and transmissible data verification feature.

Contact Form Sample

Description

The HTML structure inside the form is flexible, the only condition is that all the fields (input, textarea HTML elements) should be placed inside the label tags that have class corresponding to their type.

There are following classes/types by default:

name – the User's Name. Validation: digits are disallowed, not less than 2 symbols;
email – the User's Email;
state – Country (Area). Validation: digits are disallowed, not less than 2 symbols;
phone – Phone. Validation: digits only, not less than 5 symbols. Additional acceptable not alphabetical symbols: "space", "+" and "-";
fax – Fax. Validation: digits only, not less than 5 symbols. Additional acceptable not alphabetical symbols: "space", "+" and "-";
message – Message. Validation: any symbols, not less than 20 symbols.
notRequired – This class is used as a pointer for the optional fields while filling the forms out.

The Code:


<label class="name">

  <input type="text" value="Enter Name:">

</label>

<label class="email">

   <input type="email" value="Enter Email:">

</label>

<label class="state notRequired">

   <input type="text" value="Enter Your State:">

</label>

<label class="phone">

   <input type="tel" value="Enter Phone:">

</label>

<label class="fax">

   <input type="tel" value="Enter Fax:">

</label>

<label class="message">

   <textarea>Enter Message:</textarea>

</label>

Also label tag mentioned above can contain nested span elements with classes error and empty, which include the error message in case the data in the field is specified incorrectly or the field is just empty.

The Code:


<label class="name">

   <input type="text" value="Enter Name:">

   <span class="error">*This is not a valid name.</span> <span class="empty">*This field is required.</span>

</label>

<label class="email">

   <input type="email" value="Enter Email:">

   <span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span>

</label>

<label class="state notRequired">

   <input type="text" value="Enter Your State:">

   <span class="error">*This is not a valid state name.</span> <span class="empty">*This field is required.</span>

</label>

<label class="phone">

   <input type="tel" value="Enter Phone:">

   <span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span>

</label>

<label class="fax">

   <input type="tel" value="Enter Fax:">

   <span class="error">*This is not a valid fax number.</span> <span class="empty">*This field is required.</span>

</label>

<label class="message">

   <textarea>Enter Message:</textarea>

   <span class="error">*The message is too short.</span> <span class="empty">*This field is required.</span>

</label>

There is also div container with the class success inside the form, which is displayed after the message has been sent.

The Code:


<div class="success"> Contact form submitted!

<strong>We will be in touch soon.</strong> </div>

Script Initialization

To activate the contact form you need to include contact from script in the <head> section of HTML file and copy "bin" folder to your website root folder. The "bin" folder should contain 2 files: MailHandler.ashx and MailHandler.php

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>

<script type="text/javascript" src="js/forms.js"></script>

After this you should initialize your contact form on the $(window).load() : event


<script type="text/javascript">

   $(window).load(function(){

 	   $('#form1').forms({

 	     ownerEmail:'#'

 	     })

   })

</script>

Use the following parameters for initialization:

ownerEmail – the Email address the data will be sent to;
successShow – the period of time in milliseconds, during which the Send Message will be shown and after which the fields will be emptied, by default it is 4000 - 4 sec.