Survey Style Multiple Choice Fields with Gravity Forms

I've recently seen quite a few questions about how to style radio/multiple choice fields to better emulate a survey or likert scale. You know, "rate your room on a scale of 1-10", "rate your satisfaction", "how important is..", etc

I decided to take a few minutes and work out some basic styles. Here's a few examples of what I came up with. The details and how-to's are after the demos.

The Demos

Rate Our Cleanliness

1

2

3

4

5

note: the field above uses 2 custom classes: gf_likert & gf_likert_50

Rate Your Server*

1

2

3

4

5

6

7

8

9

10

on a scale of 1-10, tell us how well your server did.

What A Terrible Server! Tell Us More.

Wow, that really sucks. What the hell happened and who do we need to fire?

Sample Question 4

The idea that specific areas of the brain control specific behavioural events is known as

A. the neuron theory

B. behaviourism

C. the membrane theory

D. localisation of function

Answer for Question 4

A

B

C

D

note: the field above uses 2 custom classes: gf_likert & gf_likert_50

The Details

First, a couple of quick notes about this. This isn't by any means a survey add-on or adaptation of Gravity Forms. This doesn't introduce any charting or way to show survey results, it's simply a formatting exercise to display the radio fields in a more aesthetic fashion. Also, at the time I put this together originally, the Ajax form submission hadn't been added to Gravity Forms, so the jQuery portion of this tutorial hasn't been updated to work with Ajax-submitted forms. I'll endeavor to get that updated as soon as possible, but would welcome a contribution from the community if someone want's to take the initiative.

The Script

To make this happen the way I wanted - with rollover and selected states, etc. I used a little jQuery to add the necessary classes to the parent elements and wrap some additional markup around the label elements so I could style it easier. You can grab the script here or get it from the download file. Add the script reference to your page template, or your theme's header.php file whichever you prefer. Remember to adjust the file path so that it points to your actual file location. In my example, it's a "js" folder in the theme root.

Implementing the New Styles

Once the script and new CSS are in place, implementing the new styling is a breeze. It's as simple as adding a couple of new class names to the field in the form admin.

Add a new "multiple choice" field or navigate in your form to an existing one. Click on the field to expand the options, then on the "advanced" tab. Scan down a few fields, find the "CSS class name" field. That's where we'll be working.

You'll notice from the example above that I've applied 2 new classes, "gf_likert" and "gf_likert_50".

The first class, "gf_likert" does all the real work here and should be applied on all implementations. The "gf_likert_50" simply defines the pixel width of the list item.. in this case 50px. If I wanted to make the individual items wider, I could change the second class to something like "gf_likert_80" which would change it to 80px wide. There are classes in the CSS to support widths of 20px - 150px wide.

That's all there is to it. Happy form building.

Get the Files

You can grab the files used for this demo below. Zip file includes the script, css, images & exported form xml.

Hi Kevin,
I just love GravityForms, on my site I use 10 different forms. But I did not do much about the styles, your Tutorials looks very nice, but here I get the same file if I download: Gravity.Forms.Mad.Lib.Form.Demo? and the style sheet I cannot copy from here because of the line numbers.... I like your style and would like to dig more into styling my forms:-)
Thanks for a great product and a great team too.