Where should I enter the secret key for reCAPTCHA when using custom code instead of the Webflow component?

If you're using Google reCAPTCHA with custom code in Webflow (instead of Webflow's built-in component), the secret key is not added to Webflow itself—it's used only on your backend server.

​

1. Use the Site Key in Your Webflow Embed

​

• Webflow's front-end (custom code blocks) only uses the site key from reCAPTCHA.
• This site key is used in the script called from Google's servers and in the data-sitekey attribute of the reCAPTCHA widget.

​

2. Use the Secret Key on Your Server

​

• The secret key must be used exclusively on your server-side code to validate the reCAPTCHA response sent from the client.
• After the form is submitted, validate the g-recaptcha-response token by sending a POST request to Google’s reCAPTCHA API.
• The POST request should include:
• secret: your secret key
• response: the token returned by the reCAPTCHA widget
• remoteip (optional): the user's IP address

​

  API endpoint to verify:  

  https://www.google.com/recaptcha/api/siteverify

​

3. Webflow Hosting Has No Server-Side Logic

​

• Since Webflow does not provide a backend server by default, you'll need to use an external service (like Zapier, Make, or a custom backend on platforms like Firebase, AWS, or a Node.js server).
• Embed the front-end reCAPTCHA code in Webflow using Before </body> custom code section or in an Embed element.

​

4. Security Notes

​

• Never expose your secret key in Webflow's custom code (front-end), as it can be seen by anyone and abused.
• Always keep reCAPTCHA secret key validation on a secure, private server.

​

Summary

​

Enter the reCAPTCHA secret key only in your backend server logic. Use the site key in Webflow’s custom code to render the widget, and send the token to a backend that uses the secret key to validate the response.