How can we help you?

The Gravity Forms Star Rating Field Premium Add-on replaces dull numeric inputs and boring dropdowns with engaging, high-conversion visual rating fields. Whether you are measuring Customer Satisfaction (CSAT), tracking Net Promoter Score (NPS), capturing product reviews, or conducting internal quality audits, this add-on gives you 9 distinct icon styles, total color freedom, custom scale lengths, and native integration with Gravity Forms conditional logic and formula calculations.

Overview & Key Features

Built on the official Gravity Forms Add-on Framework, the Star Rating Field registers as a native field inside your form canvas, offering seamless compatibility with all WordPress themes and form builders.

• 9 Distinct Icon Styles: Star, Smile, Like (Thumbs Up), Tick (Checkmark), Heart, Sun, Light Bulb, Sad, and Hand (Clap).
• Unlimited Color Customization: Select from 3 quick presets (Red, Yellow, Green) or use the full HTML5 Hex Color Picker to match your exact brand identity.
• Flexible Score Scales: Set any score length from 3 to 10+ rating icons (e.g. standard 5-star review, 10-point NPS survey, or 3-point emoji CSAT).
• Pixel-Perfect Icon Sizing: Freely adjust icon dimensions from 20px (dense forms) up to 80px+ (large touch kiosks and tablet surveys).
• Pre-Selected Default Rating: Choose whether the field starts blank or pre-populates with a default score (e.g. 5 stars).
• Full Conditional Logic Support: Branch your form flows dynamically based on whether customer score is higher, lower, or equal to any threshold.
• Mathematical Formula Calculations: Use rating scores directly inside Gravity Forms Calculation fields to compute weighted averages, CSAT scores, or dynamic pricing quotes.
• Native Entry Storage & Export: Stores clean numeric ratings in entry records, fully visible in Entry Details and exported cleanly to CSV/Excel.

Installation & License Activation

Get up and running in less than 2 minutes:

1. Download: Log into your GravityExtra Account and download gf-field-star-rating.zip.
2. Upload Plugin: In WordPress Admin, navigate to Plugins > Add New > Upload Plugin. Choose the downloaded ZIP file and click Install Now, then click Activate Plugin.
3. Activate License Key: Navigate to Forms > Settings > Star Rating Field Add-on. Enter your GravityExtra License Key and click Save Settings to enable automated 1-click updates and customer support.

Adding the Star Rating Field to Your Form

Adding a rating field to any Gravity Form is simple and visual:

1. Go to Forms > Forms and click to edit your desired form.
2. In the right-hand form editor panel, open the Advanced Fields section.
3. Locate the Star Rating field (featuring a golden star icon) and drag it into your form layout.
4. Click on the field to open the Field Settings sidebar.
5. Set your Field Label (e.g. “How would you rate your overall experience?”), Description, and toggle Required if mandatory.

Figure 1: Form Editor — Dragging the Star Rating field from the Advanced Fields panel into the form canvas.

Visual Customization & Styling Options

Under the General and Appearance settings tabs, you can customize every visual aspect of the rating field:

Figure 2: Star Rating Field Settings — Overview of styling, scale, default score, and sizing controls.

1. 9 Built-in Icon Styles

Choose from 9 purpose-built icon designs in the Style Rating dropdown:

Figure 3: Style Rating Dropdown — Selecting from 9 built-in SVG icon styles (Star, Smile, Like, Heart, etc.).

2. Setting the Rating Scale (Number Score Rating)

Under Number Score Rating, enter any integer to define the total number of rating icons displayed:

• 3: Simplified ternary feedback (Poor, Neutral, Great).
• 5: Traditional 5-star consumer review rating (Recommended).
• 10: 10-point scale for standard corporate Net Promoter Score (NPS) surveys.

Figure 5: 10-Point Rating Scale — Frontend rendering of an expanded 10-star satisfaction scale.

3. Default Score Rating

Under Default Score Rating, you can configure an initial pre-selected score:

