1. Start
  2. Installation
  3. Create form
  4. Global settings
  5. Form settings
  6. Add new recipient in your HTML form
  7. Create my own HTML template
  8. Create my own CSS theme
  9. Create your own rule for js validation
  10. No Spam Control
  11. reCaptcha integration
  12. AYAH integration
  13. Internationalization
  14. HTML structure
  15. Javascript:
  16. PHP
  17. Sources and credits

w2 Ajax Contact Form

attachments and anti spam control (drag and drop system, reCaptcha, AYAH) - Wordpress


Thank you so much for purchasing this item. I'd be glad to help you if you have any questions relating to this item. No guarantees, but I'll do my best to assist. If you have a more general question relating to the item on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Installation


Minimal requirements: PHP 5 or higher must be installed on your server.

Create form:


You can create some forms and save them in your wordpress database.


Just specifie a name for your form. And click it to select it and configure his settings. You can delete it by clicking on the delete icon.

Global settings:


You can configure the global settings for the plugin. This configuration is available for all the forms.

Form settings:


You can configure the form settings for the plugin. This configuration is available only for the forms selected.
Don't forget to click "save" button (bottom of the form) to save your configuration.

Name settings

Emails settings

Fields settings

Specific javascript validation rules

You can find all informations about the rules for javascript validation on the web site of Jquery validate plugin.

Callback submit success

Attachments options

No spam control options

reCapctha options

Ayah settings

Displaying options

HTML template (form editor)

If you use several form in the same page or in a full AJAX theme make sure the id for html form elements are unique (specially for UI widget like Buttonset).

Configure your emails recipient (add or remove new recipient):

HTML:

If you use a hidden field (for unique recipient):

If you use some hidden fields (for automatic multiple recipient):

If you use a combobox:

In this example name="recipient[]" specifies that multi-choice is accpeted. Use name="recipient" to specify that the choice must be unique.

If you use some checkbox:

In this example name="recipient[]" specifies that multi-choice is accpeted. Use name="recipient" to specify that the choice must be unique.

In the examples the values of the fields "recipient" corresponds to the index of the recipients in the parameter $mail_recipient in file w2ContactForm.pbp. Don't forget to add your new(s) recipient(s) in the parameter "mail recipient" in the form settings section "emails settings" of the plugin back-office (form settings infos).

Create my own HTML template:


If you use several form in the same page or in a full AJAX theme make sure the id for html form elements are unique (specially for UI widget like Buttonset).

Create my custom HTML template by creating a template file

You can create and add your own template in your template list of the form editor. Just create your template file (example: my_template.php) and put it in the "templates/fields/" folder.

A template contain only the fields HTML tags (not the container or the form HTML tag). Look at the existing pre built template in the folder "templates/fields/" for a better comprehension.

Create my custom HTML template with the form editor

You can create your own template with the form editor. Just edit source code of the template in the source code editor of the form editor and save it. This template will be available for the form selected. It will not appear in your pre built template list.

Examples of HTML element source code:
Required / not required field:

To specifie a required field you need to add the class "required" to the field and specifie the "type" (text, email, url, number ...) attribute if want a specific rule of validation.
example:

        <div class="block_element_form"> 
          <label for="your_required_field" class="label_text">Your required field<span class="required_sign">*</span></label>
          <input id="your_required_field" name="your_required_field" class="required w2_shadow" type="text"/>
        </div>
        

To specifie a non required field just add a classic field.
example:

        <div class="block_element_form"> 
          <label for="your_field" class="label_text">Your field</label>
          <input id="your_field" name="your_field" class="w2_shadow" type="text"/>
        </div>
        

Add a Text field:

For in "block" template:

        <div class="block_element_form"> 
          <label for="your_field" class="label_text">Your field</label>
          <input id="your_field" name="your_field" class="w2_shadow" type="text"/>
        </div>
        

For in "inline" template:

        <tr class="block_element_form">
          <td class="align_right"> 
            <label for="your_field" class="label_text">Your field</label>
          </td>
          <td class="align_left">
            <input id="your_field" name="your_field" class="w2_shadow" type="text"/>
          </td>
        </tr>
        

Add a email field:

For in "block" template:

        <div class="block_element_form"> 
          <label for="your_field" class="label_text">Your field</label>
          <input id="your_field" name="your_field" class="w2_shadow" type="email"/>
        </div>
        

For in "inline" template:

        <tr class="block_element_form">
          <td class="align_right"> 
            <label for="your_field" class="label_text">Your field</label>
          </td>
          <td class="align_left">
            <input id="your_field" name="your_field" class="w2_shadow" type="email"/>
          </td>
        </tr>
        

