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

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.

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/gf_likert.js"></script>

Once the script is in place, it's time to jump over to your style sheet and add some new CSS.

The CSS

/* the base likert box styles */
.gform_wrapper .gf_likert ul.gfield_radio {
	overflow:hidden;
	position:relative;
	padding:0;
}

.left_label .gform_wrapper .gf_likert ul.gfield_radio,
.right_label .gform_wrapper .gf_likert ul.gfield_radio {
	top:-16px;
}

.gform_wrapper .gf_likert ul.gfield_radio li {
	padding:0;
	min-height:50px;
	display: -moz-inline-stack; 
	display: inline-block; 
	zoom: 1; 
	*display: inline;
	margin:0;
	border:1px solid #ccc;
	border-left:none;
	text-align:center;
	position:relative;
	overflow:hidden;
	background-color:#fff;
}

.gform_wrapper .gf_likert ul.gfield_radio li.likert-first {
	border-left:1px solid #ccc!important;
}

.gform_wrapper .gf_likert ul.gfield_radio li input {
	position:relative;
	top:25px;
	float:none!important;
	width:auto;
	margin:0 auto;
}

.gform_wrapper .gf_likert ul.gfield_radio li label {
	position:relative;
	margin:0 auto;
	text-align:center;
}

.gform_wrapper .gf_likert ul.gfield_radio li div.likert-label {
	position:absolute;
	top:0;
	left:0;
	background-color:#eee;
	padding:2px 0;
	width:100%;
}
	
/* styles for the hover state */
.gform_wrapper .gf_likert ul.gfield_radio li.likert-hover {
	background-color:#DFEFFF;
}

.gform_wrapper .gf_likert ul.gfield_radio li.likert-hover div.likert-label {
	background-color:#C2D7EF;
}

.gform_wrapper .gf_likert ul.gfield_radio li.likert-hover div.likert-label label {
	color:#2175A3;
}
	
/* styles for the selected radio button */
.gform_wrapper .gf_likert ul.gfield_radio li.mychoice {
	background-color:#DFEFFF;
}
	
/* hide the input and show a tick image */
.gform_wrapper .gf_likert ul.gfield_radio li.mychoice {
	background-image:url(../images/icon_tick.png);
	background-repeat:no-repeat;
	background-position:center 27px;
}

.gform_wrapper .gf_likert ul.gfield_radio li.mychoice input {
	visibility:hidden;
}

.gform_wrapper .gf_likert ul.gfield_radio li.mychoice div.likert-label {
	background-color:#C2D7EF;
}

.gform_wrapper .gf_likert ul.gfield_radio li.mychoice div.likert-label label {
	color:#2175A3;
}
	
/* define the box width - number connotates the pixel width of the list item */
.gform_wrapper .gf_likert_20 ul.gfield_radio li {
	width:20px;
}

.gform_wrapper .gf_likert_30 ul.gfield_radio li {
	width:30px;
}

.gform_wrapper .gf_likert_40 ul.gfield_radio li {
	width:40px;
}

.gform_wrapper .gf_likert_50 ul.gfield_radio li {
	width:50px;
}

.gform_wrapper .gf_likert_60 ul.gfield_radio li {
	width:60px;
}

.gform_wrapper .gf_likert_70 ul.gfield_radio li {
	width:70px;
}

.gform_wrapper .gf_likert_80 ul.gfield_radio li {
	width:80px;
}

.gform_wrapper .gf_likert_90 ul.gfield_radio li {
	width:90px;
}

.gform_wrapper .gf_likert_100 ul.gfield_radio li {
	width:100px;
}

.gform_wrapper .gf_likert_110 ul.gfield_radio li {
	width:110px;
}

.gform_wrapper .gf_likert_120 ul.gfield_radio li {
	width:120px;
}

.gform_wrapper .gf_likert_130 ul.gfield_radio li {
	width:130px;
}

.gform_wrapper .gf_likert_140 ul.gfield_radio li {
	width:140px;
}

.gform_wrapper .gf_likert_150 ul.gfield_radio li {
	width:150px;
}

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.

Download Demo Files

About Kevin Flahaut

Kevin Flahaut

Kevin is a a partner at Rocketgenius, Gravity Forms developer, Webby Award nominated designer and front end developer.

He's also a Star Wars fan (not the lame prequels), native Texan, digs Apple products, loves Public Broadcasting, nature, science & travel shows, loathes reality TV, enjoys cooking & wine tastings, loves to joke around & relive his childhood (via eBay). He also tries not to take life too seriously if he can avoid it.

Twitter: @kflahaut
email:

4 Responses to "Survey Style Multiple Choice Fields with Gravity Forms"
  1. 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.

  2. Tim says:

    Beautiful! Thanks for posting this - will be extremely helpful. Can hardly wait to get into updating one site and making the option available to others I have helped along the way.

    Love the way you guys are developing and supporting so many along the way with superb tutorials - keep it up!

  3. Dmitry says:

    Thanks Kevin for a nice tutorial.

    You may want to fix the download link though, it's currently goes to http://www.rocketgenius.com/wp-content/plugins/download-monitor/download.php?id=1 - which is the link for Mad Lib Style Form. I think it should be ID=2

    Best,
    D.

  4. Kevin says:

    Sorry Guys, I did screw up the download link. It's fixed now. I appreciate everyone pointing it out.