Attaching Jquery function to form submission


#1

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!


#2

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


#3

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


#4

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


#5

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.


#6

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


#7

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


#8

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-of-screen/m-p/193206#M6293