Marketo form design that uses flex box?

[Lukas_Meier]

Hi

Are there solutions / examples that use 2 column designs with flex-box?

I saw floats are used which are  a bit rusty. Did someone by any chance lay the ground work for a flex version?

or - is there a reason floats are used and flex box should not be used?

[SanfordWhiteman]

Here's one I worked on for a (yet unpublished) blog post:

MktoForms2 :: 2-column-to-1-column wrap, tab index aware, via flex and order 

The most important consideration is tab order. The flexbox-based layout in and of itself is easy, but maintaining the right user navigation experience isn't.

[Lukas_Meier]

maybe you made the example a bit too complicated by putting 4 fields into a row

I still appreciate obviously, will see if I can post something after I am done with my stuff

[SanfordWhiteman]

---

maybe you made the example a bit too complicated by putting 4 fields into a row

---

Yeah, that's b/c while people say "2-column" at first they too often say "...except for this one field, which should span 2 columns" later.

So I plan for complications, allowing both 2-column and 1-column fieldsets. The CSS is still really simple, as you can see.

[Lukas_Meier]

I understand but instead of doing it that way you can just do 

<input> <input>

<textarea>

in the form builder. Textarea will be full width, and the inputs half.

and you give them both flex-grow: 1 e.g. actually something like

```

.mktoFieldDescriptor.mktoFormCol{

flex-grow: 1

width: auto !important;

}

```

now if you remove one of the inputs the other one will automatically fill the width of the form

only downside is that for fields where you dont want it to be 100% width you have to write some custom rules

e.g. if you want

<input> <input>

<textarea> //span 2 col

<input name="myshortfield"> //span 1 col

you'd have to write some custom css for input[name=myshortfield] which kinda s*ucks

what would be good would, probably, be a way to add classes to the field wrappers (the outmost wrapper of the field, e.g. on the level of mktoFormCol)

that way you could just slap some utility class on it

[Dave_Roberts]

You could also use a blank Rich Text Element to hold the place of a column should you want to display a field at 50% without anything to the right of it. The trick to this is really just the margin-bottom and how that's setup -- basically you don't want your Rich Text elements to have the margin-bottom so that when they're empty they completely shrink up to a "0" height.

<input text><input text>   [____]  [_____]

<textarea><rich text>        [____]

<input text>                         [___________]

Another way to go about this might be to think about using the fieldset and writing the CSS for "all fields" (which would use the normal flex setup) and then "fields inside a fieldset" (which would override the flex stuff). In this way, you could drag-n-drop fields into a fieldset to make them "not flex" while the same field type outside of the fieldset "would flex".

[SanfordWhiteman]

---

what would be good would, probably, be a way to add classes to the field wrappers (the outmost wrapper of the field, e.g. on the level of mktoFormCol)

---

FormsPlus::Tag automatically tags each .mktoFormRow and .mktoFormCol with the names of the field(s) therein.

Just add the <script> anywhere after the <script> that loads forms2.min.js.

[Lukas_Meier]

that certainly does help in other areas, will add this thanks

[Lukas_Meier]

is there maybe a form I can use that isn't actually from my client to show case in a codepen?

with select, single checkbox and maybe textarea in a 2 column layout in marketo form builder.

basically

<first text> <last name text>

<company text> <some select>

<textarea>

<checkbox>

<button>

[Dave_Roberts · Accepted solution]

Hey Lukas,

I definitely prefer to use the flex-box display for forms, I think it's much cleaner and more dynamic to set it up that way. I generally don't mess around with reordering the fields to stay away from the tab order issue Sanford mentioned, maybe better to do that with some script that actually changes the order of the elements in the document. 

Here's a bit of code I use that might serve as a primer to get you started...

form.mktoForm {
flex-direction: column; /* use 'flex-direction: row;' for horizontal display */
width: 100% !important; /* override fixed width on mktoForm */
box-sizing: border-box;
}
form.mktoForm * {
float: none !important; /* remove float on mktoForm elements */
width: auto !important; /* remove fixed width on mktoForm elements */
}

form.mktoForm, form.mktoForm .mktoFormRow, form.mktoForm .mktoFieldWrap, form.mktoForm .mktoButtonRow {
display:flex !important; /* flex these elements */
}

form.mktoForm .mktoOffset, form.mktoForm .mktoGutter, form.mktoForm fieldset legend, form.mktoForm .mktoAsterix {
display:none !important; /* hide these elements */
}

form.mktoForm .mktoFormCol, form.mktoForm .mktoHtmlText {
-ms-flex-positive: 1;
flex-grow: 1; /* make these elements flex to full-width (100%) */
}

/* ROWS ___________________ */
form.mktoForm .mktoFormRow,
form.mktoForm .mktoButtonRow {
flex-wrap: wrap;
flex-direction:row;
min-width:unset;
}
form.mktoForm .mktoFormRow {
margin: 0 -10px; /* offset .mktoFieldWrap padding (10px) */
}

/* COLUMNS ______________ */
form.mktoForm .mktoFormCol {
flex-basis: 0; /* make columns in a row equal widths */
min-height: 0px !important; /*mktoOverride*/
}

/* FIELDSET _________ */
form.mktoForm fieldset {
padding: 0px 10px !important; /*mktoOverride*/
margin: 0px !important; /*mktoOverride*/
border: 0px !important; /*mktoOverride*/
}

/* FIELDWRAP ______________ */
form.mktoForm .mktoFieldWrap {
padding: 0px 10px !important;
}

Basically, the form gets displayed as a flex-column so it orients vertically down the page. The form rows are displayed as flex-rows so they orient horizontally across the page. Inside the form rows (.mktoFormRow) are form columns which will are set to flex-grow so they behave as equal columns. 

This is probably my favorite part about using the flex-box display rather than floats, because you can easily drag-n-drop fields into rows in the form editor and it automatically flexes the columns with no fuss. Another subtle advantage of this approach is being able to switch the form display from 'flex-direction: column;' to 'flex-direction: row;' when you want to make one of those horizontally-oriented forms for something like a newsletter sign up (email field + button on one line).

Beyond what's here, you'll want to tack on some CSS for the inputs and mobile (display stuff as block instead of flex so that it stacks on mobile).  

Let me know if you've got any questions or if you run into any issues along the way. I'd be happy to help troubleshoot or drop in a few more lines of code if you can share an example of what you're working on.