CMS: Adding and Setting Up a Ratings Input Element

Adding a ratings input element to your site allows visitors to rate content, products, or services, and submit their ratings directly to your CMS (Content Management System) collection. This can provide valuable feedback and enhance user engagement.

Before you begin:

• Make sure to add the CMS to your site if you haven't already.

• Make sure you have a collection with suitable permissions for storing submissions from the ratings input element.

Step 1 | Add and set up the ratings input element

Add the ratings input element to your page and customize its settings, layout, and design.

Wix Editor

1. Click Add Elements

   

   on the left side of the editor.

2. Click Input.

3. Click Ratings.

4. Click and drag the Ratings Input element of your choice onto the page.

1. Set up the ratings:

   1. Click Set Up Ratings on the ratings input element.

   2. Enter the Field title that will display in the element.

   3. Click the Show hover text toggle to choose whether to show hover text or not:

      • Enabled: Display explanations for each rating option when visitors hover over the ratings. Enter the text in each rating field.

      • Disabled: Explanations do not appear when visitors hover over the ratings. Click Accessible names and enter explanations for each rating that helps screen readers and assistive technology understand what each rating represents.

   4. Select the Required checkbox if you want to make it mandatory that visitors select a rating before they can submit it as part of a custom form.

2. Click the Layout icon

   

   to customize the location of the field title and rating value. You can also set the title alignment and padding, the spacing and icon size, and the text direction.

3. Click the Design icon

   

   to choose a preset design. Then click Customize Design to adjust the design further.

Studio Editor

1. Click Add Elements

   

   on the left side of the editor.

2. Click Input.

3. Click Ratings.

4. Click and drag the Ratings Input element of your choice onto the page.

1. Set up the ratings:

   1. Click Set Up Ratings on the ratings input element.

   2. Enter the Field title that will display in the element.

   3. Click the Show hover text toggle to choose whether to show hover text or not:

      • Enabled: Display explanations for each rating option when visitors hover over the ratings. Enter the text in each rating field.

      • Disabled: Explanations do not appear when visitors hover over the ratings. Click Accessible names and enter explanations for each rating that helps screen readers and assistive technology understand what each rating represents.

   4. Select the Required checkbox if you want to make it mandatory that visitors select a rating before they can submit it as part of a custom form.

2. Click the Layout icon

   

   to customize the location of the field title and rating value. You can also set the title alignment and padding, the spacing and icon size, and the text direction.

3. Click the Design icon

   

   in the Inspector panel to customize the design.

Step 2 | Connect the ratings input to the CMS

Connect the ratings input element to a dataset that links to your CMS collection, allowing you to store and manage the ratings submitted by visitors.

Wix Editor

1. In your editor, click the ratings input element.

2. Click the Connect to CMS icon

   

   .

3. Click the Choose a dataset drop-down and select a dataset that connects to the collection where you will store the submissions. Alternatively, select Add a Dataset, then choose the collection you want to connect, give the dataset a name and click Create.

4. Click the Rating value connects to drop-down and choose the number field that the ratings input will submit to.

   Tip: Select + Add to add a new collection field for storing the submissions. Then enter the field name and field key (Velo only) and click Add.

1. Set the dataset mode and collection permissions:

2. Click Dataset Settings in the panel on the right.

3. (Optional) Click the permission type next to Permissions to determine who can view, add, update, or delete collection content.

4. Click the Dataset mode drop-down and select the relevant option:

   • Write: Connected input elements can add new items to the collection, but cannot edit existing items.

   • Read & Write: Connected elements can update existing items in the collection. If you connect a 'New' button, visitors can use it to update existing items and add new items to your collection.

5. Create a submit button that visitors click to submit their ratings.

Studio Editor

1. In your editor, click the ratings input element.

2. Click the Connect to CMS icon

   

   .

3. Click the Choose a dataset drop-down and select a dataset that connects to the collection where you will store the submissions. Alternatively, select Add a Dataset, then choose the collection you want to connect, give the dataset a name and click Create.

4. Click the Rating value connects to drop-down and choose the number field that the ratings input will submit to.

   Tip: Select + Add to add a new collection field for storing the submissions. Then enter the field name and field key (Velo only) and click Add.

1. Set the dataset mode and collection permissions:

2. Click Dataset Settings in the panel on the right.

3. (Optional) Click the permission type next to Permissions to determine who can view, add, update, or delete collection content.

4. Click the Dataset mode drop-down and select the relevant option:

   • Write: Connected input elements can add new items to the collection, but cannot edit existing items.

   • Read & Write: Connected elements can update existing items in the collection. If you connect a 'New' button, visitors can use it to update existing items and add new items to your collection.

5. Create a submit button that visitors click to submit their ratings.

FAQs

Click a question below to learn more about the ratings input element.