Where should I enter the secret key for reCAPTCHA when using custom code instead of the Webflow component?
TL;DR
- Keep the reCAPTCHA secret key on a secure backend server, not in Webflow's frontend.
- Set up a backend endpoint to verify the reCAPTCHA token with Google's API.
- Add a hidden field and custom JavaScript in Webflow to fetch and submit the reCAPTCHA token.
- Redirect form submissions to your backend endpoint using a custom form action.
- Validate the token server-side and process the form based on Google's verification response.
If you're using Google reCAPTCHA with custom code in Webflow instead of Webflow's built-in reCAPTCHA element, you must handle the secret key securely on the server side, not within Webflow.
1. Understand Where the Secret Key Goes
- The reCAPTCHA secret key must never be added to the frontend (i.e., Webflow’s custom code section) because it would be exposed in the browser.
- The secret key is used to verify the reCAPTCHA token after a user submits the form. This verification step must happen on a secure backend server.
2. Set Up a Server-Side Endpoint
- You need to create a backend endpoint (using platforms like Make (Integromat), Zapier with Webhooks, Firebase Functions, AWS Lambda, etc.).
- This endpoint should:
- Accept the reCAPTCHA token submitted from the client.
- Send a POST request to
https://www.google.com/recaptcha/api/siteverifywith:- secret: your reCAPTCHA secret key
- response: the token received from the client
- remoteip (optional): user's IP
3. Modify Webflow Form to Include reCAPTCHA Token
- Add a hidden field to your Webflow form to carry the reCAPTCHA token (e.g.,
g-recaptcha-response). - Use custom JavaScript (in the footer or embed code) to:
- Initialize reCAPTCHA
- Get a token using
grecaptcha.execute() - Populate the hidden input field with the token before form submission
4. Route Webflow Form Data to Your Backend
- Use a custom form action URL that submits data directly to your server or automation tool, rather than Webflow’s native form handler.
- Embed this via form
actionattribute override in the<head>or using the Webflow Forms Plus tool.
5. Validate the Token Server-Side
- On your backend, receive the reCAPTCHA token and validate it using your secret key.
- Google will return a JSON response indicating success/failure.
- Use this result to determine whether to accept or reject the form submission.
Summary
To use reCAPTCHA with custom code, include your secret key only in the server-side verification logic—never in Webflow’s frontend. Create a backend endpoint to validate the reCAPTCHA response using the secret key securely and configure your Webflow form to send data to that endpoint.