Integrating google recaptcha to a contact form

Technical Questions
,
1

What are you trying to accomplish
I want to integrate the google recaptcha to contact us form*

Screenshots or video link

image
image932×393 20.4 KB

image
image931×438 21.4 KB

image
image
image908×367 19.8 KB

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.!!

2

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

3

Hi @sanjana Welcome to 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.

1 Like
4

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.

  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.

<BuilderComponent
        content={content}
        data={data}
        model={model}
        context={{
          validateCaptcha: validateCaptcha,
        }}
      />
1 Like