Stop Hubspot forms from redirecting or showing a Inline message

resolver
Highlighted
Colaborador ocasional

Hey, I'm building form where I do not want the user to experience a URL redirect or the form disappearing and displaying an inline success message.

 

In essence, I want the form to remain untouched, and I'll animate the submit button to communicate when the form data is ready for submit, and then another animation when the form data is submitted. I'm expecting I'll need to use the global event forms for onFormSubmit and onFormSubmitted.

 

Below is an example of a script where I'll show and hide <span>'s on the submit button to dispay when the form is being sent, and then when the font is Sent.

window.addEventListener("message", function(event) {
  if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {

    $(".hs-form input[type=submit]").val('').after("<span class='default-state-msg'>Submit</span>", "<span class='sending-state-msg hide'>Sending...</span>", "<span class='done-state-msg hide'>Sent</span>");

  }

  if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {

    $(".hs-form default-state-msg").addClass('hide');
    $(".hs-form sending-state-msg").removeClass('hide');
  }

  if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {

    $(".hs-form sending-state-msg").addClass('hide');
    $(".hs-form sent-state-msg").removeClass('hide');

  }

});

Is it even possible to force the form to not redirect/display inline message but still send the form data? Is it also possible to add a delay before onFormSubmit and onFormSubmitted so I can have an animation run for about a 1000ms to the user can see the message in getting ready to be sent?

Here's an example where I took inspiration from and that I'm trying to acheive:
https://codepen.io/nicolasjengler/pen/PJKqby

Thanks!

Responder
0 Me gusta
1 Soluciones aceptada

Soluciones aceptadas
Highlighted
Moderador de HubSpot

Hi again, @david-at-bold.

 

I don't know of a way to override a HubSpot form's inline or redirect behavior.

 

Given your use case, you may find it easier to build out a custom form and submit the data to a HubSpot form with this endpoint. Leveraging the Forms API will give you full control over your front end form.

Isaac Takushi

HubSpot Developer Support
Responder
0 Me gusta
2 Respuestas 2
Highlighted
Moderador de HubSpot

Hi again, @david-at-bold.

 

I don't know of a way to override a HubSpot form's inline or redirect behavior.

 

Given your use case, you may find it easier to build out a custom form and submit the data to a HubSpot form with this endpoint. Leveraging the Forms API will give you full control over your front end form.

Isaac Takushi

HubSpot Developer Support
Responder
0 Me gusta
Colaborador ocasional

Thanks, I'll look into it. Maybe this is the best solution.

Responder
0 Me gusta