Google recaptcha in non-hubspot forms

Developer Support APIs & Integrations
1

Hi

I’m testing the non-hubspots forms integration. With a simple form it works fine:

<style>
	#btnCreate {
		background-color: #FF6347;
	}

	#btnCreate:hover {
		background-color: #F04D30;
	}	
</style>
<form action="[ENDPOINT]" method="get">
	[...]Several inputs[...]
	<div style="text-align: center;">
		<input id="btnCreate" type="submit" value="Crear cuenta" style="border: 0px solid #000000; border-radius: 10px; font-family: Aileron; font-size: 20px; font-weight: 700; box-shadow: 0px 5px 5px #BE7062">
	</div>
</form> ​

It creates a contact on Hubspot and out backend can access to that contact to add tasks and do stuff

But I am unable to make it work with Google Recaptcha v3 (https://developers.google.com/recaptcha/docs/v3#programmatically_invoke_the_challenge). So far on our frontend we invoked the challenge programmatically and only after validation the action was executed. But reading Hubspot documentation (Use non-HubSpot forms y Pop-up forms (legacy) | Frequently Asked Questions) I understand that I cannot include Google Recatcha as usual and then using Javascript submit the form, is that right? Something as:

<style>
	#btnSend {
		background-color: #FF6347;
	}

	#btnSend:hover {
		background-color: #F04D30;
	}	
</style>
<form id="web_contacto" action="[ENDPOINT]" method="post" name="web_contacto">
	[...]
	<div style="text-align: end;">
		<button id="btnSend" style="border: 0px solid #000000; border-radius: 10px; font-family: Aileron; font-size: 16px; font-weight: 700; box-shadow: 0px 5px 5px #BE7062" class="g-recaptcha" 
 data-sitekey="..." 
 data-callback='onSubmit' 
 data-action='submit'>Enviar</button>
	</div>
</form> 

[...]

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

<script>

	function onSubmit() {

		[...]
 document.getElementById("web_contacto").submit();

	};

</script>

This works as intended on the front, the form is sent, and on the back, the server do the stuff it has to do, but it does not create a contact in Hubspot nor registers the form submission on the marketing → lead caption → forms page. So I’m guessing that acording to what I have understand from the documentation, it I use js to submit the form, Hubspot does not register it.

Am I understanding it correctly? If that’s the case, whats the recommended practice to use Google recaptcha and Hubspot on the same form. If not, what else am I doing wrong?

2

Hi, @Becadvisor :waving_hand: Thanks for your question. Do you have a link to a live example? “Seeing” the issue helps the community better understand the issue.

Based on the link you provided, I am wondering if the issue is due to:

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

Additionally, have you considered manually sending the form data to HubSpot using the Forms API after you’ve validated it with reCAPTCHA?

Best,

Jaycee

3

Thanks Jaycee

That’s what I was asking, how exactly Hubspot captures data to know what I can and cannot do as a workaround. It seems Hubspot only works if there is an input with type=“submit” on the form, so I’m guessing it attaches some handler to any element lika that it founds? Is there any documentation on how it actually works?

Regarding sending manually the data, besides the actual form data, what else do I need to send so Hubspot can identify the contact’s origin as a specific Google Ad so it is considered a conversion on Hubspot > Marketing > Ads? (That’s the only point of this form, as our Facebook Ads do get registered as conversions, but the ones from Google Ads do not)