Hello,
Here is a tutorial to install the Captcha from Google (
reCAPTCHA) in a BizForm for Kentico.
Sources : - From
Kentico Developer's guide.
- From
reCAPTCHA developer's guide.
Tutorial :1. Log in or sign in a Google account and
get a public and private key for the reCAPTCHA webservice.
2. Open the web project in Visual Studio (or Visual Web Developer) using the WebProject.sln file or using File -> Open -> website in Visual Studio.
3. Right-click the CMSFormControls folder and choose Add New Item.Choose to create a new Web User Control and call it recaptcha.ascx.
4. Add the following code in the recaptcha.ascx file :<%@ Control Language="C#" AutoEventWireup="true" CodeFile="recaptcha.ascx.cs" Inherits="CMSFormControls_recaptcha" %>
<%@ Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha" %>
<recaptcha:RecaptchaControl
ID="recaptcha"
runat="server"
PublicKey="enter your public key here"
PrivateKey="enter your private key here"
Theme="red"
/>
You can find all options on the
reCAPTCHA developer's guide.
5. Switch to the code behind. Add the following code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class CMSFormControls_recaptcha : CMS.FormControls.FormEngineUserControl{
protected void Page_Load(object sender, EventArgs e){
}
public override bool IsValid(){
Page.Validate();
if (Page.IsValid){
return true;
}
else{
return false;
}
}
}
6. Login to Kentico backoffice. Go to Site Manager -> Development -> Form controls and click New form control. Enter the following values:
- Control display name: Recaptcha
- Control code name: RecaptchaControl
- Control file name: ~/CMSFormControls/recaptcha.ascx
Check the boxes :
- Use control for text
- Show control in document types
- Show control in BizForms
and click OK.
7. Go to CMS Desk -> Tools -> BizForms:Edit your form. Go to Fields tab and add a new tab:
- Column name: SecurityCode
- Show on public form: check
- Field caption: Security Code
- Field type: select "Recaptcha"
- Maximum length: 100
- Allow empty value: check
- Default value: (empty)
and click OK.
Tips:As the
Customizing the Look and Feel of reCAPTCHA page explains, you can customize the captcha.
I try to use the "custom" theme. But it seems to works only if you add Javascript to your CMSformControl.
See below:
<recaptcha:RecaptchaControl
ID="recaptcha"
runat="server"
PublicKey="enter your public key here"
PrivateKey="enter your private key here"
Theme="custom"
/>
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'custom',
custom_theme_widget : 'recaptcha_widget',
lang: '<%=CMSContext.CurrentDocument.DocumentCulture.Substring(0,2)%>'
};
</script>
<div id="recaptcha_widget" style="display:none">
Here you have to put all the captcha tags, as explain in the Customizing the Look and Feel of reCAPTCHA page.
</div>
Please note here the <%=CMSContext.CurrentDocument.DocumentCulture.Substring(0,2)%> get the current language (like "fr" or "en"). It can be usefull for multiple language web sites.