Add a number field:

For in "block" template:

        <div class="block_element_form"> 
          <label for="your_field" class="label_text">Your field</label>
          <input id="your_field" name="your_field" class="w2_shadow" type="number"/>
        </div>
        

For in "inline" template:

        <tr class="block_element_form">
          <td class="align_right"> 
            <label for="your_field" class="label_text">Your field</label>
          </td>
          <td class="align_left">
            <input id="your_field" name="your_field" class="w2_shadow" type="number"/>
          </td>
        </tr>
        

Add a url field:

For in "block" template:

        <div class="block_element_form"> 
          <label for="your_field" class="label_text">Your field</label>
          <input id="your_field" name="your_field" class="w2_shadow" type="url"/>
        </div>
        

For in "inline" template:

        <tr class="block_element_form">
          <td class="align_right"> 
            <label for="your_field" class="label_text">Your field</label>
          </td>
          <td class="align_left">
            <input id="your_field" name="your_field" class="w2_shadow" type="url"/>
          </td>
        </tr>
        

Add a date field:

IMPORTANT: for the date field the ID of each element must be unique.
For in "block" template:
For in "block" template:

        <div class="block_element_form"> 
          <label for="your_field" class="label_text">Your field</label>
          <input id="your_field" name="your_field" class="w2_shadow datepicker" type="date" style="width:80px"/>
        </div>
        

For in "inline" template:

        <tr class="block_element_form">
          <td class="align_right"> 
            <label for="your_field" class="label_text">Your field</label>
          </td>
          <td class="align_left">
            <input id="your_field" name="your_field" class="w2_shadow datepicker" type="date" style="width:80px"/>
          </td>
        </tr>
        

Add a listbox field:

For in "block" template:

        <div class="block_element_form"> 
           <label for="your_field" class="label_text">Your field</label>
           <select id="your_field" name="your_field" class="w2_shadow" style="height:35px;">
               <option value="1">value 1</option>
               <option value="2">value 2</option>
           </select>
        </div>
        

For in "inline" template:

        <tr class="block_element_form">
          <td class="align_right"> 
            <label for="your_field" class="label_text">Your field</label>
          </td>
          <td class="align_left">
            <select id="your_field" name="your_field" class="w2_shadow" style="height:35px;">
               <option value="1">value 1</option>
               <option value="2">value 2</option>
            </select>
          </td>
        </tr>
        

Add a listbox mutlichoice field:

For in "block" template:

        <div class="block_element_form"> 
           <label for="your_field" class="label_text">Your field</label>
           <select id="your_field" name="your_field[]" class="required w2_shadow select_multi" multiple="multiple" size="2">
               <option value="1">value 1</option>
               <option value="2">value 2</option>
           </select>
        </div>
        

For in "inline" template:

        <tr class="block_element_form">
          <td class="align_right"> 
            <label for="your_field" class="label_text">Your field</label>
          </td>
          <td class="align_left">
            <select id="your_field" name="your_field[]" class="required w2_shadow select_multi" multiple="multiple" size="2">
               <option value="1">value 1</option>
               <option value="2">value 2</option>
            </select>
          </td>
        </tr>
        

Add a checkbox button set field:

IMPORTANT: for the checkbox button set the ID of each element must be unique.
For in "block" template:

        <div class="block_element_form"> 
           <label for="your_field" class="label_text">Your field</label>
           <fieldset class="radioSet">
                <input type="checkbox" id="check-1" name="your_field[]" value="1" validate="required:true" /><label for="check-1">value 1</label>
                <input type="checkbox" id="check-2" name="your_field[]" value="2" /><label for="check-2">value 2</label>
           </fieldset>
        </div>
        
the attribute validate="required:true" spĂȘcifies that this checkbox button set is required (the synthax is not the same that for other element).

For in "inline" template:

        <tr class="block_element_form">
          <td class="align_right"> 
            <label for="your_field" class="label_text">Your field</label>
          </td>
          <td class="align_left">
            <fieldset class="radioSet">
                <input type="checkbox" id="check-1" name="your_field[]" value="1" validate="required:true" /><label for="check-1">value 1</label>
                <input type="checkbox" id="check-2" name="your_field[]" value="2" /><label for="check-2">value 2</label>
             </fieldset>
          </td>
        </tr>
        

Add a radio button set field:

