Prevent hidden fields from taking up space on form

Anonymous · ‎03-01-2017

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 · ‎03-01-2017

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

View solution in original post

SanfordWhiteman · ‎03-01-2017

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

Anonymous · ‎03-01-2017

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?

Anonymous · ‎03-01-2017

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 · ‎03-01-2017

Post a URL to your page, please.

Anonymous · ‎03-01-2017

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 · ‎03-01-2017

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

Anonymous · ‎03-01-2017

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 · ‎03-01-2017

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 · ‎03-01-2017

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

Prevent hidden fields from taking up space on form

Prevent hidden fields from taking up space on form

Re: Prevent hidden fields from taking up space on form

Re: Prevent hidden fields from taking up space on form

Re: Prevent hidden fields from taking up space on form

Re: Prevent hidden fields from taking up space on form

Re: Prevent hidden fields from taking up space on form

Re: Prevent hidden fields from taking up space on form

Re: Prevent hidden fields from taking up space on form

Re: Prevent hidden fields from taking up space on form

Re: Prevent hidden fields from taking up space on form

Re: Prevent hidden fields from taking up space on form