Simple Likert Labels for Scale Field

Est. Reading: 1 minute
By: jason.cleaveland
Created: 01/20/2018
Difficulty: Beginner

Simple Likert Labels for Scale Field

×Warning: This tutorial was created 2281 days ago. Some of the information may be out of date with more recent versions of Formidable. Please proceed with caution and always perform a backup before adding custom code.

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:

Leave a Reply

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community