Understanding Formidable’s Star Rating Field


A question posed in the Formidable Slack community regards the display of a Star Rating field that was added to a Custom Post Type (CPT). The poster wants to understand why the CPT doesn't display the star icons, specifically as it relates to this source code as rendered in the CPT when shown in a carousel:

If displayed on its own, and not in a carousel, the field displays as expected. Let's see if we can drill down on this a bit to help the poster.

Star Rating Field

The Star Rating field was released as a new stand alone field in Formidable Ver. 3.0 in February 2018. In reality, it is nothing more than a fancy radio button rendered with custom CSS, an icon font, and jQuery to provide the front-end interaction. The following sample form shows the field as rendered in it's default configuration:

Star Rating Demo

At this point, you may be asking yourself, "If this is a radio button, where did the the normal inputs go?" Or, "How did the Formidable team make radio buttons look like stars?"

To answer these questions, let's look at the source code as Formidable renders it.

Star Rating Field Source Code

This is the source code for the Star Rating field as Formidable renders it:

As you can see, the standard radio inputs are there. If you examine the radio button labels, they have no visible content. So where do the stars come from?

The Secret Sauce

The secret sauce to making the Star Rating field consists of two popular condiments, the salt and pepper in Formidable's kitchen: CSS and jQuery.

The CSS does two things. It hides the standard radio button inputs and assigns the star icon to the label's before pseudo element. When viewed in the browser's inspector, any highlighted input will display as in this image:

Firefox inspector showing hidden radio button input

The inputs are safely tucked over to the side of the star icons. The CSS to hide the radio button inputs is:

The CSS to display the star icons is:

If you examine the above code, you'll see that the star icon is provided by font-family 's11-fp'. This is a font face included with Formidable. It can be found in the formidable/fonts directory. Formidable loads this fontface with this CSS:

if you ever want to change the star icons to something else, you can easily substitute a different icon font by overriding Formidable's CSS.

The jQuery is a little complicated and beyond the scope of this tutorial to provide a complete walk through. Suffice it to say, if you are inclined to dive into well written code, you can see the following in the formidablepro/js/formidablepro.js file:

Displaying in a View

As with any field in a view, you display it using a shortcode. If you add a star rating field to a view using the shortcode ( [kvjhc] ), it displays the value of the radio button. If you've chosen a 5-star view, the shortcode will display the number 5.

To display a star rating field with the star icons, you have to include the html=1 modifier in the shortcode as in this example: [kvjhc html=1]

If you're wondering why the example shortcode uses a field key instead of field id, see this article for an explanation: Writing Transportable Code: Keys vs. IDs.

Working with CPTs

When creating a CPT with the Formidable CPT add-on, if you have special fields like the Star Rating that can display either the raw value or its HTML equivalent, then you should use the add-on's customize content feature. When customizing the content of a CPT, Formidable renders the post content just as it does with a view. In other words, if you don't include the html=1 modifier with the field's shortcode, the CPT will display the raw value instead of the stars.

This image demonstrates how to configure the CPT add-on to insert the post content as HTML for the star rating field:

Formidible CPT add-on configured to display star rating HTML instead of raw value.

Because the CPT is linked to the Formidable form that created the entry, Formidable's CSS loads so the field's HTML displays correctly. This is true when you have the "Load form styling" option set to "on every page of my site" or "only on applicable pages" on Formidable's General Settings page in the Styling & Scripts section. If the dropdown is set to "Don't use form styling on any page", the star icons won't display.

As for the Slack poster's question regarding displaying the CPT in a carousel, we suspect the Star Rating field is not displaying the icons because Formidable's CSS is not being loaded on the carousel's page. The poster will have to confirm this supposition and either load Formidable's CSS on every page or manually if Formidable's settings don't work with the carousel. We don't have any way to test this theory because we don't have access to the poster's carousel plugin.

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *