Prevent hidden fields from taking up space on form

[SanfordWhiteman · Accepted solution]

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]

Hi Sanford,

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

Ja

[Robert_Stanley]

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]

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]

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>