# Trying to target the form "submit" button.

**URL:** <https://community.hubspot.com/t/trying-to-target-the-form-submit-button/35675>\
**Category:** CMS Development\
**Created:** [April 16, 2021, 8:20pm UTC](https://community.hubspot.com/t/trying-to-target-the-form-submit-button/35675 "2021-04-16T20:20:48Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![nlafakis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nlafakis/32/16975_2.png) [@nlafakis](https://community.hubspot.com/u/nlafakis)\
**Post date:** [April 16, 2021, 8:20pm UTC](https://community.hubspot.com/t/trying-to-target-the-form-submit-button/35675/1 "2021-04-16T20:20:48Z")

</div>

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](https://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”;  
}  
}

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [April 19, 2021, 3:58pm UTC](https://community.hubspot.com/t/trying-to-target-the-form-submit-button/35675/2 "2021-04-19T15:58:26Z")

</div>

Hey @nlafakis

Adding @Anton to this thread.

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

---

<div class="post-metadata">

**Author:** ![nlafakis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nlafakis/32/16975_2.png) [@nlafakis](https://community.hubspot.com/u/nlafakis)\
**Post date:** [April 19, 2021, 4:26pm UTC](https://community.hubspot.com/t/trying-to-target-the-form-submit-button/35675/3 "2021-04-19T16:26:14Z")

</div>

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

\<div (form background box)\>

\<h1\>Some Headline Text Here\</h1\>

\<div (hs-form)\>\</div\>

\</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 😄

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [April 19, 2021, 6:42pm UTC](https://community.hubspot.com/t/trying-to-target-the-form-submit-button/35675/4 "2021-04-19T18:42:26Z")

</div>

@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](https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options)

---

<div class="post-metadata">

**Author:** ![nlafakis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nlafakis/32/16975_2.png) [@nlafakis](https://community.hubspot.com/u/nlafakis)\
**Post date:** [April 20, 2021, 1:03pm UTC](https://community.hubspot.com/t/trying-to-target-the-form-submit-button/35675/5 "2021-04-20T13:03:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [April 20, 2021, 2:13pm UTC](https://community.hubspot.com/t/trying-to-target-the-form-submit-button/35675/6 "2021-04-20T14:13:35Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![nlafakis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nlafakis/32/16975_2.png) [@nlafakis](https://community.hubspot.com/u/nlafakis)\
**Post date:** [April 20, 2021, 5:56pm UTC](https://community.hubspot.com/t/trying-to-target-the-form-submit-button/35675/7 "2021-04-20T17:56:35Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [April 20, 2021, 6:03pm UTC](https://community.hubspot.com/t/trying-to-target-the-form-submit-button/35675/8 "2021-04-20T18:03:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nlafakis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nlafakis/32/16975_2.png) [@nlafakis](https://community.hubspot.com/u/nlafakis)\
**Post date:** [April 21, 2021, 2:21pm UTC](https://community.hubspot.com/t/trying-to-target-the-form-submit-button/35675/9 "2021-04-21T14:21:58Z")

</div>

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/](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 😞

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [April 21, 2021, 6:14pm UTC](https://community.hubspot.com/t/trying-to-target-the-form-submit-button/35675/10 "2021-04-21T18:14:38Z")

</div>

@nlafakis ,

This is the is the correct one:

**document.getElementById(“header”).style.display = “none”;**

Make sure you have jquery loaded 🙂

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [April 21, 2021, 6:16pm UTC](https://community.hubspot.com/t/trying-to-target-the-form-submit-button/35675/11 "2021-04-21T18:16:59Z")

</div>

I updated that fiddle.

```lia-code-sample
<!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>

```

---

<div class="post-metadata">

**Author:** ![nlafakis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nlafakis/32/16975_2.png) [@nlafakis](https://community.hubspot.com/u/nlafakis)\
**Post date:** [April 21, 2021, 9:12pm UTC](https://community.hubspot.com/t/trying-to-target-the-form-submit-button/35675/12 "2021-04-21T21:12:06Z")

</div>

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!**