# Integrating google recaptcha to a contact form **URL:** \ **Category:** Technical Questions\ **Tags:** custom-components, nextjs\ **Created:** [May 18, 2024, 6:59am UTC](https://forum.builder.io/t/integrating-google-recaptcha-to-a-contact-form/5606 "2024-05-18T06:59:15Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![sanjana](https://avatars.discourse-cdn.com/v4/letter/s/7c8e57/32.png) [@sanjana](https://forum.builder.io/u/sanjana)\ **Post date:** [May 18, 2024, 6:59am UTC](https://forum.builder.io/t/integrating-google-recaptcha-to-a-contact-form/5606/1 "2024-05-18T06:59:15Z")
**What are you trying to accomplish** I want to integrate the google recaptcha to contact us form\* **Screenshots or video link** ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/1/1b867bafe4591c7be572bbbe8c92ba0a7fe7043a.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/426cac41e7fbedc3bccda8ae42e9e0dc7ac8b618.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/b879a233ac75884685843f69be3c2da0546e36ba.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d83da3af4a704e530c3f51e29a07f15ec0392d04.png) **Code stack you are integrating Builder with** _e.g. NextJS_ \*\*description What I need is to include Google reCAPTCHA in the contact us form on our website. I was able to achieve this by creating a custom component. Now, I am trying to validate the CAPTCHA on form submission. For that, I implemented the `validateRecaptcha` method and passed it to the context through `BuilderComponent`. However, I am struggling to fetch the CAPTCHA response token from the Builder visual editor to pass to the `validateRecaptcha` method. I can see the value as a form field in the email that contains the form submission. What I need to do is capture the `g-recaptcha-response` in the custom code on submit button click and pass it to the `validateRecaptcha` method, which is available in my code base. I tried to bind it via `event.target.value` on reCAPTCHA submit/click, but the value is empty. Any help would be greatly appreciated.!! ---
**Author:** ![sanjana](https://avatars.discourse-cdn.com/v4/letter/s/7c8e57/32.png) [@sanjana](https://forum.builder.io/u/sanjana)\ **Post date:** [May 19, 2024, 12:49pm UTC](https://forum.builder.io/t/integrating-google-recaptcha-to-a-contact-form/5606/2 "2024-05-19T12:49:24Z")
I was able to save the response in local storage and use it in the code base. Now my issue is how to avoid sending the g-recaptcha-response field in the email. Any idea on this? ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/b879a233ac75884685843f69be3c2da0546e36ba.png) ---
**Author:** ![anon43891756](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@anon43891756](https://forum.builder.io/u/anon43891756)\ **Post date:** [May 22, 2024, 6:16am UTC](https://forum.builder.io/t/integrating-google-recaptcha-to-a-contact-form/5606/3 "2024-05-22T06:16:27Z")
> [@sanjana](#): > > What I need is to include Google reCAPTCHA in the contact us form on our website. I was able to achieve this by creating a custom component. Now, I am trying to validate the CAPTCHA on form submission. For that, I implemented the `validateRecaptcha` method and passed it to the context through `BuilderComponent`. However, I am struggling to fetch the CAPTCHA response token from the Builder visual editor to pass to the `validateRecaptcha` method. I can see the value as a form field in the email that contains the form submission. What I need to do is capture the `g-recaptcha-response` in the custom code on submit button click and pass it to the `validateRecaptcha` method, which is available in my code base. I tried to bind it via `event.target.value` on reCAPTCHA submit/click, but the value is empty. Hi @sanjana Welcome to [Builder.io](http://Builder.io) Forum! To avoid sending the `g-recaptcha-response` field in your email, you need to ensure that this field is not included when you handle the form data on the client-side before sending it to your backend or email service. Here’s how you can do this: ### Step-by-Step Guide to Exclude `g-recaptcha-response` Field 1. **Handle Form Submission** : - Capture the form submission event. - Manipulate the form data to exclude the `g-recaptcha-response` field. - Send the modified form data to your backend or email service. #### Step 1: Capturing Form Data and Excluding `g-recaptcha-response` First, ensure you have set up your component for form submission and have integrated reCAPTCHA correctly. #### Step 2: Handling reCAPTCHA Make sure to handle reCAPTCHA correctly by adding it to your form and ensuring the token is properly set. ### Summary: 1. **Handle Form Submission** : Capture form submission and prevent default behavior. 2. **Exclude Field Before Sending** : Create a clean form data object excluding the `g-recaptcha-response` field and send this object to your backend. 3. **Recaptcha Token Handling** : Ensure the reCAPTCHA token is handled correctly and used only where necessary (validation), but excluded from the email content sent. By following these steps, you can ensure that the `g-recaptcha-response` field is used for verification purposes but not included in the email content sent from your application. ---
**Author:** ![sanjana](https://avatars.discourse-cdn.com/v4/letter/s/7c8e57/32.png) [@sanjana](https://forum.builder.io/u/sanjana)\ **Post date:** [May 22, 2024, 11:06am UTC](https://forum.builder.io/t/integrating-google-recaptcha-to-a-contact-form/5606/4 "2024-05-22T11:06:42Z")
Hi @anon43891756 Thanks for your response. Yes, I have already fixed the issue by providing a custom code for form submission. I’ve posted it here in hopes that it can help someone with a similar issue. ```const let data = null; const form = document.forms["contactForm"]; try { event.preventDefault(); data = await context.validateCaptcha(); if (data.ok) { state.invalidCaptcha=false const formData = new FormData(form); formData.delete("g-recaptcha-response"); const url = `https://builder.io/api/v1/form-submit?apiKey=my_api_key&to=to_email==&name=contactForm`; fetch(url, { method: "POST", body: formData, }) .then((response) => { console.log("response", response); }) .catch((error) => { console.error("Error:", error); }); } else{ state.invalidCaptcha=true } } catch (error) { console.error("Error:", error); } }; handleSubmit(); ``` validCaptcha is defined in the codebase, and I have passed it as a function through builderComponent. ```auto ```