Can someone help me get Google's new invisible Recaptcha to work on my custom Salesforce web-to-lead form in Webflow?

Published on
September 22, 2023

How to integrate Google's invisible reCAPTCHA with a custom Salesforce web-to-lead form in Webflow

Google's invisible reCAPTCHA is a powerful tool to prevent spam and abuse on online forms. By integrating it with your custom Salesforce web-to-lead form in Webflow, you can enhance the security and accuracy of form submissions. Here's a step-by-step guide to help you with the integration process:

  1. Get reCAPTCHA API keys:
  • Go to the reCAPTCHA website and sign in with your Google account.
  • Register your website by providing a label and domain name.
  • You will receive two reCAPTCHA keys: Site Key and Secret Key. Make sure to keep these keys secure as they are used to communicate with the reCAPTCHA service.
  1. Add reCAPTCHA script to your Webflow site:
  • In your Webflow Designer tool, go to the Project Settings and select the Custom Code tab.

  • In the Head Code section, add the following code to load the reCAPTCHA script:

    ```html

    ```

  1. Implement reCAPTCHA on the web-to-lead form:
  • Open your Salesforce web-to-lead form in the Webflow Designer.

  • Insert an HTML Embed component where you want the reCAPTCHA to appear. Assign it a unique class or ID attribute, e.g., "recaptcha-container".

  • In the HTML Embed component, add the following code to display the reCAPTCHA:

    ```html

    \`\`\`

    Replace "YOUR_SITE_KEY" with the Site Key you obtained in step 1.

  1. Configure reCAPTCHA verification in Salesforce:
  • Log in to your Salesforce account and navigate to Setup.
  • Search for "reCAPTCHA" in the Quick Find box and select "Web-to-Lead reCAPTCHA" under Security Controls.
  • Enable reCAPTCHA by checking the "Enable Web-to-Lead reCAPTCHA" checkbox.
  • Enter your Site Key and Secret Key (obtained in step 1).
  • Save your changes.
  1. Test the reCAPTCHA integration:
  • Preview your Webflow site and submit the web-to-lead form.
  • Google's invisible reCAPTCHA will automatically verify the submission in the background.
  • If the submission is successfully verified, it will be sent to Salesforce. Otherwise, an error message will be displayed.

By following these steps, you can successfully integrate Google's invisible reCAPTCHA with your custom Salesforce web-to-lead form in Webflow, enhancing your form's security and filtering out spam submissions.


Additional Questions:

  1. How can I obtain Google's invisible reCAPTCHA API keys?
  2. What benefits does integrating a reCAPTCHA with my web forms bring?
  3. Is it possible to use reCAPTCHA in other form builders apart from Webflow?