Preventing default form submit does not trigger hsFormCallback when submitting manually

Develop, Build & Integrate APIs & Integrations
1

Hi,

I added a phone validation step (through Twilio API) in my embedded form by preventing form submit when someone click on the submit button, then I want to send the form data to ChiliPiper and trigger their scheduling service (it’s on a WordPress page):

hbspt.forms.create({
region: region,
portalId: portalId,
formId: formId,
onFormReady: function($form) {
document.querySelector("input[type=submit]").addEventListener("click", function(event) {
 event.preventDefault();

 let phoneNum = jQuery('input[name="phone"]').val();

 //ajax - api call for phone

 jQuery.ajax({
 method: 'GET',
 url: ajaxUrl,
 data: {
 action: 'twilio_phone',
 nonce: nonce,
 phone: phoneNum,
 },
 success: function (response) {
 console.log(response);
 if(response.success) {

 /* code if phone is valid */
 $form.submit();

 } else {
 /* displays custom error message */
 }

 } else {
 /* displays custom error message */
 },
 error: function (response) {
 console.log(response);
 /* displays custom error message */
 }
 }); 
 }, false);
 },
 onFormSubmit: function($form) {

 const cpTenantDomain = value1;
 const cpRouterName = value2;

 // Listen for form submitted message
 window.addEventListener("message", (event) => {
 if (
 event.data.type === "hsFormCallback" &&
 event.data.eventName === "onFormSubmit" 
 ) {

 var lead = event.data.data.reduce(
 (obj, item) => Object.assign(obj, { [item.name]: item.value }),
 {}
 );
 ChiliPiper.submit(cpTenantDomain, cpRouterName, {
 map: true,
 lead: lead,
 });
 }
 });
 }
 });

The thing is the “message” event is not triggered and the form data is not sent to ChiliPiper. It seems that using $form.submit() method does not send a hsFormCallback event or something is preventing it.
Is there a different way to trigger the form submit or gathering the form data so I could send it to ChiliPiper?
Thanks,

2

Hi, @GPiatek :waving_hand: Thanks for reaching out. Were you able to make any progress here?

Best,

Jaycee

3

Hi Jaycee,
I found a workaround by having a transparent html element on top on the submit button that trigger my phone validation before simulating a click on the submit button. It’s not ideal and it interferes with integrated Hubspot form inputs validation (I need to do manual extra validation before submitting the form), but it does send the data to ChiliPiper.

I am still looking for a better solution, ie is preventing the default form submit forces me to use the HubSpot form API to send the data?
Thanks,