I raised this issue with HubSpot support - and unfortunately recieved a less than helpful “this isn’t a bug” response. But I am documenting it here for other people who will inevitably have the same or similar issue.
The problem:
HubSpot’s embedded forms have 2 callbacks that are very similar yet act very differently:
onFormSubmit
onFormSubmitted
The main difference being the order in which they are executed, (onFormSubmit before onFormSubmitted). However, the main issue is how HubSpot executes these callbacks in the context of form field validation.
All hubspot form fields are validated prior to the onFormSubmit callback being run. EXCEPT the phone number field. The phone number field validation is performed AFTER the onFormSubmit callback executes. Which doesn’t seem like a problem, until you realize that:
- The documentation explicitly says: “Callback that executes after form is validated”
- The onFormSubmit callback is passed a $form argument that allows you to access the form field values (useful for any advanced redirect logic or tracking necessary post-submission). The onFormSubmitted callback is not passed this same argument - therefore the callback is practically useless if you need to access the form field data at the point of the submission lifecycle.
So, if you utilize an onFormSubmit callback on a form that has a phone number field, and the form is submitted with an invalid phone number, the onFormSubmit callback will execute (even though it shouldn’t as stated in the documentation).
This IS a bug, all other form fields are validated prior to the onFormSubmit callback being executed, but for whatever reason, phone number fields don’t operate in this fashion.
PLEASE I beg you HubSpot - fix this. All fields should be valid before triggering either of those callbacks, and the current way it is built requires some extra hacky global variables to pass the $form object to the onFormSubmitted callback.
Also of note - the global callbacks suffer the same issues - the only difference being that the onFormSubmitted callback isn’t passed a data property containing the form field values (similar to what is mentioned above).
My support ticket for reference is #8566325