• Skip to main content

Victor Font Consulting Group, LLC

The DEX Intranet Specialists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Computers and Internet / Programming / WordPress / Formidable Forms / Formidable Pro CSS Grid and Flex Box

Formidable Pro CSS Grid and Flex Box

By Victor M. Font Jr.
February 13, 2018Leave a Comment

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:

  • Separate lite and Pro versions
  • New and improved form fields
    • Star ratings
    • New field settings
  • Beefed up free form builder
  • UI Refresh
  • Better RTL and A11Y support
  • View shortcodes
    • Incremental content
    • Check values in the URL with inline conditionals
  • Code changes
    • Possibly breaking changes
    • New Hooks

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:

Formidable Pro 3.x Flex Box Demo

SPECIFY HOURS AVAILABLE FOR EACH DAY OF THE WEEK:

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.

  • 2shares
  • Facebook1
  • Twitter0
  • Pinterest0
  • LinkedIn0
  • Print
  • SMS0

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2023 Victor M. Font Jr.

Return to top of page