Using jQuery to detect successful embedded form submission

[#1]

I have a form embedded in our website which is provided by the Hubspot embed code. I am trying to initiate some jquery upon a successful submission with no error messages. I've inserted the code I'm using, and while it technically works, it still works if you don't fill out the required fields. How can I detect when a form has validated and submitted? Thanks!

$("body").on("submit", ".reveal .hs-form", function(e){
e.preventDefault();
$( ".download-link" ).fadeIn( "fast", "linear" );
$( ".resource-form" ).fadeOut( "fast", "linear" );
});

[Derek_Gervais]

Hi @Robbie_Edwards,

Denis is correct, but the thing to remember is that the onFormSubmit callback isn't blocking, so you can't actually stop the form from submitting. If you need that level of customizability, you'd likely be better off creating a custom form and using the Forms API:

developers.hubspot.com

Submit data for a form

Send form submission data to HubSpot. This endpoint supports cross-origin AJAX (CORS) requests, allowing you to submit form data directly to HubSpot client-side using JavaScript.

[denis1]

@Robbie_Edwards You can use onFormSubmit callback function:

hbspt.forms.create({
  portalId: '',
  formId: '',
  onFormSubmit: function($form) {
    // YOUR SCRIPT HERE
    } 
});

[#4]

Hi Denis, thank you for this. I have tried this but now the form submits as normally without executing the jquery. Any ideas? I've inserted my updated JS below, minus the portalID and formID, which is filled out in my test.

hbspt.forms.create({
  portalId: '',
  formId: '',
  onFormSubmit: function($form) {
    $( ".download-link" ).fadeIn( "fast", "linear" );
    $( ".resource-form" ).fadeOut( "fast", "linear" );
    }
});