This article will show you how you can use your own custom Captcha generated by KeyCAPTCHA. These steps are provided as-is with no warranties. You break it, you fix it....;)
NOTE: Each time you make modifications to your form, you will need to repeat this process. So make sure your form is completed before you follow these steps.
Step 1
Locate the form's saved .html file and edit that file. Paste in the following markup and place it where you want the CAPTCHA to appear. Typically this should be right after the last <div> form element on the page:
Before:
<div class="fb-textarea">
<textarea style="resize: none; max-width: 960px; " id="item7_textarea_1"
maxlength="10000" placeholder="" data-hint="" name="textarea7">
</textarea>
</div>
After:
<div class="fb-textarea">
<textarea style="resize: none; max-width: 960px; " id="item7_textarea_1"
maxlength="10000" placeholder="" data-hint="" name="textarea7">
</textarea>
</div>
<!-- keycaptcha div start-->
<div id="item" class="fb-item fb-100-item-column" align="center">
<!--FB_KEYCAPTCHA-->
</div>
<!-- keycaptcha div end -->
Step 2
Download the KeyCAPTCHA reference files here. Upload both the formpage.cls.php and keycaptcha_class.cls.php files into the fbapp/php folder. Next, edit the formpage.cls.php file and search for %YOUR_PRIVATE_KEY_FROM_JOOMLA_INSTRUCTION% and replace that with your key obtained from your account through KeyCAPTCHA.
Important Tip: When you are adding your site to obtain your key, make sure to use the CMS: Joomla. Any other setup will not work.
Step 3
Upload the validator.inc.php file into your fbapp/inc folder.
Step 4
In the root folder where your form files are located, edit the form.cfg.php file and scroll all the way to the bottom until you find "rules":. The very last character of that line will contain }},
Next, insert between the two }} this line of text replacing %YOUR_PRIVATE_KEY_FROM_JOOMLA_INSTRUCTION% and replace that with your key obtained from your account through KeyCAPTCHA.
,"keycaptcha":{"captcha":"keycaptcha","private_key":"%YOUR_PRIVATE_KEY_FROM_JOOMLA_INSTRUCTION%",
"fieldtype":"captcha"}
Before (example):
"rules":{"name":{"label":"Name","fieldtype":"text"},"password3":{"minlength":5,"label":"Password","fieldtype":"password"},"email":{"email":true,"label":"Email","fieldtype":"email"},"bdau":{"date":true,"label":"Birth Day","fieldtype":"date","date_config":{"minDate":null,"maxDate":null,"dateFormat":"US_SLASHED"}},"url":{"url":true,"label":"Web Address","fieldtype":"url"},"tel9":{"phone":"phoneUS","label":"Phone Number","fieldtype":"tel"},"textarea7":{"label":"Comments","fieldtype":"textarea","maxlength":"10000"}},
After (example):
"rules":{"name":{"label":"Name","fieldtype":"text"},"password3":{"minlength":5,"label":"Password","fieldtype":"password"},"email":{"email":true,"label":"Email","fieldtype":"email"},"bdau":{"date":true,"label":"Birth Day","fieldtype":"date","date_config":{"minDate":null,"maxDate":null,"dateFormat":"US_SLASHED"}},"url":{"url":true,"label":"Web Address","fieldtype":"url"},"tel9":{"phone":"phoneUS","label":"Phone Number","fieldtype":"tel"},"textarea7":{"label":"Comments","fieldtype":"textarea","maxlength":"10000"},"keycaptcha":{"captcha":"keycaptcha","private_key":"%YOUR_PRIVATE_KEY_FROM_JOOMLA_INSTRUCTION%",
"fieldtype":"captcha"}},
The rules you see above will be unique to each form depending on the elements you added. The important part is to get the code in-between the }}. When submitting your form, if you receive an error "Failed to decode data", that means you have incorrectly pasted in your code into the form.cfg.php file.
That is it!
Your new keycaptcha will now appear on your form.
