SOLVED

Re: Prevent hidden fields from taking up space on form

Go to solution
SanfordWhiteman
Level 10 - Community Moderator

Re: Prevent hidden fields from taking up space on form

MktoForms2.whenReady(function(form){

    var formEl = form.getFormElem()[0],

            hiddenEls = formEl.querySelectorAll('.mktoFormRow INPUT[type="hidden"]');

  

    [].forEach.call(hiddenEls,function(el){

        el.parentNode.style.width = '0';

    });

});

Anonymous
Not applicable

Re: Prevent hidden fields from taking up space on form

Hi Sanford,

That's a really great answer, and doesn't require the jQuery call. Nice!

Ja

Robert_Stanley
Level 3

Re: Prevent hidden fields from taking up space on form

Hi Sanford - I'm running into a similar issue on WordPress. Does this code go into the custom CSS at the form level, or is this just additional code I can drop into the header of my website? Here is the site: https://callminer.com/ .  We are embedding forms on Wordpress.

SanfordWhiteman
Level 10 - Community Moderator

Re: Prevent hidden fields from taking up space on form

It can't go into the custom CSS. With some adjustment, it can go into a Rich Text area (although then you also need to remove the whitespace created by the RTA, too!) but I generally keep forms behaviors out of the form itself. Store it in a separate .js file and include its <script> after the <script> that loads ​forms2.min.js.

Robert_Stanley
Level 3

Re: Prevent hidden fields from taking up space on form

Thank you for the quick reply Sanford! I am trying to avoid having to loop in a developer, sorry for the remedial questions. I have tried testing with the code below in the header and then also tried it in a Rich Text Box but it's not working.  Appreciate the response.

<script>

MktoForms2.whenReady(function(form){ 

    var formEl = form.getFormElem()[0], 

            hiddenEls = formEl.querySelectorAll('.mktoFormRow INPUT[type="hidden"]'); 

    

    [].forEach.call(hiddenEls,function(el){ 

        el.parentNode.style.width = '0'; 

    }); 

}); 

</script>