Skip to main content

Add and customize a reCAPTCHA field on MVC layouts

Abstract

Set up, customize, and implement a reCAPTCHA field for MVC form renderings.

You can protect your website from robot attacks, spam, and abuse by implementing a CAPTCHA field for ASP.NET (non-MVC) layouts, or a reCAPTCHA field for MVC form renderings. Both CAPTCHA and reCAPTCHA fields require the site visitor to enter a combination of displayed symbols.

Note

The redirect functionality in Robot Attack Protection does not apply in the reCAPTCHA field. Instead, CAPTCHA will be shown on the same page.

To set up and configure reCAPTCHA, perform the following steps:

  1. In your web browser, ensure that you enable JavaScript.

  2. Register your website at: https://www.google.com/recaptcha/admin#list

    Upon registration, you receive a Secret key and a Site key to add reCAPTCHA to your site.

  3. Add the following settings to the Sitecore.MvcForms.config file in the \App_Config\Include\ folder: 

    <!-- Recaptcha private/secret key -->
      <setting name="WFM.RecaptchaSecretKey" value="" />
 <!-- Recaptcha public/site key -->
      <setting name="WFM.RecaptchaSiteKey" value="" />
</settings>

  4. Insert the Secret and Site keys in the appropriate setting value.

    Note

    You can specify the keys for reCAPTCHA version 1.0. In this case, add the keys to the web.config file into the <appSettings> node:

    <add key="RecaptchaPublicKey" value="[site key value goes here]" />
<add key="RecaptchaPrivateKey" value="[secret key value goes here]" />

  5. To change the error message for the reCAPTCHA field, navigate to and select the Captcha folder (/sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Complex/Captcha) and in the right pane, in the Data tab, in the Localized Parameters field, insert a new error message between the tags.

    Note

    For further details visit the reCAPTCHA Developer’s Guide website: https://developers.google.com/recaptcha/intro

  6. To customize the appearance and type of the reCAPTCHA field, in the right pane, in the Parameters field:

    • Change the color theme from light to dark – insert <Theme>dark</Theme>.

    • Change how the reCAPTCHA field is displayed from image to audio – insert <CaptchaType>audio</CaptchaType>.

Note

Web Forms for Marketers does not support parametrization of the Data-callback setting through the Content Editor, however you can customize the Recaptchafield.cshtml file.