Special form lay-out is causing issues

[MaartenW]

Hi,

So in an bold attempt to clone some of the cool webform functionality our webdevelopers created we have the field label actually moving into the top of our form. Super cool off course. But the challenge is when you enter in some information and move to the next field the label drops back down again 😮

We tried to create some script to make Marketo change the value but it doesn't seem to react at all.
Perhaps we are using the wrong approach here so really curious if any of the bright minds has some magic script to help fix this.

Currently we have;

<script>
MktoForms2.whenReady(function (form) { 
  const inputs = form.querySelectorAll(".mktoField"); 
  inputs.forEach((input) => { 
    input.addEventListener("change", () => { 
      const inputEmpty = input.value.length; 
      if (inputEmpty) { 
        input.parentElement.classList.add("has-value"); 
      } else { 
        input.parentElement.classList.remove("has-value");
      }
    });
   }); 
}) 
</script>

Our page currently looks like this: https://lp-one.eon.com/Test-Maarten-5.html

Also side note Sanford kudos to you for writing the post about changing the sequence of the field using scripting!

[SanfordWhiteman]

You also have styles in a <script> but this needs to be a <style>.

<script>
  .mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover {
	  border: none !important;
	  background: #227da8!important;
  }
</script>

[SanfordWhiteman · Accepted solution]

Easy to see in the console why it errors out: form is not a DOM <form> element, it’s a reference to the Marketo Form JS object.

Your variable names are also kinda backward and you only need to listen on the <form>.

MktoForms2.whenReady(function (mktoForm) { 
  const formEl = mktoForm.getFormElem()[0];

  formEl.addEventListener("change", (e) => {
      const input = e.target;        

      if( input.classList.contains("mktoField") ) {
        const wrapper = input.closest(".mktoFieldWrap");
        wrapper.classList[input.value ? "add" : "remove"]("has-value"); 
      }
   }); 
});