【Tracking code/SPA】 Contact is created on form submission errors

Develop, Build & Integrate APIs & Integrations
, , ,
1

I’m developing a SPA (Single Page Application) and facing an issue.

<Overview>

・Using tracking code in HTML to track users’ pageviews

・Using non-HubSpot form (HTML form) in HTML

・Submitting form data to my HubSpot form using this endpoint on backend.

<Problems>

The problem is, new contact is created automatically even though form is NOT submitted on errors.

(I assume contact will be updated when it already exists.)

<Expected behavior>

My application displays error messages when input values are invalid, which means form data is not sent to HubSpot form.

I don’t want contact created/updated on errors.

I assume it’s due to the specification that contact is created/updated when submit event is detected by tracking code.

<Concerns>

I’m also concerned that using tracking code and API endpoint together could result in the case where submitted data to HubSpot form is always identified as “From existing contact” on HubSpot form statistics info.

I think it could happen when new contact is created by tracking code on frontend, and then data is submitted to HubSpot form using API endpoint on backend.

<Questions>

1. Is there any way not to make contact create/update automatically?

2. Is there any alternate or better way to work it out on SPA?

3. Is there any way to avoid the problem mentioned in Concerns section?

Hope someone helps me to solve this issue.

2

Hello @egami
1. Is there any way not to make contact create/update automatically?
Use the preventDefault() method on the form’s submit event. How to use the onsubmit event handler to prevent contacts from being created or updated automatically.

<form onsubmit="return false;">
 ...
</form>

how to use the preventDefault() method to prevent contacts from being created or updated automatically.

<form onsubmit="event.preventDefault();">
 ...
</form>

2. Is there any alternate or better way to work it out on SPA?
One way is to use the HubSpot Embed API to embed a HubSpot form on your SPA. Another way is to use the HubSpot Web SDK to create and submit forms on your SPA.
HubSpot Embed API to embed a HubSpot form on your SPA.

<script src="https://js.hubspot.com/forms/embed.js"></script>

<script>
 var form = new HubSpot.Form("YOUR_FORM_ID");
 form.render();
</script>

HubSpot Web SDK to create and submit forms on your SPA.

import { HubSpot } from "hubspot-web-sdk";

const hubSpot = new HubSpot();

const form = new hubSpot.Form("YOUR_FORM_ID");

form.onSubmit(async (values) => {
 // Submit the form data to HubSpot.
 await hubSpot.forms.submit(values);
});

// Render the form.
form.render();

3. Is there any way to avoid the problem mentioned in Concerns section?
You can use the onsubmit event handler to check the form data before submitting it to HubSpot. If the form data is invalid, you can cancel the form submission and prevent a contact from being created or updated.
use the onsubmit event handler to check the form data before submitting it to HubSpot.

<form onsubmit="return validateForm();">
 ...
</form>

Function that can be used to validate the form data.

function validateForm() {
 // Check the form data.
 if (formData.email.trim() === "") {
 alert("Please enter your email address.");
 return false;
 }

 if (!/\S+@\S+\.\S+/.test(formData.email)) {
 alert("Please enter a valid email address.");
 return false;
 }

 return true;
}