I am trying to recreate this form: http://tinyurl.com/2fgyl82
And here's what I have so far: http://tinyurl.com/283fyt7
I'm fairly new to Gravity forms, so I'm not exactly sure how to go about this. I'm looking for suggestions on the best way to do the Excellent/Good/Fair rating in the various categories (the part with the radio buttons).
Thanks for any help. :)
Gravity Forms doesn't currently have a likert field, which is what that ratings grid on your example is. It is something we plan on adding in the future but we don't have a timetable for this type of feature at this time.
What you would have to do is use CSS to float the radio button field items side by side so they appear horizontally instead of vertically. You can use CSS to do this, you would have to view source and see what classes and id's are used and then add custom CSS to your theme stylesheet to target those fields and float them using CSS.
If you need assistance with this type of customization I could refer you to a WordPress consultant who has Gravity Forms customization experience who could help you with this.
I looked at your form and whipped up a little bit of CSS to get you going with your likert-type scale.
First, you'll need to add this CSS to the end of your themes style.css file
.gform_wrapper .gf_5col ul.gfield_checkbox, .gform_wrapper .gf_5col ul.gfield_radio {overflow:hidden; position:relative; top:-16px; width:40%}
.gform_wrapper .gf_5col ul.gfield_checkbox li, .gform_wrapper .gf_5col ul.gfield_radio li {width:20%; min-height:50px; float:left; margin:0}
.gform_wrapper .gf_5col ul.gfield_checkbox li input, .gform_wrapper .gf_5col ul.gfield_radio li input {position:absolute; top:25px}
.gform_wrapper .gf_5col ul.gfield_checkbox li label, .gform_wrapper .gf_5col ul.gfield_radio li label {position:absolute; top:0; left:-40%}Once that's been added, open up the form admin, navigate to your checkbox/multiple choice (radio) fields, click on the advanced tab and input this class name in the "CSS class name" field there.
"gf_5col" (without the quotes)
Once you've added that, save the form then refresh the page. You can see this works pretty well in my test, but you may need to tweak it a bit to get it just so in all the different browsers.
Hope that helps get you pointed in the right direction.
UPDATE: I've posted a tutorial with some advanced styling for the radio fields.
http://www.rocketgenius.com/survery-style-multiple-choice-fields-with-gravity-forms/
Hey Kevin,
Thanks for the great post on the likert scale. I am still having some trouble with it however. I am using WordPress 3.0.4. It looks as though the styles (even though are on the actual form) are not being applied to each choice.
@haydenhancock can you post a URL to the form you're working on so I can take a look. It's hard to say what the problem is. I'm sure it's nothing to do with the WordPress version- more likely a jQuery or CSS issue.
I am only developing locally right now. I will try to get something up for you to take a look at soon.
I agree, I am sure it's a jQuery or CSS issue. I was just posting my WordPress version for reference.
Thanks for the quick response!
Okay, cool. Let me know how it goes. I'll be happy to look at it when you're ready.
I was finally able to get a live copy up for you to view. It's not an error with my template because it appears to do the same thing with the default theme (twentyten) as well.
The form that is having the issue is on the following page:
http://acdd.haydenhancock.com/resources/tell-us-what-you-think/
Notice the output under the "Likert Scale" section
I followed your instructions. I have it set so that the CSS and JS files are only loaded when this page is being viewed.
Thanks for your help!
Okay, I'll check it out asap and let you know. I haven't tested the likert styles with the latest RC2 release so it may be something related to the changes there.
Hey Kevin,
Just wondering if you around to check this out? Thanks!
Sorry, I really haven't yet. Will let you know as soon as I can get to it.
Hey Kevin, have you had a chance to look a this issue yet? I might try to whip something up if you haven't, let me know. Thanks!
@haydenhancock - I'm sorry but I really haven't had a chance to get to this yet. It's really a customization thing and I've had to prioritize the actual support requests. I'll be happy to help out as soon as I can get back to it.
I thought I would get to it sooner but have been traveling for a few days and have had connectivity problems so that's slowed me down even more. Thanks for your patience. I'll try to get this done by the weekend for you and see what I can find out.
No problem. I think I will attempt to fix it tonight. I will let you know the results.
mrhoneyfoot
Member
Subscribed. Got the exact same problem with likert styles. Likewise haydenhancock I've tried switching to TwentyTen and the problems remain. The options display exactly like the likert scale on your webpage. Did you find a solution?
@haydenhancock @mrhoneyfoot - I've tried this on 2 other WordPress installations as well as the live demo and everything appears to be working normally. I do see the issue on the form you shared earlier, but am not sure what the problem is so far.
The live site is currently running WP version 3.04 and Gravity Forms 1.5 RC3.8 - the latest version of each at the time of this writing. You can see that the form styles are working just as they did before.
http://www.rocketgenius.com/survery-style-multiple-choice-fields-with-gravity-forms/
If I find anything else out, I'll be sure to share it here.
Hey guys, I found an error in my sample CSS file that I think is the culprit. Try replacing the contents of your gf_likert.css file with this and let me know if that gets you rolling.
Joe T - Thanks for the update. I'm glad it worked out. Some bad QA work on my own CSS sample it seems.
@Kevin, Thanks for posting this! Everything works for me except for the image. I am still trying to get that resolved. Thanks!
Of course, as soon as I post this I get it to work. I've replaced your .mychoice class with the following:
background: url(images/icon-tick.png) no-repeat scroll center 27px;
Seems to work like a champ. Thanks for your work man. Love the forms!
@HaydenHancock - your form looks great. Thanks for the update.. very glad we figured it all out.
Joe T
Member
Hi Kevin - Found 2 more issue with the Likert style forms.
1 - When submit is incomplete the resulting display breaks the likert formatting - hilighted required fields apparently overrides the likert styles.
2 - I have some mysteriously non-showing questions at the end of my form. Has anyone else reported non-displaying questions at all?
Joe, are you using the Ajax submission method? If so, the likert style samples don't work with that - I originally did those before the Ajax submission was introduced into GF and haven't had an opportunity to go back and re-think the jQuery script for Ajax support.
The validation highlighting plays nicely with the likert styles using the normal submission method. You can test it out on the demo at the rocketgenius.com site
screenshot: http://grab.by/8B2M
I haven't heard anything about fields not showing up. I don't recall your form URL at the moment, if you can you post it again here for me and I'll be happy to take a look.
Joe T
Member
https://shrfp.com/rnv-panelist-survey/
Disabling ajax definitely helps with the style, but I notice some lines are now wrapped which are not wrapped on the initial view.
I have found the problem with the missing questions. 100% my fault...
yeah, I see that. You may need to either reduce the size of the fields (change to smaller class definition) or tweak the validation styles for the padding etc. You're just hitting the horizontal limits of the available area for the form.
I personally would go with the first option - try using "gf_likert_110" instead of the "gf_likert_120" class name. It should fit better.
screenshot: http://grab.by/8BeT
Kevin, I cannot thank you enough for what you've done! I'm really sorry it took me so long to get back to this topic. This project got put on the back burner for a couple months, but now they're ready to go again.
Thanks again! It works well!
Hello,
I guess I'm bringing this thread back from the depths.
I'm having trouble getting the likert scale to work just right. The form I created does not hover correctly and the tick mark does not appear on selection.
You can view the form here http://tomatoes.veggiegardener.com/location/
Scroll to the very bottom of the page just above the comments sections.
I feel like I'm missing something pretty simple, but don't know what.
Thanks for any suggestions!
I'm going to guess that you have this code in the wrong place. I saw this displayed when I viewed the page in Firefox:
// add support for Gravity Forms Likert/Survery style radio fields // http://www.gravityforms.com jQuery(document).ready(function() { jQuery(window).load(function() { if(jQuery(".gf_likert ul.gfield_radio li input").is(":checked")) { jQuery(".gf_likert ul.gfield_radio li input:checked").parent().addClass("mychoice"); } }); // add some extra classes and markup to make our likert-style radio choices jQuery(".gf_likert ul.gfield_radio li:first-child").addClass("likert-first"); jQuery(".gf_likert ul.gfield_radio li:last-child").addClass("likert-last"); jQuery(".gf_likert ul.gfield_radio li input").addClass("likert-choice"); jQuery(".gf_likert ul.gfield_radio li label").wrap("
"); // add a hover state jQuery(".gf_likert ul.gfield_radio li").hover(function(){ jQuery(this).addClass("likert-hover"); }, function(){ jQuery(this).removeClass("likert-hover"); }); // add a selected class to the parent list item jQuery(".likert-choice").change(function() { if(jQuery(this).is(":checked")) { jQuery(this).parent().parent().parent().find(".mychoice").removeClass("mychoice"); jQuery(this).parent().addClass("mychoice"); } }); });Where did you add the code? If you added it to your header.php directly, you will need to add script tags around it:
<script type='text/javascript'>
// code
// code
// code
</script>If you are including the JavaScript in an external file, you would not need those script tags.
Additional reading about where to place the code:
http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F
Hi Chris, thanks for your reply.
The javascript was showing up at the top of the page when you viewed it? You must have viewed the page while I was tinkering with it. I was playing with different ways of inserting the js and one of those times it was appearing at the top of the page. That must have been when you looked at the page.
I'm using a Genesis child theme and added the js per the StudioPress recommendation of using the wp_enqueue_script() function in functions.php
I have it working properly now after adding !important to the .mychoice and likert-hover classes in the CSS. I'm not sure if that's the ideal way to fix it, but it worked.
Thanks for your time!
Glad you got it sorted out. Thanks for the update.