Products

Courses

Resources

Company

Support

Products

Courses

Resources

Company

Support

Help Centre

How can we help?

Search Docs

Integrations

How to Add reCAPTCHA to Your Framer Forms

How to Add reCAPTCHA to Your Framer Forms

How to Add reCAPTCHA to Your Framer Forms

In this step-by-step guide, we will walk you through how to integrate reCAPTCHA into your Framer Forms to prevent bot submissions.

Step 1: Open Framer Forms Plugin

  1. Navigate to the Framer Plugin:

  2. Add the reCAPTCHA Component:

    • In the FramerForms plugin panel, scroll down to reCAPTCHA.

    • Drag and drop the reCAPTCHA component into your form.

Step 2: Get a Site Key from Google

  1. Go to the reCAPTCHA Website:

  2. Set Up Your reCAPTCHA:

    • Label Your reCAPTCHA: You can name this anything, such as “My Form”.

    • Select reCAPTCHA Type: Choose reCAPTCHA v2 and select the “I’m not a robot” checkbox option.

  3. Add Your Domain:

    • Copy your Framer domain (found in the Framer project settings).

    • Paste the domain into the domain field but remove the https:// and backslashes to ensure proper authentication.

  4. Submit the Form:

    • Click Submit and you will be provided with a Site Key.

Step 3: Paste the Site Key into Framer

  1. Copy the Site Key:

    • Copy the generated Site Key from Google.

  2. Paste the Site Key into Framer:

    • Go back to your Framer project.

    • In the reCAPTCHA component, paste the Site Key into the provided field.

Note: Since reCAPTCHA works only on your published site, you will need to publish your website for reCAPTCHA to work.

Step 4: Publish Your Website

  1. Publish Your Website:

    • Since reCAPTCHA works only on your published site (authenticated by your domain), you will need to publish your website for the changes to take effect.

  2. Preview the reCAPTCHA:

    • You’ll notice that without completing the reCAPTCHA, the form won’t submit.

    • When you complete the “I’m not a robot” checkbox, the form will successfully submit.

Enjoy Bot-Free Form Submissions!

reCAPTCHA Component Design Limitations: The appearance, design and behavior of the reCAPTCHA checkbox are controlled by Google and cannot be changed within FramerForms.

FramerForms – Build powerful, interactive forms inside Framer.

Framer Forms power ups for pros

Unparalleled form-building with FramerForms. Multi-step forms, file uploads, conditional logic & more!

FramerForms – Build powerful, interactive forms inside Framer.

Framer Forms power ups for pros

Unparalleled form-building with FramerForms. Multi-step forms, file uploads, conditional logic & more!

FramerForms – Build powerful, interactive forms inside Framer.

Framer Forms power ups for pros

Unparalleled form-building with FramerForms. Multi-step forms, file uploads, conditional logic & more!