Input forms JS improperly compile or conflict on page load
SOLVE
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.
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 improperway 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.
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!
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
};
Input forms JS improperly compile or conflict on page load
SOLVE
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!!!!
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:
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
};
Input forms JS improperly compile or conflict on page load
SOLVE
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!!!!