SOLVED

Re: Special form lay-out is causing issues

Go to solution
MaartenW
Level 1

Special form lay-out is causing issues

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!

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Special form lay-out is causing issues

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

 

View solution in original post

2 REPLIES 2
SanfordWhiteman
Level 10 - Community Moderator

Re: Special form lay-out is causing issues

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
Level 10 - Community Moderator

Re: Special form lay-out is causing issues

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