Hello,
We have a non-HubSpot form on our website page. Below this form, we have our HubSpot tracking code that reads the form input values and sends them to our Hubspot database of contacts when the submit button is clicked.
Ok, this is what was supposed to happen. But we have a problem.
Every time the user clicks on submit button, the form inputs are read and sent to our HubSpot account, even if the form is not fulfilled.
On our page, we have some scripts that send error messages to the user when the user forgets to fill some input.
However, even if the input is not filled, the tracking code still works and sends just part of the data.
Is there any way to avoid default submit listening on the tracking code, and just allow the submission listener when the inputs are all filled?
Thx for your help.
@joaobrosin - I’m new to HS but I did notice this behavior in the documentation. That is, the behavior is expected, and HS even has a “warning.” Read under the section: Before you get started
What would I do? I’d use JS to disable the submit button until all your other validation checks out.
How could I do it with javascript?
I have been trying to use “event.preventDefault()” on the form submit listener, but it doesn’t work =\
@joaobrosin , might be worth looking into the forms api.
So you would basically turn off the non HubSpot forms which is referenced in that doc that @mfs_cea_au provided then when you are ready to actually submit the data, trigger a post to the forms submit endpoint
@joaobrosin - See if this helps.
https://codesource.io/how-to-disable-button-in-javascript/
You’re not preventing the click per se, there is an property for disabled. Use that until you’re sure all your validation has passed.
I will disable the button. Good tip @mfs_cea_au
Thx!
@joaobrosin - One more tip…having done this myself…
In my JS I have an array of the expected fields as well. More or less to mitigate someone inspecting the form and mucking around with it. Mind you, they can do the same with the JS but again, I just want to slow them down or at least get them to move on sooner rather than later.
I’m not JS Genius, but having a look at this (for a WordPress plugin I tossed together) might help you.
https://gitlab.com/WPezPlugins/wpez-hubspot-newsletter-form-ajax/-/blob/main/App/assets/dist/js/wpez-hsnf-main.min.js
Note: There’s a JSON object that contains a lot of the actual values / settings so you’ll have to use your imagination a bit.