Grid System Design for Fine-Tuned Forms

We’ve been doing a lot of talking lately about how cool the modern Form Designer is, and here’s another reason to get excited. If you’ve been trying to recreate the look and feel of an existing form that you built in InfoPath or some other tool, Form Designer gives you a huge assist by using nested containers – containers within containers.

Using the technique, you can control the structure of your forms to a very high degree.

The trick is to use containers as rows in a form, and then insert additional containers within the columns.

Those containers can then be columnized on their own, which lets you vary widths across the rows to suit your purposes. It also gives you better control over visibility and permission rules, too.

Once you’ve got your grid laid out, it’s a quick job to drag list fields into place.

Some tips:

• If you’ve got an existing form, start by analyzing its structure for rows and columns. If you’re starting from scratch, drawing a rough diagram will be very helpful.
• Adding fields to the same container will cause them to stack one on top of the other, which is useful in some cases.
• If you want rows to stay level, it’s not a bad idea to nest a container into each column.
• If you want to use tabs or accordion sections, set those up first - you can’t move containers! The good news is that if you need to redo anything, it only takes moments.

I’ve created a video tutorial using this method which you can watch to see a walkthrough of the building process. Give it a try – I think you’ll be impressed at how well the technique works!