Input forms JS improperly compile or conflict on page load

[finixdesigner]

I'm having some trouble with my form inputs displaying properly. The issue is that my label css styling can't apply some of the time. The issue appears to be stemming from the way the hs-form-field is compiled at page load. What's supposed to happen is that the ".hs-form-field" wrapper is supposed to inject both the .hs-input or <input> and <label> inside another wrapper classed called ".input". See below for the correct example.

Correct Example

<div class="hs-form-field">
  <div class="input">
    <input class="hs-input">
    <label>child</label>
  </div>
</div>

And the weird part is that sometimes, it does! But like the flip of a coin, if you try reloading the page a few times, you'll see that it occasionally gets compiled differently. The improper way it gets compiled is by injecting the <label> as a direct child of the ".hs-form-field", then placing that ".input" class wrapper next with the actual <input> as it's child. See below for an incorrect example.

Incorrect Example

<div class="hs-form-field">
  <label>direct child</label>
  <div class="input">
    <input class="hs-input">
  </div>
</div>

I'm really more familiar with HTML & CSS so this issue is a bit over my head. My best guess is that there is some JS or jQuery somewhere that's conflicting with the code within my main linked js file. Below, I've attached some screenshots of the two instances that are happening on page loads, as well as the snippets of code that I believe are relevant, and finally a public link to the page so you can inspect. Someone with expertise in this area please help me solve this! Thanks!

Public Link

https://learn.finixpayments.com/demo-hubspot-community-js-error

CSS Classes from my Stylesheet

.body-container .input label {
	position: absolute;
	top: -10px;
	left: 10px;
	z-index: 2;
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	background-color: #fff;
	font-size: 12px;
	padding: 2px 5px;
}
.hs-form-field > label {}

Linked Javascript file function

//////////////////////////////////////////////////////////////////////////////////////////////////////
	$(window).load(function () {
		$(".hs-form-field").each(function () {
			$(this).children("label").insertAfter($(this).children(".input").children(".hs-input"))
		});
	});

Compiled correctly, styles apply properly!

correct

Compiled incorrectly, styles DONT apply!

incorrect

[Kevin-C · Accepted solution]

Hey @finixdesigner 

Any luck?

If not I had another thought pop into my head. A few weeks back I was creating a module that lifted a form and moved it to another part of the page with jQuery (don't ask why). If i'm remembering correctly the form sometimes loads slower than the rest of the page, which cause errors when trying to access the form. I fixed this by delaying the retrieval. In your case it could look like this:

window.onload = function(){
   setInterval(function(){
       $(".hs-form-field").each(function (index) {
         var $this = $(this),
          label = $this.children("label");
          label.insertAfter($this.children(".input").children(".hs-input"))
        });
   }, 1500); // set in milliseconds
};

[Kevin-C]

Hey @finixdesigner 

This is interesting!

Have you tested the page without the linked JS file? If so are you seeing the same bug?

EDIT:

So after a little more time looking at this, try updating the attached JS to this:

$(window).load( function () {
  $(".hs-form-field").each(function (index) {
    var $this = $(this),
        label = $this.children("label");
    label.insertAfter($this.children(".input").children(".hs-input"))
  });
});

It looks like this might not be a render issue but rather an issue of the the attached JS running the function. My edits fix potential scoping issues but honestly im not sure that is the issue.

You can also test this by reloading the page until you see the error. Right clicking > Inspect page > console > paste the following jQuery into the console and click enter:

$(".hs-form-field").each(function (index) {
    var $this = $(this),
        label = $this.children("label");
    label.insertAfter($(this).children(".input").children(".hs-input"))
  });

This is the same script from above minus the event listener. Once this runs the you should see that the UI displays as intended.

[Kevin-C · Accepted solution]

Hey @finixdesigner 

Any luck?

If not I had another thought pop into my head. A few weeks back I was creating a module that lifted a form and moved it to another part of the page with jQuery (don't ask why). If i'm remembering correctly the form sometimes loads slower than the rest of the page, which cause errors when trying to access the form. I fixed this by delaying the retrieval. In your case it could look like this:

window.onload = function(){
   setInterval(function(){
       $(".hs-form-field").each(function (index) {
         var $this = $(this),
          label = $this.children("label");
          label.insertAfter($this.children(".input").children(".hs-input"))
        });
   }, 1500); // set in milliseconds
};

[finixdesigner · Accepted solution]

Holy cr*p that did it!!!! So your first two didnt work unfortunatly, it was this last one that did the trick! I was actully able to just remove the milsec delay. Wow many I cannot thank you enough, i've gotten very little help from support on this one and am not strong in Java so from the bottom of my heart, THANK YOU!!!!

Here was the final applied solution:

window.onload = function(){
   setInterval(function(){
       $(".hs-form-field").each(function (index) {
         var $this = $(this),
          label = $this.children("label");
          label.insertAfter($this.children(".input").children(".hs-input"))
        });
     });
  };

🙂