Formidable Pro CSS Grid and Flex Box

The release of Formidable Forms/Pro 3.0 brings significant and welcome enhancements to this popular form builder plugin. These improvements include new field types, seamless updates, and a beefed up free form builder. Specifically, these include:

The final change to really get excited about is the inclusion of CCS grid on the front end. If you don't know what CSS grid is, it has changed the game for laying out content on a page. And, it's supported by all modern browsers, even Microsoft Edge although it was a late entry in the race. The Strategy 11 team has included CSS Grid layout to make it easier to layout your forms and eliminate some of the CSS issues users have reported like including the placement of field descriptions and long labels when set to the left, and section headings ignoring the top margin when they follow a field in a column. CSS Grid eliminates these issues and others.

While CSS Grid is supported by all modern browsers, the lephants in the room remain Microsoft's Internet Explorer versions 10 & 11. These browsers only support the early CCS Grid 1.0 spec, and even at that, it's Microsoft's version of the spec. If you plan on supporting IE 10 & 11, well, we'll leave that discussion for another tutorial.

Formidable's implementation of CSS grid uses a 12-column layout with classes that range from frm1 (1 column of 12) to frm12 (span all 12 columns). This is great if you want an even number of equally spaced fields on a single row. But what if you have a requirement to place an odd number of equally spaced fields on a single row? This is a requirement I had for a job application on a restaurant site. The form requests that applicants fill in their available hours for each day of the week. Obviously, seven days of the week means seven fields with a horizontal layout. It's not mathematically possible to divide 12 grid columns by 7 and achieve the desired result. So how do you do this?

Here's the layout in a Formidable Form:

This is where CSS Flex comes into play. This layout is created using a Formidable Pro section field. If you want to create the same layout as above, first drag and drop a section onto your form. Then, add seven text fields to the section. Label those text fields Monday through Sunday as I have done. Save the form.

Now comes the good part! Click on the Settings tab and navigate to custom HTML. Since we want the flex area wrapping the seven text fields, we have to create a parent div. With CSS flex, the parent div receives the display: flex directive and all child divs auto-magically turn into flex boxes. Navigate to Monday's custom HTML. I've copied the entire source below:

Look at the div I added at the top of the code block. This is the opening tag for the parent flex element. Also notice that I added a class for 'monday' on the second line in the list of classes. For each of the next six days, add a class for that day in its custom HTML.

Since we have an opening div tag for the flex parent, we must add a closing div tag otherwise our display will be a mess. We'll do this in the Sunday custom HTML:

Last, we need the CSS. Add this to your style sheet, to your Form's page, or wherever you add custom css:

For mobile devices, you'll need to change your flex direction from row to column in the appropriate media query.