Document – Star Rating Field for Elementor Forms

The Stars Rating Field allows users to give feedback, reviews, or satisfaction scores directly within Elementor Forms.

You can choose from multiple icon types , customize their appearance, and define how ratings are displayed — all visually, without any coding.

Table of contents:

Getting Started

  1. Upload the plugin folder to /wp-content/plugins/.
  2. Activate Star Rating Field for Elementor Forms in Plugins → Installed Plugins.
  3. Open a page with Elementor Pro Form

How to Add a Stars Rating Field

  1. Open your page in Elementor Editor.
  2. Drag the Form widget onto your section.
  3. In the Form Fields panel, click Add Item (+).
  4. Under Type, select Stars Rating.
  5. A default 5-star field will appear in your form preview.
How to Add a Stars Rating Field for elementor form

Rating Configuration

Type

• The default type is Star, meaning users will rate using stars.

• You can also select Like and Dislike to show thumbs-up and thumbs-down icons.

Type Stars (only available when Type = Star)

choose type star

“When you’re using the Star type, you can choose from several icon styles.”

• ⭐ Star – the classic star symbol.

• 🌟 Star 1 – an alternate star design.

• ❤️ Heart – great for emotional or product reviews.

• 👍 Like – for quick and simple feedback.

• ✅ Check – for confirmation-based forms.

• 😊 Smiley – for fun, mood-based ratings.

💡 “This gives you flexibility to match your form’s tone — for example, hearts for love-themed websites, or smileys for user satisfaction.”

Number Stars

• Defines how many icons are displayed — for example, 5 stars.

• Adjust this number to fit your preferred rating scale.

Defines how many star icons are displayed

Default

• Sets the default value when the form loads.

• For example, if you set it to 3, the first three stars will already be selected.

Design and Appearance

Star Size (px)
• Adjust the icon size with the slider.
• Default: 48px.
• Increase for emphasis, decrease for compact layouts.

Color Default
• Defines the icon color before selection (e.g., grey).

Color Active
• Defines the icon color after selection (e.g., gold or orange).

💡 Tip: A common design is to use #cccccc for inactive icons and #FFD700 (gold) for active icons.

increase the star size


The Stars Rating Field from Yee Add-ons adds an interactive and stylish way to collect feedback in Elementor Forms.

With full customization options — from icons and colors to layout — you can design rating experiences that match your brand perfectly.

Start using Yee Add-ons today and turn simple forms into engaging feedback tools! 💜