• Enter an integer (e.g. 5) to have 5 stars pre-highlighted when the page renders.
• Leave blank (or enter 0) to present an unselected, neutral state that encourages active respondent choice.

Figure 6: Default Score Pre-selection — 3 stars pre-highlighted on initial form load.

4. Color Customization: Presets & Hex Color Picker

The Color Rating setting allows you to brand your rating fields:

• Preset Colors: Quick selection between Red (#FF0000), Gold/Yellow (#deb217), or Green (#008000).
• Custom Color: Select Custom Color to reveal the integrated color picker input. Choose any custom hex code (e.g. emerald #10b981, indigo #6366f1, or amber #f59e0b) to align with your theme palette.

Figure 4: Color Rating Options — Choosing predefined brand colors or custom hex color values.

5. Icon Sizing (Size of Star in px)

Set the exact pixel size of the icons in the Size of Star (px) field:

• 24px – 28px: Compact layout for multi-question matrix surveys and tight mobile viewports.
• 32px – 40px: Standard desktop and mobile responsive forms (Optimal default).
• 50px – 70px: Touchscreen iPad / kiosk displays for in-store customer feedback terminals.

Figure 7: Icon Sizing Setting — Setting star dimensions in pixels (e.g. 50px).

Figure 8: Sizing Comparison — Hand rating icons at 30px compared to Star rating icons at 50px.

Conditional Logic, Calculations & Merge Tags

1. Smart Customer Recovery & Review Generation

The Star Rating field acts as a numeric value in Gravity Forms Conditional Logic. You can build high-ROI automated review funnels:

2. Calculating Average Satisfaction Scores in Formulas

Because the rating is stored as a raw numeric score, you can reference it inside Gravity Forms Number Field Calculations:

3. Merge Tags & Notification Emails

Insert {Field Name:ID} into your Admin or Customer email notifications to output the score:

Thank you for rating us!
Customer Satisfaction Score: {Rating:5} / 5
Submission Date: {date_mdy}

Developer Guide: Custom Styling & Code Hooks

Custom CSS Hover Animations

Add smooth scale transitions and subtle drop-shadow glow effects on hover:

/* 1. Add smooth hover zoom animation to rating icons */
.ginput_group_rating > input + label {
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.ginput_group_rating > input + label:hover {
    transform: scale(1.25) !important;
}

/* 2. Add subtle drop glow to selected rating score */
.ginput_group_rating > input:checked + label:before,
.ginput_group_rating > input:checked ~ label:before {
    filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.45)) !important;
}

PHP Validation Filter Hook

Enforce custom business logic using Gravity Forms validation filters:

/**
 * Custom validation: Enforce qualitative feedback if rating is 2 stars or lower
 * Target Form ID: 8, Field ID: 4 (Feedback Textarea), Rating Field ID: 3
 */
add_filter( 'gform_field_validation_8', function( $result, $value, $form, $field ) {
    if ( $field->id === 4 ) {
        $rating_val = rgpost( 'input_3' );
        if ( intval( $rating_val ) <= 2 && empty( trim( $value ) ) ) {
            $result['is_valid'] = false;
            $result['message'] = 'We strive for 5-star service. Please let us know how we can improve.';
        }
    }
    return $result;
}, 10, 4 );

Frontend JavaScript Event Listener

Detect star rating selections in real time on the frontend:

/**
 * Real-time frontend listener: Update interactive badge when respondent clicks a rating
 */
jQuery(document).on('change', '.ginput_group_rating input', function() {
    const score = jQuery(this).val();
    const ratingLabels = {
        '1': '1 Star — Very Poor',
        '2': '2 Stars — Poor',
        '3': '3 Stars — Average',
        '4': '4 Stars — Good',
        '5': '5 Stars — Excellent!'
    };
    jQuery('#customer_rating_feedback').text( ratingLabels[score] || '' );
});

Troubleshooting & Frequently Asked Questions