How Do I Add a reCAPTCHA to Webflow?

by

Adding a reCAPTCHA to your Webflow website can help protect it from spam and malicious activities. reCAPTCHA is a widely-used security measure that requires users to complete a challenge to prove they are human. In this tutorial, we will guide you through the steps to add a reCAPTCHA to your Webflow site.

Step 1: Get reCAPTCHA API keys
To use reCAPTCHA, you need to obtain API keys from the Google reCAPTCHA website. Follow these steps:

  • Go to the Google reCAPTCHA website (https://www.google.com/recaptcha).
  • Click on the “Admin Console” button located in the top right corner.
  • Create a new site by providing a label and domain name.
  • You will receive two keys: Site key and Secret key. Keep these safe as you will need them later.

Step 2: Add reCAPTCHA script
In your Webflow project, navigate to the page where you want to add the reCAPTCHA. Open the page in the Designer and follow these steps:

  • Select an HTML Embed element from the Add panel.
  • Paste the following code inside the HTML Embed element:
    • <script src="https://www.com/recaptcha/api.js" async defer></script>

    This script loads the necessary resources for reCAPTCHA.

    Note: If you have multiple pages using reCAPTCHA, it is better to add this script in your project settings instead of adding it individually on each page.

Step 3: Add reCAPTCHA widget
Now, let’s add the actual reCAPTCHA widget to your Webflow form. Follow these steps:

  • Select the form element you want to protect with reCAPTCHA.
  • Open the Settings panel on the right and go to the “Custom attributes” tab.
  • Add a new custom attribute with the name “data-sitekey” and the value as your reCAPTCHA Site key obtained in Step 1.

Your form is now protected by reCAPTCHA! When users submit the form, they will be prompted to complete a challenge.

Step 4: Verify reCAPTCHA response
To ensure that user submissions are valid, you need to verify the reCAPTCHA response on your server. Here’s an example of how you can do this using PHP:

  • In your server-side code, retrieve the reCAPTCHA response sent by the client.
  • Make a POST request to Google’s reCAPTCHA API endpoint:
    • $url = 'https://www.com/recaptcha/api/siteverify';
$data = array(
    'secret'   => 'YOUR_RECAPTCHA_SECRET_KEY',
    'response' => $_POST['g-recaptcha-response']
);

$options = array(
    'http' => array(
        'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
        'method'  => 'POST',
        'content' => http_build_query($data)
    )
);

$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
$response = json_decode($result);

if ($response->success) {
    // Valid reCAPTCHA response, process the form submission.
} else {
    // Invalid reCAPTCHA response, show an error message or take appropriate action.
}

    Replace ‘YOUR_RECAPTCHA_SECRET_KEY’ with your reCAPTCHA Secret key obtained in Step 1.

    By following these steps, you can add a reCAPTCHA to your Webflow website and enhance its security. Remember to obtain the necessary reCAPTCHA API keys, add the reCAPTCHA script, and configure the reCAPTCHA widget on your forms.