Prevent hidden fields from taking up space on form

[Anonymous]

Hello Community,

Does anyone have any experience with creating hidden fields on a Marketo form that do not take up any space on the form HTML? Right now, when I create a hidden field, it is hidden, but is still producing a  div.mktoFormRow which is pushing the div.mktoButtonRow down 10px per field. Is there someway to prevent this default wrapping? Or to just insert the hidden field before the end of the form? 

Thank you in advance!

[SanfordWhiteman]

INPUT[type="hidden"] {
  margin-bottom: 0 !important;
}

[Anonymous]

Thank you for your reply, Sanford. This does remove the 10px margin-bottom, but the div is still taking up space and pushing the button down. Any other thoughts?

[SanfordWhiteman]

Post a URL to your page, please.

[Anonymous]

Still working on this, and only have test URLs which won't be out lone. However, your initial answer is the correct one and helpful as well. I had a rogue css in addition to the margin-bottom 10px. Thank you again, Sanford and I'll post the final with jQuery that removes the divs.

[SanfordWhiteman]

Please don't use jQuery if native JS will work... what DIVs do you want to remove?

[Anonymous]

There's a lot of custom css on the landing pages to achieve a specific look. The issue was that the custom css was making all div.mktoFormRow divs have a width of 100%. I need to remove the margin-bottom from the hidden fields and for all parents of input[type=hidden] inputs, make just those width: 0px. It was easiest to accomplish this with jQuery, but I'm curious about your reasons not to use it.

[SanfordWhiteman]

Because jQuery is an unnecessary dependency if all you're doing is native DOM manipulation. JavaScript has done all those things by itself for years, without any wrappers. Ignoring jQuery is the first step to writing tighter code.

I still don't know what you're doing: are you removing DIVs or changing widths?

[Anonymous]

Changing the widths of the parents of input:hidden elements from 100% to 0px.

[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';
    });
});

[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>

[Anonymous]

Hi Sanford,

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

Ja

[Anonymous]

Thank you for your reply, Sanford. This does remove the 10px margin-bottom, but the div is still taking up space and pushing the button down. Any other thoughts?