Recaptcha for Non-Hubspot forms

production_hog · ‎Jul 8, 2019

I have a form the I custom built from scratch is there any way i can still use recaptcha on it and still have the information still collected by the tracking code

according to the article below it doesnt seem like its possible but i thought i would ask anyways just in case there is some sort of work around

https://knowledge.hubspot.com/articles/kcs_article/non-hubspot-forms/use-non-hubspot-forms#supported...

Rafa · ‎Sep 23, 2022

Use reCAPTCHA v2 instead. It works.

In the past few days, I have extensively tested Elementor forms integration with reCAPTCHA and HubSpot.

reCAPTCHA v2 works, v3 does not.
If you need further assistance, please answer this message.

WendyGoh · ‎Jul 10, 2019

Hi @production_hog ,

I hope all is well with you 🙂

Taking a look at the article, do you mind clarifying which section of the article mentioned that reCAPTCHA isn't supported on non-hubspot form?

Based on my knowledge and referencing this useful documentation to add the reCAPTCHA widget on form, we would need to include the javascript resources and g-recaptcha tag:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

and

<div class="g-recaptcha" data-sitekey="your_site_key"></div>

Referencing back to this documentation, and under the various reasons that HubSpot isn't capturing submissions sections, the installation of reCAPTCHA doesn't seems to falls under any of the reasoning and this means that using reCAPTCHA in a non-HubSpot form doesn't affect the form submission data. Form submission data can still be collected and view within HubSpot.

To further confirm this, I have also tried it out on my end by adding reCAPTCHA on a non-HubSpot form and I'm able to see that the form submission data in HubSpot.

Hope this helps to clarify!

production_hog · ‎Jul 10, 2019

Hey @WendyGoh,

I could be wrong and it doesn't say it directly but what i was referencing is right below the table of compatible form services where it says:

If your form is supported, but HubSpot is not capturing submissions, it's likely due to one of the following reasons:

...

Form has JavaScript bound to the form submit event or submit button click event. This is how the tool captures submissions and any other events, and can prevent HubSpot from knowing when submissions occur.

That's great it worked for you but i did a custom from scratch form and when recaptcha was on there hubspot wouldn't load the form into the submit event for work flows. Only when i took recaptcha off without making any other changes did it work and i even went over it with your tech support people.

Thanks!

WendyGoh · ‎Jul 10, 2019

Hey @production_hog, taking a further look into the Google reCAPTCHA documentation, I was previously using the auto rendering method which doesn't require specification of an onload callback function.

That said, when I tried the explicit rendering after an onload callback, I'm still able to see that the form data was collected in HubSpot.

Below is a sample code of my form:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  var onloadCallback = function() {
    grecaptcha.render('html_element', {
      'sitekey' : 'my_site_key'
    });
  };
</script>

</head>
<body>

<h2>HTML Forms</h2>

<form>
  <div id="html_element"></div>

  Email:<br>
  <input type="text" name="email">
  <br>
  First name:<br>
  <input type="text" name="firstname">
  <br>
  Last name:<br>
  <input type="text" name="lastname">
  <br><br>
  <input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
