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

Anonymous
Not applicable

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

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.

FormSetup.png

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!

15 REPLIES 15
Devraj_Grewal
Level 10

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

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
Level 10

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

Check the width of your labels in the form designer.

Oherwise, this is a CSS issue.

-Greg

Josh_G
Level 2

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

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
Level 2

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

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 GrewalGrégoire MichelJosh 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
Not applicable

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

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
Level 10

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

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
Level 2

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

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

Courtney_Grimes
Level 10

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

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
Level 10

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

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