SOLVED

Prevent hidden fields from taking up space on form

Go to solution
Anonymous
Not applicable

Prevent hidden fields from taking up space on form

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!

1 ACCEPTED SOLUTION

Accepted Solutions
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';

    });

});

View solution in original post

14 REPLIES 14
Level 10 - Community Moderator

Re: Prevent hidden fields from taking up space on form

INPUT[type="hidden"] {

  margin-bottom: 0 !important;

}

Anonymous
Not applicable

Re: Prevent hidden fields from taking up space on form

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
Not applicable

Re: Prevent hidden fields from taking up space on form

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?

Level 10 - Community Moderator

Re: Prevent hidden fields from taking up space on form

Post a URL to your page, please.

Anonymous
Not applicable

Re: Prevent hidden fields from taking up space on form

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.

Level 10 - Community Moderator

Re: Prevent hidden fields from taking up space on form

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

Anonymous
Not applicable

Re: Prevent hidden fields from taking up space on form

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.

Level 10 - Community Moderator

Re: Prevent hidden fields from taking up space on form

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
Not applicable

Re: Prevent hidden fields from taking up space on form

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