IMPORTANT: for the radio button set the ID of each element must be unique.
For in "block" template:

        <div class="block_element_form"> 
           <label for="your_field" class="label_text">Your field</label>
           <fieldset class="radioSet">
                <input type="radio" id="radio1" name="your_field" value="1" validate="required:true" /><label for="radio1">value 1</label>
                <input type="radio" id="radio2" name="your_field" value="2" /><label for="radio2">value 2</label>
                <input type="radio" id="radio3" name="your_field" value="3" /><label for="radio3">value 3</label>
           </fieldset>
        </div>
        
the attribute validate="required:true" spĂȘcifies that this checkbox button set is required (the synthax is not the same that for other element).

For in "inline" template:

        <tr class="block_element_form">
          <td class="align_right"> 
            <label for="your_field" class="label_text">Your field</label>
          </td>
          <td class="align_left">
             <fieldset class="radioSet">
                <input type="radio" id="radio1" name="your_field" value="1" validate="required:true" /><label for="radio1">value 1</label>
                <input type="radio" id="radio2" name="your_field" value="2" /><label for="radio2">value 2</label>
                <input type="radio" id="radio3" name="your_field" value="3" /><label for="radio3">value 3</label>
             </fieldset>
          </td>
        </tr>
        

Add a Textarea field:

For in "block" template:

        <div class="block_element_form"> 
           <label for="your_field" class="label_text">Your field</label>
           <textarea id="your_field" name="your_field" class="w2_shadow" minlength="2" ></textarea>
        </div>
        
the attribute validate="required:true" spĂȘcifies that this checkbox button set is required (the synthax is not the same that for other element).

For in "inline" template:

        <tr class="block_element_form">
          <td class="align_right"> 
            <label for="your_field" class="label_text">Your field</label>
          </td>
          <td class="align_left">
            <textarea id="your_field" name="your_field" class="w2_shadow" minlength="2" ></textarea>
          </td>
        </tr>
        

Add a Classic File field:

For in "block" template:

        <div class="block_element_form"> 
          <label for="your_field" class="label_text">Your field</label>
          <input id="your_field" name="your_field" class="w2_shadow" type="file"/>
        </div>
        

For in "inline" template:

        <tr class="block_element_form">
          <td class="align_right"> 
            <label for="your_field" class="label_text">Your field</label>
          </td>
          <td class="align_left">
            <input id="your_field" name="your_field" class="w2_shadow" type="file"/>
          </td>
        </tr>
        

Add a Custom File field:

For in "block" template:

        <div class="block_element_form"> 
          <label for="your_field" class="label_text">Your field</label>
          <input id="your_field" name="your_field" class="custom_file w2_shadow" type="file"/>
        </div>
        

For in "inline" template:

        <tr class="block_element_form">
          <td class="align_right"> 
            <label for="your_field" class="label_text">Your field</label>
          </td>
          <td class="align_left">
            <input id="your_field" name="your_field" class="custom_file w2_shadow" type="file"/>
          </td>
        </tr>
        

Create my own CSS theme


w2ContactForm stylesheet

You can easily customize the appearance of the form with the css Files included (view comments in source code for more informations) or directly in the form editor of the plugin back-office.

Create my own CSS theme

The skins of w2ContactForm are based on 5 jQueryUi themes for more flexibility and to accord the ui widgets (datepiker, buttonset ...) to the other HTML components of the form.
The selection of UI theme is:

You can find each theme in the folder "css/w2_contact_form/" of the plugin:

You create your CSS theme.

Create my custom CSS with the form editor

You can create your custom CSS theme with the form editor.

jQuery UI stylesheet

You can easily add new skin skin for the ui (datepicker, buttonset) that you can find them in the the "css/ui/" folder. Just put the folder of the new skin in the "css/ui/" folder (make sure your are using official jquery UI theme for a complete compatibility).

Create your own rules for javascript validation:


You can easily create you own rules for javascript validation. Configure the "Specific javascript validation rules" section of form settings in the Admin Plugin Interface (view form settings).

Javascript

This is a basic example for a specific rule of validation:

In this example the validation verify that the email (id="mail_origin" name="mail") fields is equal to the email_confirm (id="email_confirm" name="email_confirm") field.

Examples of rules:

You can find all informations and full example about the rules for javascript validation on the web site of Jqueyr validate plugin.

HTML

Make sure the ID for the element of comparaison are unique for the page (do not change the name attribute for "mail" field it is used in the PHP script):

in this example #mail_origin and #mail_confirm are unique for the page.

The specific rules of validation are only available in the fornt end not in the back office preview of the form.

No Spam Control:


No Spam Control is an alternative to the captcha. its objective is to offer visitors something more simple and less restrictive that the captcha system validation.
The system of "no spam control" is based on the Drag and Drop feature. When the user drops the dragger in the drop container the hidden fields validation for "no spam control" are added to the form and enable form validation on the server.
There is also a minimum (default 5 seconds) and maximum (default 3600 seconds) time control elapsed before submitting the form.

There are 4 types of No Spam control:

To activate or inactivate the No Spam Control (it is activate by default) you need to configure the form settings section "No spam control options"

reCaptcha integration:


You can easily integrate the Google reCaptcha in the form.

First you must signup in the reCaptcha web site (reCaptcha) to obtain your public and private key.

When you have your keys (public and private) you need to configure them in the global settings form of the plugin Back-office.

To activate or inactivate reCaptcha you need to configure the form settings section "reCapctha options" (form settings infos).

AYAH integration:


You can easily integrate the AYAH (Are You A Human) in the form.

First you must Sign Up For PlayThru in the AYAH web site (AYAH) to obtain your publisher and scoring key.
Go to your AYAH Dashboard and "manage" your AYAH configuration for your website.

IMPORTANT: configure the "Game Style" to "Embedded" not to "lightbox". The ajax form validation don't work in "lightbox" mode.

When you have your keys (publisher and scoring) you need to configure them in the global settings form of the plugin Back-office (global settings infos).

To activate or inactivate AYAH you need to configure the form settings section "AYAH options" (form settings infos).

Internationalization:


If you need to change the langage of the notification message you can do it easily.

configure the parameter "notification lang" of the global settings form (global settings infos). There 4 languages available (en, de, fr, es). You can add your own language if you need they will be automacally added to your list of language for the parameter "notification lang" of the global settings form.

PHP translations

You can specifies the PHP notifications messages for erros and success.
file: languages/w2_cf_notifications.tmx

It is really simple to add your own language (if you need).

Javascript translations

You will find some translation file for w2ContactForm in the folder "js/w2_contact_form/localization/".

Translation file example:

You can easily create your own translations files.

You will find all translation file for javascript validation in the folder "js/validation/localization/".

Translation file example:

You can easily create your own translations files.

After adding your langugages (if you need) in langugaes files just configure the parameter "notification lang" in the global settings form (global settings infos).

reCaptcha translations

You can specifie the langage for reCaptcha messages. If there ist a translation for your language.

Use the parameter "reCaptcha Lang" in the form settings section "reCaptcha options" to specifie the langage for reCaptcha (English 'en', Dutch 'nl', French 'fr', German 'de', Portuguese 'pt', Russian 'ru', Spanish 'es', Turkish 'tr').

You can specifie your own translations messages (recaptcha translations).

HTML structure (general information not for wordpress install)


Stylesheet an Library

Javascript

This is an example of the basic instanciation. You will find more infos about full configuration in Javascript section.

HTML

There is 2 different HTML structure (Template): the default template "inBlock" and the second template "inLine". View Examples for visual description.

This is ths HTML code for the template "inBlock". Include this code where you want the Form is displaying in your html or php page (view Examples).

This is ths HTML code for the template "inLine". Include this code where you want the Form is displaying in your html or php page (view Examples).

Javascript (general information not for wordpress install)


Script and library used for this Form:
Instanciation:

The jquery plugin w2ContactForm script is "js/w2_contact_form/w2ContactForm.js". Here is 4 examples (basic, full, reCaptcha integration, AYAH integration) of w2ContactForm Instanciation:

For more information and to see different use case view Examples section.
For more information about reCapycha integration view reCaptcha integration section.
For more information about AYAH integration view AYAH integration section.

Parameters:
Property Type Default Description
noSpamControl bool true Specifie if No Spam Control is activate (true / false).
noSpamControlType integer 1 Specifie the Type of No Spam Control (1 / 2).
reCaptchaPublicKey string null Specifie your reCaptcha PublicKey. First you must signup in the reCaptcha web site (reCaptcha) to obtain your public and private key.
reCaptchaId string recaptcha Specifie an unqiue ID for HTML element where reCaptcha will be integrated (just specifie the ID do not create the element in the form).
reCaptchaTheme string clean Specifie the reCaptcha theme you want to use ('clean', 'red', 'white', 'blackglass'). more info.
reCaptchaLang string en Specifie the reCaptcha Lang you want to use (English 'en', Dutch 'nl', French 'fr', German 'de', Portuguese 'pt', Russian 'ru', Spanish 'es', Turkish 'tr'). more info.
reloadCaptcha bool true Specifie if captcha is reloaded after submit (true / false).
ayah bool false Specifie if you want to use AYAH in the form (true / false).
attachmentFile bool true Specifie attachment if file is activate (true / false).
maxAttachments integer 5 Specifie the maximum number of attachments files.
showBtnSend bool false Specifie if the btn send is visible when loading form when No Spam Control is activate (true / false).
customFileInput bool false Specifie if file input is custom skin (true / false).
submitAlertType string slide Specifie the type of alert displaying for submit (dialog / slide).
maxAttAlertType string slide Specifie the type of alert displaying for maximum attachments (dialog / slide).
urlLoaderImg string css/w2_contact_form/images/ajax-loader.gif Specifie the url of the loader image.
nospamInfoHover bool true Specifie if nospam infos is displaying on mouseover (true / false).