</script>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/{{ my_portal_id'.js"></script>
<!-- End of HubSpot Embed Code -->
</body>
</html>

If you try the above, does it work?

Also, do you mind sharing with me the set up of the reCAPTCHA on your form?

production_hog · ‎Jul 11, 2019

<input/>
<input/>
<input/>
<input type="submit" class="g-recaptcha" name="submit_this" data-sitekey="site_key" data-callback="recaptchaV2SubmitForm">

<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=cultureKey"></script>
<script>function recaptchaV2SubmitForm(response){return new Promise(function(){document.getElementById('form_id').submit();})}</script>

@WendyGoh this is the setup its recaptchav2 invisible

WendyGoh · ‎Jul 11, 2019

Hey @production_hog ,

Thanks for clarifying that. Based on the documentaton, I believe the javascript function needs to be included between the <head> </head> tag and before the javascript resources. I tried that and was able to pass the form data successfully back to HubSpot.

Also, I didn't include the parameter "hl=cultureKey" and this line of code "return new Promise" as following through the v2 invisibile documentation, it doesn't seems that the parameter and code was needed.

You might want to try including the javascript function between the <head> tag and removing the parameter.

ClaudiaN · ‎May 28, 2020

Hello @WendyGoh I'm having the same issue with this implementation. The form does not pass the information to HubSpot neither performs the action declared.

1. I've added the recaptcha JS code between the head tags;

2. The submit button is an <input> element and not a <button>

3. I've added the additional parameters to the form and to the input like so:

<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
      function onSubmit(token) {
        document.getElementById("newsletter_form").submit();
      }
    </script>
</head>
<form id="newsletter_form" action="/thank-you" method="get">
        <input type="text" name="name" value="" placeholder="Name" />
        <input type="email" name="email" value="" placeholder="Email" />
        <input data-sitekey="my_site_key_goes_here" data-callback="'onSubmit'" type="submit" name="button" value="join me" class="form-send-button g-recaptcha" />
      </form>

I still cannot get the form to pass the info to Hubspot. Any support is appreciated.

Best regards,

WendyGoh · ‎May 29, 2020

Hey @ClaudiaN,

On your portal 7509xxx, I'm able to see the form #newsletter_form ., .g-recaptcha and there's a form submission.

Looks like it works. As such, I'm curious to know if something changed?

ClaudiaN · ‎May 30, 2020

Hi @WendyGoh we deactivated the reCAPTCHA script to test and it works but when the script is enabled, it doesn't. When recaptcha script is enabled, then the 'submit' action does not result in any action (no submission nor redirect for example).

I'm guessing the Hubspot script is not firing due to the ReCAPTCHA JS script being bound to the submit event. Is that correct? Your support is greatly appreciated.

WendyGoh · ‎May 31, 2020

Hey @ClaudiaN,

As referencing this forum thread, it looks like user @jaspervangulik managed to get it working after changing it to an earlier version of the Recaptcha, could you try that out and see if it works?

Additionally, do also ensure that there aren't any other scripts which are bound to the submission event itself. HubSpot non-HubSpot form are not compatible with any forms which have any script bound to the submit event as this means we cannot bind the collected forms script to the event.

NicoElvino · ‎Sep 27, 2021

Hi Wendy, how are you? Sorry I jumped on this thread, but my question is related to this topic.

I created my HubSpot form, and due to having the "follow up" option on, the ReCaptcha is mandatory. When I go to my front end (I'm using React and Gatsby) and I install reCaptcha and register my site, everything loads but the form doesn't submit. It always gives me a POST error (400). It almost seems that the ReCaptcha that the HubSpot form autogenerates and the one my page generates are not the same one, f there are some issues with the integration, because it simply doesnt work 😞
Do you have any idea of what Im doing wrong, or how to make it work?
(just in case, if I go to my HubSpot form, delete the "follow up" and mandatory ReCaptcha, the form submits and works perfeclty, but when I turn "follow up" again (and the mandatory ReCaptcha), it breaks.

ClaudiaN · ‎Jun 9, 2020

Hi @WendyGoh thanks for following up but I'm already using the reCAPTCHA V2, which is the legacy version. I cannot downgrade anymore: there is no other option apart from V3.

So the reCaptcha is a JS script bound to the form submission, which Hubspot doesn't accept (seems like). Are there any parameters to pass to the script?

DonatoZZ · ‎Dec 27, 2019

Hi, HubSpot used to work flawlessly in my Non-Hubspot forms built with Elementor, right until I added a Recaptcha v3 field. The forms do work but HS does not collect data anymore. Do you have any suggestions how can I fix this?

Thanks,

Donato

APIs & Integrations