Lead Submissions

On V4 we made the decision that every form submission should be verified with Recaptcha V3. As Recaptcha V3 runs in the background and doesn’t require any user challenges this shouldn’t be an issue for any clients.

It is also a common requirement for clients using Google Analytics to send GA events to the dataLayer using Google Tag Manager on each lead form submission.

Due to these requirements, each lead form submission should ultimately be executed via the submitLeadForm function (/utils/submit-lead-form.ts).

Eg. usage

submitLeadForm<CustomFormParams>(formData, handleLeadSubmission, e, 'custom_form');
Copy

The grecaptcha api has a ready method that will only execute the lead submission if all the required grecaptcha code has been properly loaded and attempting to get a grecaptcha token without being wrapped in grecaptcha.ready() runs the risk of a race condition where the required code may or may not be loaded in time.

Unfortunately, grecaptcha.ready() does not return a ready state that we can use to externally tell if recaptcha is “ready”. Instead, we have to fetch the recaptcha token and ultimately submit the lead form from inside grecaptcha.ready(). This means that we have to define our submit handler for the lead and pass it in as a callback to be executed inside grecaptcha.ready() following the request to fetch the recaptcha token.

Eg. submit-lead-form.ts

grecaptcha.ready(async () => {
  const token = await grecaptcha.execute(process.env.NEXT_PUBLIC_CAPTCHA_VERIFY_API_SITE_KEY!, {
    action: action || 'submit',
  });
  if (token) {
    formData.captchaToken = token;
    sendFormGAEvent(event);
  }
  submitHandler(formData);
});
Copy

Therefore the formData will also need to be passed to submitLeadForm to be submitted by the callback handler.

submitLeadForm will also send GA events to the dataLayer after successfully fetching the recaptcha token. As the sendFormGAEvent function uses information from the form's data attributes to create the event, eg. data-ga-name, it is also necessary to pass the event to submitLeadForm so that the data attributes can be collected from the target form.

Eg.

const form = e.target as HTMLFormElement;
const name = form.getAttribute('data-ga-name');
Copy