The Community forums are being phased out in favor of a new Slack group.
Add your email address below to get an invitation to join the community slack group

Slack Signup
Newsletter Optin
Help Desk

Simple Likert Labels for Scale Field

Labels

This Discussion is public

Notifications

Traditionally, you would either have to use radio buttons with all sort of CSS hacks to make a likert work and record numeric values.

  1. Assign a unique class to your scale field. I use several for different types of likert. One of mine is: obh-positivity-likert.
  2. Add the following css to your site's main css file:
      1. .obh-positive-likert div:first-of-type::before { content: "Very Positive"; vertical-align: bottom; margin-right: 10px; }
      1. .obh-positive-likert .frm_last::after { content: "Not Positive at All"; vertical-align: bottom; margin-left: 5px; }
      1. .obh-positive-likert .frm_scale label { margin-bottom: 0px!important; }

You'll need to change the initial class (.obh-positivity-likert) in each style to your own class and change the message from "Very Positive" and Not Positive at All" to whatever fits for your likert. You can also play around with the margins to find something that works for you.

You should end up with something that looks like this:

I have several of these made up for each type of likert that I use and it works well. For reference, here is a list of different types of likerts you can use:  https://www.extension.iastate.edu/Documents/ANR/LikertScaleExamplesforSurveys.pdf

Discussion closed.