Creating form with two fields in one row and one field in another row

[Anonymous]

Hello! I'm trying to create a landing page with a form. I would like the form to look like the picture below but I am unable to figure out how to do it.

I can get it to display either in 1 column or 2 column format but I am unsure of how to display it so that it does both (or maybe it's not possible?).

Thanks in advance for any assistance!

[Devraj_Grewal]

Jonathan,

If you want only the first and last name fields to appear in a two column format and the remaining to appear in one column, you can adjust the field width for the remaining fields. This will make it appear as if they are on one column.

[Grégoire_Miche2]

Check the width of your labels in the form designer.

Oherwise, this is a CSS issue.

-Greg

[Josh_G]

You can drag and drop the fields into position via the form editor and then adjust the lengths as needed.

When you drag and drop to re-position the field(s), you'll see arrows around the field indicating the field can be re-positioned to the left or right of other fields (as well as above or below).

[Kanako_Tone2]

Hi Jonathan,

Did the solutions provided here work for you? I have the same struggle, and changing the field and label width in the form builder page didn't really help.

Devraj Grewal​ Grégoire Michel​ Josh Gilchrist​

The width of the form on LP is 800pxs with 20 pxs on the left, and the field lavel is 101 pxs, and the field itself is 150 pxs. The form doesn't have custom CSS.

Here's the LP I pulled in the form, and none of the fields are showing in 2-fields-in-a-row fashion. https://info.attivio.com/Elevate-ServiceNow-Apps-Trial_Elevate-Trial-Request-Page-Trial-2.html

I actually contacted Marketo support and they said that in Marketo we can have only 1 field in a row without custom coding. Is it true?

[Anonymous]

Hey Kanako,

I wasn't able to find a solution for this unfortunately. This is something that custom CSS may be able to solve but I wasn't able to figure it out. Marketo doesn't seem to have the capability to do this by itself.

[Grégoire_Miche2]

Hi All,

this is possible using an advanced framework to inject css hooks in the form, so that you can apply advanced CSS.

See Better styling of forms : yet another framework

-Greg

[Kanako_Tone2]

Thank you all. I'll try the coding on Greg's post.

[Casey_Grimes]

Hi Greg,

On one hand, I see what you're doing with this framework, but that also seems like a lot of work. I'd really just recommend using a CSS reset to make multiple columns behave correctly and then just adjusting the parent element as needed. Granted, I only account for up to three form fields per row in my example, but tacking on extra ones isn't terribly difficult; you'd just use additional psuedoclasses which IE9+ and every other browser supports. No JS class additions needed.

[Grégoire_Miche2]

Hi Courtney,

I prefer the method in which you just get rid of Marketo styles and start from a fresh CSS, using tag attributes to hook exactly the thing. The method I suggest is not that difficult, because it séparates the work of the web designer from that of the Marketo user. The web designer simply adds the JS to the  LP templates or the form embed code, once for all, and then the Marketo user creating the page gain complete control and full responsiveness.

since I wrote this article, though, we have evolved to rather using and augmenting Sanford Whiteman​‘s destyle library, we augmented it with attributes that add information about field types, in addition to field names, making it easy to style correctly radios, checkbox, and checkboxes types or to give a style to a specific field.

-Greg