If you need for more informations about the rules for javascript validation view the web site of Jqueyr validate plugin.

PHP (general information not for wordpress install)


This script is based on the Zend Framework (version 1.11.11) Mail, Mime and Translate components (Zend Framework).

The methods to configure your PHP validation form and sending email.

You can easily configure the parameters of the Form in the "w2ContactForm.php" file.
the process of form validation is simple. When the form is submitted the request is sent to file w2ContactForm.php. This file is a PHP class that can handle the request sent by the form. At the end of this file (treatment section) you will find the source code that calls the class w2ContactForm and configure its parameters with the corresponding methods.
Here is the list of methods that you can use to configure the validation PHP contact form:

View the technical instructions below for more informations and comments in the source code (to the end of file w2ContactForm.php in the "Treatment" section).

Code examples:

This is an example of basic configuration (use the default parameters):
file: w2ContactForm.php (end of file in the "Treatment" section)

This is an example of full configuration:
file: w2ContactForm.php (end of file in the "Treatment" section)

You can use the methods you need to reconfigure your PHP form validation.

Technical informations:
Property Type Default Description
$this->mailSender String null Specifies the emails sender. If you don't specifie email sender the email used to send the mail will be the user mail (who submit the form).
$this->mail_recipient array null Specifies the emails recipients. You can specifies several emails for multiple recipient. If only one email is specifie the default email will be the first (index 1).
$this->autoResponder bool false Specifies if you want to use auto responder feature.
$this->mailResponder string null Specifies if you want to use an email different that email sender to the auto responder.
$this->site_name string null Specifies the name of your web site.
$this->requiredFields array array('recipient', 'mail', 'subject', 'message') Specifies the required fields for the form validation. The fields nspc and nspc2 are used for the nospam control.
$contact->setBodyMessageFields array null Specifies the fields for adding them in the mail body message (exammple: array('mail' => 'E-mail', 'message' => 'Message')) - if you don't specifie field all the fields will be automatically added to the mail body message.
$contact->setMailSubject string null Specifies the subject of the email if don't have any subject field in your form.
$this->htmlFields array array('message') Specifies the fields need HTML encodage (example: textarea). For more security, by default the HTML is not accepted.
$this->acceptHtmlContent bool false Specifies if HTML content is accepted in the email message (for the textarea form element).
$this->utf_8_encode bool true Specifies if the HTML form is encoded in utf_8.
$this->uploadsFolder string dirname(__FILE__).'/uploads' Specifies the folder for uploads attachments files in your server.
$this->max_file_size integer 1000000 (1mo) Specifies the max file size for the attachments files (in octet).
$this->maxAttachmentFiles integer 5 Specifies the maximum number of attachment files.
$this->extFile_ok array array('pdf', 'doc', 'docx', 'jpeg', 'jpg', 'png', 'gif') Specifies the accepted extensions (.jpg, .png, .pdf ...) for the attachments files.
$this->deleteUploadsAfterSending bool true Specifies if you want to delete files uploaded after email sending.
$this->antiSpamTimeControl array array('min' => '5', 'max' => '3600') Specifies the minimum and maximum time between submission of the form (in seconds).
$this->autoCHMOD bool false Specifies if you want the script configure the CHMOD for "uploads" folder.
$this->noSpamControl bool true Specifies if you want to use no spam control (drag and drop).
$this->reCaptcha bool false Specifies if you want to use recaptcha for validation form.
$this->ayah bool false Specifies if you want to use AYAH for validation form.
$this->lang string en Specifies if you want to use translation file "w2_cf_notifications.tmx" - internationnalization with simple .tmx file (laguages/w2_cf_notifications.tmx).
$this->notificationText Object Zend Translate null Specifies the notifications messages for erros and success.
date_default_timezone_set('America/New_York'); timezone America/New_York Specifies the date_default_timezone_set for your script. It depends of your country. For more informations look at the php manual.

Sources and credits:


Script and library used for this Form: