APIs & Integrations

david-at-bold
Membro

Stop Hubspot forms from redirecting or showing a Inline message

resolver

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!

0 Avaliação positiva
1 Solução aceita
IsaacTakushi
Solução
HubSpot Employee
HubSpot Employee

Stop Hubspot forms from redirecting or showing a Inline message

resolver

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

Associate Certification Manager

Exibir solução no post original

0 Avaliação positiva
3 Respostas 3
Pascal_Alberty
Membro

Stop Hubspot forms from redirecting or showing a Inline message

resolver

Working on the same thing for now.

By adding return false;  in onFormSubmit in your forms.create, this seems to be working

 

    onFormSubmit: function($form) {
    // your code
    return false;
    }

 

Regards

Pascal

 

0 Avaliação positiva
IsaacTakushi
Solução
HubSpot Employee
HubSpot Employee

Stop Hubspot forms from redirecting or showing a Inline message

resolver

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

Associate Certification Manager
0 Avaliação positiva
david-at-bold
Membro

Stop Hubspot forms from redirecting or showing a Inline message

resolver

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

0 Avaliação positiva