Trying to target the form "submit" button.

nlafakis · ‎Apr 16, 2021

I know this probably isn't the right place for this, but I see there are other FAQ type questions here so I thought it's as good a place as any? Moderators feel free to delete or move if need be of course. I understand, cleanliness, godliness, etc...

So I'm using a form on a page and above the form is some urgency copy, "Fill out the form to recieve your promotional offer now!" type deal. So what I'm trying to do or would like to do, is to target the form "Submit" button with .js so that I can make that header text disappear. So basically, target the .hs-button, and say that when it's clicked, to make the div which contains the "Fill out form to..." disappear.

I've tried several methods of attaching a command to the button but no matter how I target it, it simply won't perform the .js action. Trying to figure out what I'm doing wrong here. Code is below:

HTML:
<body>
<div class="form_container">
<div class="header" id="header">
<p>This is the header text for the form</p>
<h3>THAT NEEDS TO DISAPPEAR</h3>
</div>
<div class="form">
<script charset="utf-8" src="//js.hsforms.net/forms/v2.js" type=
"text/javascript">
</script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "someplacewithnumbers",
formId: "xyzidentifyingthingamajigofcodethatgoeshere"
});
</script>
</div>
</div>
</body>

The .js code:
function toggleText(){
var x = document.getElementByClassName(".hs-button primary large");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

dennisedson · ‎Apr 21, 2021

I updated that fiddle.

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <div class="form_container">
      <div class="header" id="header">
        <p>This is the header text for the form</p>
        <h3>THAT NEEDS TO DISAPPEAR</h3>
      </div>
      <div class="form">
        <!--[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>
        <script>
          hbspt.forms.create({
            region: "na1",
            portalId: "3436466",
            formId: "223015bd-07c7-4a06-84f1-1056b6e50bb6",
            onFormSubmitted: function($form) {
              document.getElementById("header").style.display = "none";
            }

          });

        </script>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
  </body>

</html>

HubSpot’s AI-powered customer agent resolves up to 50% of customer queries instantly, with some customers reaching up to 90% resolution rates.
Learn More.

View solution in original post

nlafakis · ‎Apr 21, 2021

Ok, so I've tried @alyssamwilie's method. And that really does seem like it should work...but for w/e reason I can't get it to work :(. I don't know if I need to be running a separate script with it or not. I don't know if this is allowed will even work, but this is the fiddle I'm testing it in: https://jsfiddle.net/nlafakis/0wfvgjkn/232/. If that kinda thing isn't allowed I totally get it and no prob with removing.

So I'm sure you're going to find the code "sloppy," and that's because I'm not a veteran with html or css, but I'm fairly good at reverse engineering code, so I do a lot of copy/paste.

I've tried the onFormSubmitted method
I've tried the onFormSubmit method

I've tried document.getElementById('header').style.display = "none"

I've tried document.getElementByClassName('header').style.display = "none"

I've tried these combinations with: getElementById("header") as opposed to ('header')

I've tried getElementById('header').style.visibility = "hidden"

So far, no luck 😞

dennisedson · ‎Apr 21, 2021

@nlafakis ,

This is the is the correct one:

document.getElementById("header").style.display = "none";

Make sure you have jquery loaded 🙂

HubSpot’s AI-powered customer agent resolves up to 50% of customer queries instantly, with some customers reaching up to 90% resolution rates.
Learn More.

dennisedson · ‎Apr 21, 2021

I updated that fiddle.

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <div class="form_container">
      <div class="header" id="header">
        <p>This is the header text for the form</p>
        <h3>THAT NEEDS TO DISAPPEAR</h3>
      </div>
      <div class="form">
        <!--[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>
        <script>
          hbspt.forms.create({
            region: "na1",
            portalId: "3436466",
            formId: "223015bd-07c7-4a06-84f1-1056b6e50bb6",
            onFormSubmitted: function($form) {
              document.getElementById("header").style.display = "none";
            }

          });

        </script>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
  </body>

</html>

HubSpot’s AI-powered customer agent resolves up to 50% of customer queries instantly, with some customers reaching up to 90% resolution rates.
Learn More.

nlafakis · ‎Apr 21, 2021

I could kiss you right now sir, but you'll have to settle for virtual hugs 😂

Thank you SO much to everyone that offered help, you guys are awesome and this community is seriously amazing!

alyssamwilie · ‎Apr 20, 2021

@nlafakis If you wanna target after form submission you'll want to use onFormSubmitted, this way it'll hide the header if the submission is a success (ie when the form submitted message appears)

hbspt.forms.create({
  portalId: '',
  formId: '',
  onFormSubmitted: function($form) {
    document.getElementById('header').style.display = "none";
  } 
});

If this answer solved your question, please mark it as the solution.

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

Lynton's HubSpot theme Rubric now available. Click to download.

nlafakis · ‎Apr 20, 2021

Alyssa,

Thank you so much! I will give this a try first since it seems to be the quicker solution, if not then I'll give Dennis' linked method a try and let you guys know which worked! Thanks again, really love this community and how responsive it is!

dennisedson · ‎Apr 20, 2021

@alyssamwilie 's solution should be the correct one. (it is also listed on that link I provided)

onFormReady loads your function after the form is ready, onFormSubmitted loads it after the form has been submitted which is what you are looking to do. Thank Alyssa for correcting me 😀

HubSpot’s AI-powered customer agent resolves up to 50% of customer queries instantly, with some customers reaching up to 90% resolution rates.
Learn More.

nlafakis · ‎Apr 19, 2021

Hey @dennisedson !,

Thanks for getting back to me! Ok, so this is for a registration form page. I'm using a different program to build the landing page, and I have the hubspot form within a container on the page. So you could think of it as:

<body>

<h1>Some Headline Text Here</h1>

</div>
</body>

So I'm trying to talk to the hs-form Submit button, and listen for when it's activated to make the "Some Headling Text Here" or <h1> copy, disappear or display: none; as it were. I know it's a SUPER long-shot and it's probably not even possible right? Because since it's a 3rd party page loading an exterior form, can it listen for it when the form is loaded on the page? Maybe the .js has to go at the footer so the form is already loaded? If it's not possible or seems not possible, I'm fine with that too, just wondering 😄

dennisedson · ‎Apr 19, 2021

@nlafakis, The form will be one of the last things to load. You could try adding it to the onFormReady callback function as described on this page: https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options

HubSpot’s AI-powered customer agent resolves up to 50% of customer queries instantly, with some customers reaching up to 90% resolution rates.
Learn More.

nlafakis · ‎Apr 20, 2021

I'll give it a shot, thanks so much!!!

dennisedson · ‎Apr 19, 2021

Hey @nlafakis

Adding @Anton to this thread.

I feel like we need a bit more detail, though...

HubSpot’s AI-powered customer agent resolves up to 50% of customer queries instantly, with some customers reaching up to 90% resolution rates.
Learn More.

CMS Development