APIs & Integrations

david-at-bold
メンバー

Stop Hubspot forms from redirecting or showing a Inline message

解決

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 いいね!
1件の承認済みベストアンサー
IsaacTakushi
解決策
HubSpot Employee
HubSpot Employee

Stop Hubspot forms from redirecting or showing a Inline message

解決

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 いいね!
3件の返信
Pascal_Alberty
メンバー

Stop Hubspot forms from redirecting or showing a Inline message

解決

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 いいね!
IsaacTakushi
解決策
HubSpot Employee
HubSpot Employee

Stop Hubspot forms from redirecting or showing a Inline message

解決

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 いいね!
david-at-bold
メンバー

Stop Hubspot forms from redirecting or showing a Inline message

解決

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

0 いいね!