Stop Marketo form from moving during window resizing

[Anonymous]

Hi all,

A newbie question but how do I stop the Marketo form from moving out of place on the landing page, when I resize my browser window?

http://info.anca.com/clone1.html

[Anonymous]

Which browser and what's its version?
It maybe browser dependent. I'm using Chrome and haven't had any such experience except when I resize the windows to be narrower than the form width.

[Anonymous]

@Hitoshi - I work mostly on Chrome and the issue appears when I minimize the window (see screenshot). I just tried IE9 and the same thing happens.

[Anonymous]

Just tested on your page and got you've shown but can't duplicate it with my form. Seems like you've made your form "float"

[Anonymous]

The form position is set in absolute coordinates, defined by a cascading style sheet (CSS).
Changing from absolute to relative will solve the problem.

[Anonymous]

@bgomes nailed it. Just took a look and that is absolutely the problem. You are basically setting a hard X and Y position rather than allowing the form to adapt to the size of the browser. All of your other content is relative.

PS - nice landing page

[Anonymous]

Another option maybe to just set the width of your page and set left margin and padding so the page will always display the same irreverent to resizing.

Example:
BODY#bodyId{
padding-left:0px;
margin-left:0px;
width:1200px;
}

[Anonymous]

Thanks all for the input! My knowledge of HTML/CSS is basic at most, so I appreciate everyone's feedback in helping me understand how it all works.

The form was placed on the landing page using the Drag & Drop editor. I had a browse through the Community and read from other posts that doing this causes the form to be position:absolute, therefore creating this issue during a window resize.

What's the best way to work around this? Would it be a better option to place the form HTML directly into the landing page template? If so, how do I obtain the form HTML?

I also tried the iframe method but this got rid of my customized Submit button completely. Clicking on the default submit button also caused the follow up page to appear INSIDE the iframe.

[Anonymous]

I think I might have hit the jackpot...

I gave up on Drag & Drop altogether and inserted the form HTML into the landing page template and that has seemed to fix it. It took me awhile to tweak the code to get it to position exactly where I wanted but I think I've done it. Let me know if I'm on the right track!

http://info.anca.com/Clone2_v5.html