SOLVED

How can I float multiple fieldsets in a form hosted on a Marketo landing page

Go to solution
Highlighted

How can I float multiple fieldsets in a form hosted on a Marketo landing page

I need to set up several multi-column forms and figured the easiest way to accomplish this is through utilizing fieldsets, however I'm having difficulty getting my forms to go from this:

pastedImage_0.png

To this:
pastedImage_1.png

While still keeping the form hosted on a Marketo landing page. What CSS do I need to override to get the fieldsets to float horizontally on this page? http://lp.accessintel.com/testtest.html

Thank you in advance for any help!

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Level 10 - Community Moderator

Re: How can I float multiple fieldsets in a form hosted on a Marketo landing page

Make sure the form is wide enough for both columns (it isn't now) and then:

.mktoFormRow:nth-of-type(3),

.mktoFormRow:nth-of-type(4) {

    float: left;

}

.mktoFormRow:nth-of-type(4) {

    clear: none;

    margin-left: 20px;

}

Though this is quite fragile as it applies to the particular row order on this form. If I were building this out I'd do much more labeling.

View solution in original post

6 REPLIES 6
Highlighted
Level 10 - Community Moderator

Re: How can I float multiple fieldsets in a form hosted on a Marketo landing page

Make sure the form is wide enough for both columns (it isn't now) and then:

.mktoFormRow:nth-of-type(3),

.mktoFormRow:nth-of-type(4) {

    float: left;

}

.mktoFormRow:nth-of-type(4) {

    clear: none;

    margin-left: 20px;

}

Though this is quite fragile as it applies to the particular row order on this form. If I were building this out I'd do much more labeling.

View solution in original post

Highlighted

Re: How can I float multiple fieldsets in a form hosted on a Marketo landing page

This is perfect, thanks Sanford!

If you were building this out, what would you recommend to achieve the same result? I'm open to your Marketo form suggestions!

Highlighted
Level 10 - Community Moderator

Re: How can I float multiple fieldsets in a form hosted on a Marketo landing page

I typically label my form rows (using JavaScript) so I don't have to worry about fields/fieldsets being added/deleted/reordered later and breaking the layout. Especially because field reordering itself may be the special behavior I'm adding.

Highlighted

Re: How can I float multiple fieldsets in a form hosted on a Marketo landing page

Do you mind if I ask what javascript you use to label? That does sound like it would be more useful rather than going by the row...

Highlighted
Level 10 - Community Moderator

Re: How can I float multiple fieldsets in a form hosted on a Marketo landing page

You can see it in my recent answer about reordering Progressive Profiling forms (yesterday I think).

Highlighted

Re: How can I float multiple fieldsets in a form hosted on a Marketo landing page

Awesome, thank you!