Attaching Jquery function to form submission

BJSzyjakowski
Contributor

I have created a blog subscription bar that appears fixed at the bottom of a visitors screen after a specified duration of time after the DOM load. I am trying to attach the jquery slideUp() function to the form submission but am running into some snags. Mainly- the form submits but does not slide away... Any help would be appreciated. Here is my script:

$(function() {
	setTimeout(function() {
    $('#hideMe').slideDown(300);
  }, 15000);
  
  $('.sub-form-right form.hs-form').submit(function() {
    $('#hideMe').slideUp(300);
  });//end click
}); //end ready

I have my fixed nav bar split into two sections:
.sub-form-left contains some text
.sub-form-right contains the actual form

it is all housed in #hideMe.

Thanks for the help!

0 Upvotes
7 Replies 7
Mike_Eastwood
Key Advisor | Gold Partner

Hi BJS

There's an "onFormSubmit" attribute you can use with your HubSpot form's embed code.

The onFormSubmit should be able to trigger your JQuery function.

Here's the link to the docs: How to customize the form embed code

Have fun
Mike

0 Upvotes
BJSzyjakowski
Contributor

Mike -- thank you for the help, although it still appears to not be working for me. Could that be because the onFormSubmit() takes the $form as the argument? I need to hide the bar that is housing the form, not the form itself.

Is there something wrong with my JS? here is what I am looking at with the info that you gave me.

hbspt.forms.create({
 portalID: 'myportalID',
 formID: 'myformID',
 css: '' , //allows for stylesheet styles
 onFormSubmit: function($form) {
  $('#hideMe').slideUp(300);
}

That should make the fixed subscribe bar #hideMe slide out after the form submits, correct? I can get it to work just fine with a standard form but as soon as it is a hubspot form it doesnt work.

Thanks for the help.

-BJ

0 Upvotes
Mike_Eastwood
Key Advisor | Gold Partner

Hi BJ

Is it a public page? In other words can I have a look?

I'm self taught - so no JavaScript expert - but I've been fighting JavaScript to use HubSpot Forms in WordPress, Squarespace and even the HubSpot COS... so, I may be able to see something on your page.

Feel free to contact me directly if you don't want to post a link on here.
Mike at Webalite.com

0 Upvotes
BJSzyjakowski
Contributor

The site is public -- however, I dont have the subscribe bar up on there yet because I dont have it fully functional Everything is working fine with getting it to slide in on screen and getting it to format properly I am just having issues getting it to slideup on submit.

when I use the javascript in the documentation it says that hbspt isnt defined and is giving me an error.

I am on the same page as you it sounds like, in terms of Javascript understanding at least. Self taught/always learning haha.

0 Upvotes
Mike_Eastwood
Key Advisor | Gold Partner

Ok, if "hbspt" is undefined to me that implies some code is called when it hasn't loaded yet.

So, window.onload could help...

Here's an article that will explain: https://www.webalite.com/blog/hubspot-cos-design-tips-forms

What CMS are you using?
Mike

0 Upvotes
BJSzyjakowski
Contributor

Sure Sure -- So I had all of that code running in the $(function () { // your script here } so it was effectively loaded after the DOM. I am using the Hubspot CMS with this. I will take a look at that article in a few moments. Thanks for all of the help so far. I appreciate it, Mike!
-BJ

0 Upvotes
BJSzyjakowski
Contributor

Hey Mike -- If you are still interested in this at all I posted a bit more detailed version of all of my code here:
https://community.hubspot.com/t5/Content-Design-Questions/On-Form-Submit-Slide-form-Parent-div-off-o...