topic Re: Trying to target the form "submit" button. in CMS Development

Trying to target the form "submit" button.

nlafakis — Fri, 16 Apr 2021 20:20:48 GMT

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";
}
}

Re: Trying to target the form "submit" button.

dennisedson — Mon, 19 Apr 2021 15:59:08 GMT

Hey @nlafakis

Adding @Anton to this thread.

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

Re: Trying to target the form "submit" button.

nlafakis — Mon, 19 Apr 2021 16:26:43 GMT

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 😄

Re: Trying to target the form "submit" button.

dennisedson — Mon, 19 Apr 2021 18:42:26 GMT

@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

Re: Trying to target the form "submit" button.

nlafakis — Tue, 20 Apr 2021 13:03:23 GMT

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

Re: Trying to target the form "submit" button.

alyssamwilie — Tue, 20 Apr 2021 14:13:35 GMT

@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"; } });

Re: Trying to target the form "submit" button.

nlafakis — Tue, 20 Apr 2021 17:56:35 GMT

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!

Re: Trying to target the form "submit" button.

dennisedson — Tue, 20 Apr 2021 18:03:42 GMT

@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 😀

Re: Trying to target the form "submit" button.

nlafakis — Wed, 21 Apr 2021 14:21:58 GMT

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 😞

Re: Trying to target the form "submit" button.

dennisedson — Wed, 21 Apr 2021 18:15:03 GMT

@nlafakis ,

This is the is the correct one:

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

Make sure you have jquery loaded 🙂

Re: Trying to target the form "submit" button.

dennisedson — Wed, 21 Apr 2021 18:16:59 GMT

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">  <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>

Re: Trying to target the form "submit" button.

nlafakis — Wed, 21 Apr 2021 21:12:06 GMT

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!