How to Group Gravity Form Fields under a Container in Frontend

by | Feb 11, 2020 | Styles & Layouts, Gravity forms | 0 comments

Grouping multiple fields under one container in frontend can be useful if you want to give a background color or put a border around those fields. It helps you create visual segments of your form which is easy on the eyes.

Consider you are asking for personal and professional details of a user in the form. What if you give a separate background color to the personal details section and professional details section. It will add a clear division between the two sections.

Gravity forms do have a Section field but it doesn’t divide the form into two separate sections with a container in frontend. Instead, it is only for applying conditional logic to a group of fields and showing a heading in frontend. Although this is good for most purposes however having fields under one container is also one of the most desired feature.

Plugins required to Group Fields

Steps to Group Gravity Forms fields under a container in Frontend

  • After you have installed both the required plugins then open the form editor.
  • Now go to Grid Layout from the editor menu.
  • How to Group Gravity Form Fields under a Container in Frontend
  • Check the Enable Grid Layout option.
  • Here you will get the visual layout of your fields. You can now divide your form into multiple columns and put them together in one column using a drag and drop interface. How to Group Gravity Form Fields under a Container in Frontend
  • Now click on the Save button to make the changes live.
  • All the fields you added together in a column will now have a single parent in frontend. Each column will have its own id to which you can add custom CSS and design it.
  • If you want then we can do custom CSS code for you and make your forms look the way you like.

If you have any queries regarding the above tutorial then leave a comment below and we will get back to you with a solution to your query.

Still stuck? Need custom solution? We can help

Excellent plugin

Easy and intuitive to use and helps to accelerate workflow.

Good Plugin

A bit of a learning curve for this old woman, but does what I need it to do!!

I love it

Easy and efficient plugin !

Very convenient, works great!

I’ve had a need to sometimes change the style of Gravity Forms, and this saves time so I don’t have to figure out the CSS styles and manually override them 😉

Very Helpful!

Gravity forms are awesome, but notoriously difficult to style. I was struggling for hours to reduce the space between a field, let alone tweak size, color, etc. This plugin is exactly what I was looking for – well done!

Perfect

It works perfectly. I am satisfied. Congratulations!

Very Useful

Instead of playing with the style sheets, you can make all the changes directly here.

great!

works great! should be in the gravity basic installation…

Save me hours of work

I was skeptical to download…how can it be that easy? But, it was and it truly saved me hours of work to style my Gravity Forms.

great plugin – easy to use

this plug in was exactly what i needed to help finish the layout of my page.

I love it!

Exactly what Gravtiy Forms missed

I use it on every page – that should say it all.

Exactly what I was looking for

I don’t know CSS and was asked to make very specific changes to our Gravity Forms. This did the trick and this tool gave me the flexibility I needed.

Great Plugin

This plugin is a perfect complement to style Gravity-Forms. The intuitive user interface, integrated into the Customizer, is very well done. PERFECT!!! THANK YOU!!!

Easy to use and powerful

Recommend this to anyone struggling to format their forms

Great Gravity plugin

This is great for all those styling problems that can arise. Easy to use with a gentle learning curve.

Huge time saver

You can accomplish what this plugin does using CSS yourself, but the plugin saves you the time of doing so. This is a simple, effective and efficient way of making your GF look better.

Excellent

Makes styling Gravity Forms EASY.

Much better than forms that come with the themes

Solid plugin, much better than the forms that come with the themes. We’ve used GF to create membership and donation forms, which our clients love. I thought GF was a little pricey but it’s paid for itself in customer satisfaction.

Great work!

Thank you guys! extremely helpful!

Should be default Gravity Forms functionality

Great plugin. My go to solution for Gravity Forms styling.

A great find!

This plugin enabled me to exactly what I wanted to with my forms and they look great! It would have been much more painful to customize my forms without it.

Fantastic plugin!

This plugin saved me hours of work. I am not well versed in coding by hand and now I don’t have to figure it out. I styled my Gravity Forms beautifully, the easy way. Worked perfectly. Thank you.

It is a amazing gravity form plugin that I was looking for long time.Thanks

Thanks for helping for designing gravity form such an amazing way.

Great Plugin Essential!

Very easy to use, exactly what I needed for Gravity Forms!

Very good and beautiful

It worked very good used with divi theme, popup builder and gravity forms!
CongraTulations!

Just right!

Outstanding! Does just what I wanted.

Just what I needed!

Love love love this plugin. Who wants to spend hours using css to style a form?
Not me! I can get my forms looking exactly as I want them to in just a few clicks.

Great stuff!

I rarely take the time to leave reviews.
With this one I felt compelled because it is so good!

Works Great for Me

This app is easy to understand and use and works great for me.

It Works Perfectly

If you need to give your form a bit of style, this plugin is perfect and easy to use.

Excellent plugin

Makes the job of styling forms so much easier.

Super Awesome and Easy to Use

Really great plug in that is so easy and simple to use! Thank you for your awesome work!

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *