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.
Minimal requirements: PHP 5 or higher must be installed on your server.
Optionnal:
Include the stylesheet and javascript library in the Header (between <head></head>) of your html or php page.
Include the javascript instanciation of the plugin in the Header (between <head></head>) of your html or php page. You can include this code in a separate javascript file like your custom.js.
This is an example of the basic instanciation. You will find more infos about full configuration in Javascript section.
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).
View example HTML source code for more informations about how to configure the form (add or remove some features like "anti spam control", multiple or single recipient, add attachments ...).
Then you can add your own fields and specifie their rules for javascript validation and php validation (view Add a new field).
You can easily customize the appearance of the form with the css Files included (view comments in source code for more informations).
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" of the project:
in the demonstration I joined widgets ui (datepicker, buttonset). You can easily use any other skin for those widgets that you can find them in the the "css/ui/" folder.
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.
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). |
beforeSubmit | function | null | Callback for javascript validation. You can specify a callback function for javascript validation and create your own rules of validation (based on the jquery.validate plugin). more info |
submitSuccess | function | null | Callback for javascript validation. You can specify a callback function for submit success event. |
uiWidget | bool | true | Specifie if you want to use UI widget (datepicker, buttonset) (true / false). |
If you need for more informations about the rules for javascript validation view the web site of Jqueyr validate plugin.
This script is based on the Zend Framework (version 1.11.11) Mail and Mime components (Zend Framework).
IMPORTANT: The first configuration is to specifie the emails recipients.
Cofigure your email recipients:
Cofigure your email sender:
If you don't specifie email sender the email used to send the mail will be the user mail (who submit the form).
Cofigure your email responder:
If you don't specifie email responder the email used to send the mail (auto responder) will be the mail sender.
You can find all examples of configuration in the file "w2_acf/action.php".
You can easily configure the parameters of the Form in the "w2_acf/action.php" file.
the process of form validation is simple. When the form is submitted the request is sent to file "w2_acf/action.php". This file is a PHP script that can handle the request sent by the form. In this file 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:
$contact->setMailSender('no-reply@mywebsite.net'));
$contact->setMailRecipient(array('1' => 'youremail@mail.net', '2' => 'youremail2@mail.net'));
$contact->setAutoResponder(true);
$contact->setMailResponder('no-reply2@mywebsite.net');
$contact->setSiteName(array('name of web site'));
$contact->setRequiredFields(array('recipient', 'mail', 'subject', 'message'));
$contact->setBodyMessageFields('<p>E-mail: [mail]</p><p>Version: [version]</p><p>Phone: [phone]</p><p>Date of Birth: [datebirth]</p><p>Country: [country]</p><p>Web site: [website]</p><p>Message: [message]</p>');
$contact->setMailSubject = 'subject of the message';
$contact->setHtmlFields(array('message'));
$contact->setAcceptHtmlContent(true);
$contact->setUtf8Encode(true);
$contact->setUploadsFolder(dirname(__FILE__).'/uploads');
$contact->setMaxFileSize(1000000);
$contact->setMaxAttachmentFiles(5);
$contact->setExtFileOk(array('pdf', 'doc', 'docx', 'jpeg', 'jpg', 'png', 'gif'));
$contact->setDeleteUploadsAfterSending(true);
$contact->setAntiSpamTimeControl(5);
$contact->setAutoCHMOD(true);
$contact->setNoSpamControl(true);
$contact->setReCaptcha(true);
$contact->setAyah(true);
$contact->setLang('en');
This is an example of basic configuration (use the default parameters):
file: w2_acf/action.php
This is an example of full configuration:
file: "w2_acf/action.php"
You can use the methods you need to reconfigure your PHP form validation.
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 - 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 you don't use 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 (w2_acf/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. |
To configure your emails recipients There are two ways to make this:
You easily add a new field in the form.
First add the html element in the form:
If your field is not required, when the form submited, you can include the value of this field in the message of the email.
There is 2 ways to make it:
First add the html element in the form:
In this example the class "required" is used to specifie the field is required and the attributes type and minlength specifie the rules of validation (view Examples for more examples).
If your field is required you must add the name of the new field in the array "$this->requiredFields" width the method "setRequiredFields" (for PHP validation). When the form submited, you can include the value of this field in the message of the email.
There is 2 ways to make it:
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 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="shadow" type="text"/> </div>
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="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="shadow" type="text"/> </td> </tr>
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="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="shadow" type="email"/> </td> </tr>
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="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="shadow" type="number"/> </td> </tr>
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="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="shadow" type="url"/> </td> </tr>
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="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="shadow datepicker" type="date" style="width:80px"/> </td> </tr>
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="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="shadow" style="height:35px;"> <option value="1">value 1</option> <option value="2">value 2</option> </select> </td> </tr>
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 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 shadow select_multi" multiple="multiple" size="2"> <option value="1">value 1</option> <option value="2">value 2</option> </select> </td> </tr>
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>
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>
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="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="shadow" minlength="2" ></textarea> </td> </tr>
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="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="shadow" type="file"/> </td> </tr>
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 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 shadow" type="file"/> </td> </tr>
You can easily Add or Remove attachment feature in the form.
Specifie the parameter "attachmentFile" (true / flase) and if "attachmentFile" is True specifie the maximum number of attachments files with the parameter "maxAttachments" (integer):
You must use the methods below to configure the PHP form validation:
You can change the message for attachment restriction (file type, file size ...) in the attribute "notification" of the HTML DIV class="container_features":
You can easily create you own rules for javascript validation.
Specifie the parameter "beforeSubmit" (function) and create your function of validation (based on the jquery.validate plugin):
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.
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.
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:
For more safety you need to replace the default "encryption key" by your own "encryption key" (the parameter "key_encrypt") in the Class Contact (file w2_acf/w2ContactForm.php).
Specifie your encryption key for no spam control (only alphanumeric - not special character - max: 30 characters).
replace the "**************" by your own key.
To activate or inactivate the No Spam Control (it is activate by default) you can use this method:
$contact->setNoSpamControl(true);
To specifie the minimum time between submission of the form (it is 5 seconds by default) and the maximum time between submission of the form (it is 3600 seconds by default) you can use this method:
$contact->setAntiSpamTimeControl(array('min' => '5', 'max' => '3600'));
To add or remove the No Spam Control in the HTML form specifie the parameters below.
Use "noSpamControl" (true / false) for activate the no spam control in the form.
Use "noSpamControlType" (1 / 2) to select the type of No Spam Control (view Examples for more information).
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 the form.
Make sure the file "recaptchalib.php" is in the "w2_acf" folder. You can put it in the folder that you want but you need to respecifie the path to the file in the file "w2_acf/w2ContactForm.php" at the line 14 - require_once('recaptchalib.php');.
Configure the reCaptcha private key and validation in the file "w2_acf/w2ContactForm.php":
replace the "**************" by your private key.
configure the reCaptcha validation.
Add the reCaptcha JS script in the header of the page (between <head></head>):
You must specifie to the PLugin w2ContactForm that you want to use the reCaptcha.
The parameter "reCaptchaPublicKey" Specifie your reCaptcha PublicKey(replace the "**************" by your public key).
The parameter "reCaptchaId" Specifie an unqiue ID for HTML element where reCaptcha will be integrated (just specifie the ID do not create the element in the form).
The parameter "reCaptchaTheme" Specifie the reCaptcha theme you want to use ('clean', 'red', 'white', 'blackglass'). more info.
The parameter "reCaptchaLang" 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.
The parameter "reloadCaptcha" (true / false) specifie if the reCaptcha reloaded after form submit.
You can specifie the "theme" and the "lang" (more infos about recaptcha customization).
view example with recaptcha for more details about source code and view Javascript: for more details about parameter configuration.
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.
Copy your keys (publisher and scoring) and configure AYAH config file ("w2_acf/ayah/ayah_config.php").
IMPORTANT: Make sure the folder "ayah" is to the root of your web site. You can put it in the folder that you want but you need to respecifie the path to the file in the file "w2_acf/w2ContactForm.php" at the line 41 - require_once("ayah/ayah.php").
Configure the AYAH validation in the file "w2_acf/action.php":
Add the swfobject JS script in the header of the page (between <head></head>):
You must specifie to the PLugin w2ContactForm that you want to use the AYAH.
The parameter "ayah" Specifie that you use AYAH in the form.
view example with AYAH for more details about source code and view Javascript: for more details about parameter configuration.
If you need to change the langage of the notification message you can do it easily.
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).
After adding your langugages (if you need) in "languages/w2_cf_notifications.tmx" file just use the method:
$contact->setLang('fr');
to specifie the notification language in the form.
You can specifies the langage for notifications messages for w2ContactForm.
file: index.html
You will find some translation file for w2ContactForm in the folder "js/w2_contact_form/localization/".
file: index.html
Translation file example:
You can easily create your own translations files.
You can specifies the langage for notifications messages for javascript validation.
file: index.html
You will find all translation file for javascript validation in the folder "js/validation/localization/".
file: index.html
Translation file example:
You can easily create your own translations files.
You can specifie the langage for reCaptcha messages. If there ist a translation for your language.
Use the parameter "reCaptchaLang" 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).
include the code in the header of your page (between <head></head>).
You can send your email via SMTP. This feature can be really usefull if the PHP mail() function is disabled on your server or if you want to use your gmail account for example.
You can specify your own SMTP HOST (generally "smtp.domaine.com" - use "localhost" for Hosted Dedicated Server)
file: "w2_acf/action.php"
It is really simple to specify your own SMTP HOST.
If you use a specific SMTP connexion (with authetification) you can specify a configuration for your SMTP HOST.
file: "w2_acf/action.php"
This example present a SMTP configuration for google gmail (openSSL must be installed in your server to send mail via gmail smtp).
Script and library used for this Form: