On Form Submit - Slide form Parent div off of screen

SOLVE
BJSzyjakowski
Contributor

Hey Guys and Gals,

I am have created a fixed subscribe bar that contains a brief message and blog subscription form that slides down and fixes itself to the bottom of the screen after 15 seconds of being on one of our blog pages. I want the whole bar to dissapear and slide off screen on the successful submission of the form. Something I can get to work on non-hubspot forms but for some reason the hubspot form is giving me a difficult time. Any help would be appreciated. 

Here is the HTML:

<div class="sub-container " id="hideMe">
  <div class="sub-wrapper clearfix">
    <div class="sub-form-left">
      <span class="text">Stay current on the latest manufacturing marketing trends!</span>
      <span class="mobile-text">Stay Informed</span>
    </div>
    <div class="sub-form-right">
      {% blog_subscribe "subscribe_designers_blog" select_blog="(myBlogID)", no_title=true , response_message="Thanks for Subscribing!", label="Blog Email Subscription", overrideable=False %}
    </div>
  </div>
</div> 

The CSS (no media queries):

/* fixes container to position on screen and sets size */
.sub-container {
  position: fixed;
  bottom: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 50px;
}

/*sets background color and clears any floats */
.sub-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #333;
  color: #fff;
}

/* floats section to left and sets contianer width */
.sub-form-left {
  position: relative;
  display: block;
	float: left;
  width: 60%;
  height: 100%;
}

/* verticaly and horizontally center text section */
.sub-form-left .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}
.sub-form-left .mobile-text {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}
/* floats section right and sets container width */
.sub-form-right {
  display: block;
  position: relative;
	float: left;
  width: 40%;
  height: 100%;
}

/* centers the form vertically delete width property to center H */
.sub-form-right form.hs-form {
	width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* allows the form to display inline */
.input, .actions, 
.hs_email.hs-email.hs-fieldtype-text.field.hs-form-field,
.hs_submit.hs-submit {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.sub-form-right .hs-button-primary,
.sub-form-right input[type="submit"],
.sub-form-right input[type="button"] {
	display: inline-block;
  width: 100px;
  color: #fff;
  background-color: #9f218b;
  border-radius: 5px;
  letter-spacing: 1px;  
}
.sub-form-right .hs-button-primary:hover,
.sub-form-right input[type="submit"]:hover,
.sub-form-right input[type="button"]:hover {
  display: inline-block;
  width: 100px;
  color: #fff;
  background-color: #9f218b;
  border-radius: 5px;
}

.sub-form-right input[type="email"] {		
  display: inline-block;
  width: 200px;
  margin: 0;
  border-radius: 5px;
}
.submitted-message {
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hs-form label {
  display:none;
}

and the Javascript&colon;

$(function() {
	setTimeout(function() {
    $('#hideMe').slideDown(300);
  }, 15000); 
  
	   hbspt.forms.create({
      portalId: '(myPortalId)',
      formId: '(myFormId)',
      css: '',
      onFormSubmit: function($form) {
        $('#hideMe').slideUp(300);
      } 
    }); //end Create

}); //end ready

.on(submit, function() {...} Doesnt seem to work for me with hubspot forms and someone else suggested that I try working it the way that I did here but that doesnt seem to be working either. Any help would be appreciated! 

 

Thank you in advance!

 

-BJ

0 Upvotes
1 Accepted solution

Accepted Solutions
tjoyce
Solution
Recognized Expert | Platinum Partner

Glad, that makes sense!

There are 2 ways to place the form in the right spot

Option A: wherever you put the embed code, is where the form will end up (although I think the whole embed code needs to be there, including the necessary script files)...

<div class="sub-container " id="hideMe">
  <div class="sub-wrapper clearfix">
    <div class="sub-form-left">
      <span class="text">Stay current on the latest manufacturing marketing trends!</span>
      <span class="mobile-text">Stay Informed</span>
    </div>
    <div class="sub-form-right">
<script> hbspt.forms.create({ portalId: '(myPortalId)', formId: '(myFormId)', css: '', onFormSubmit: function($form) { $('#hideMe').slideUp(300); } });
</script> </div> </div> </div>

Option B: 

add the 'target' attribute to the options object...

hbspt.forms.create({
      portalId: '(myPortalId)',
      formId: '(myFormId)',
      css: '',
      target: '.sub-form-right',
      onFormSubmit: function($form) {
        $('#hideMe').slideUp(300);
      } 
    });

If you use option B, you can have your js anywhere on the page.

View solution in original post

6 Replies 6
Mike_Eastwood
Key Advisor | Gold Partner

Hi BJ

Your code looks sensible to me... thinking laterally - what if you added an event listener out side of the HubSpot code?

 

Not ideal but it may solve the issue.

ME

tjoyce
Recognized Expert | Platinum Partner

I may be missing something in your explanation but you are including 2 forms into your page. 

One with the {% blog_subscribe %} ... HUBL markup and another with the embed code. 

The embed code contains (what looks like correct) markup to achieve your functionality but....

You may be submitting the wrong form that triggers the onFormSubmit. It looks like you are adding code to the embed that would be triggered based on the submission of the {% blog_subscribe %} form. It doesn't work that way. Form embeds have an isolated scope and onFormSubmit of "Form A" would not trigger the onFormSubmit of "Form B".

 

What I recommend is remove {%blog_subscribe %} and replace it with your embed code. 

BJSzyjakowski
Contributor

tjoyce -- thanks this actually makes a lot of sense, and is rather obvious as well. This may also be a silly question, but I am a bit new to working within hubspot. If get rid of the {% blog_subscribe %} form, how do I then tell the new form.create form where to be placed? Does that make sense? 

tjoyce
Solution
Recognized Expert | Platinum Partner

Glad, that makes sense!

There are 2 ways to place the form in the right spot

Option A: wherever you put the embed code, is where the form will end up (although I think the whole embed code needs to be there, including the necessary script files)...

<div class="sub-container " id="hideMe">
  <div class="sub-wrapper clearfix">
    <div class="sub-form-left">
      <span class="text">Stay current on the latest manufacturing marketing trends!</span>
      <span class="mobile-text">Stay Informed</span>
    </div>
    <div class="sub-form-right">
<script> hbspt.forms.create({ portalId: '(myPortalId)', formId: '(myFormId)', css: '', onFormSubmit: function($form) { $('#hideMe').slideUp(300); } });
</script> </div> </div> </div>

Option B: 

add the 'target' attribute to the options object...

hbspt.forms.create({
      portalId: '(myPortalId)',
      formId: '(myFormId)',
      css: '',
      target: '.sub-form-right',
      onFormSubmit: function($form) {
        $('#hideMe').slideUp(300);
      } 
    });

If you use option B, you can have your js anywhere on the page.

View solution in original post

BJSzyjakowski
Contributor

Right - I missed the target option in the documentation. One last thing, I hope, now I am getting an error in the debugger that says that hbspt is not defined, which to me is a ref to the fact that it must not be loading after everything else? even though its loaded on "ready". Any thoughts on why I might be getting that message?

 

I am using option B

 

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

Don't forget to include the standard form scripts in the head of the template 

 

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>

 

 


Hope that helps, if it does, please mark as solved 😄

tim@belch.io if you need anything else.