CM Reviews and Ratings - Customization - Review Form

Customization: Review Form »

There are 3 ways to customize your front-end Review form:

  • Form Display and Position
  • Text Fields
  • Labels
  • Design and Interface

Below are comprehensive guides to elaborately show you how to customize the form in all 4 different ways!


Customize Form Display and Position

To customize your Review form's display and position:

1.) Navigate to the CM Reviews Settings page » Review Form tab.

2.) On this page you will find the Form display and Form position options:

  • Form display - You have the following options on how you wish to display the Review form to your users: form always visible (form will be visible on the post / page being accessed), form appears on click (a button will be provided), and form appears on click inside a Popup (form will appear inside a modal window).

  • Form position - You have the option to display the form above or below the Reviews / Ratings on the post.

3.) Choose the display option and form position of your preference.

4.) Save your changes.


Customize Text Fields

You can choose what text fields to display and require in your form, and you can even add custom text fields.

1.) First, navigate to the CM Reviews Settings page » Review Form tab.

2.) On this page you will find the Fields required to fill option:

  • Fields required to fill - This is where you can set which fields on your front-end Review form should be displayed and required. (If a "required" field is left empty, the user will be alerted and the form will not submit until all required fields are filled.)

Make changes to suit your preference.

3.) Next, find the section under "Additional custom fields". This is where you can add custom text fields to your front-end Review form.

  • Additional custom fields - You have the option to add custom fields to your Review form, and if whether these custom fields should be required or not. (If a "required" field is left empty, the user will be alerted and the form will not submit until all required fields are filled.)

4.) Now to add a custom field, you must do the following steps:

  • Add a custom field to the form - Select "Yes"
  • Custom field 1 title - Add the label for your custom field (Example: Age / Country / Occupation, etc.)
  • Require custom field 1 - Should this field be required? The form will not submit if a required field is left empty. (Select Yes or No)

If you only wish to add one custom field, skip step #5 and go directly to step #6. 

But... If you wish to add a second custom field, proceed below...

5.) To add a second custom field:

  • Add another custom field to the form - Select "Yes"
  • Custom field 2 title - Add the label for your second custom field (Example: Age / Country / Occupation, etc.)
  • Require custom field 2 - Should this field be required? The form will not submit if a required field is left empty. (Select Yes or No)

6.) Click the "Update" button found at the bottom of the page to save your changes!

Congratulations! You have successfully customized your Review form's text fields!


Customize Labels

Labels are the words / verbage / text being used by the form. You have full control over these text and can replace any of them based on personal preference. If you wish to customize your Review form's labels:

1.) Navigate to the CM Reviews Settings page » Labels tab.

On this page, you can modify the phrases being used in your Review form (including titles / headers, labels, placeholders, and any text string by the plugin that is being shown on the front-end of your site).

2.) Scroll down to find the Add New Review form section.

This is where you will find all the text labels your Review form is using on the front-end.

Add New Review Form

  • Add review form button - This is the button that will appear on the post if you have opted to display the Review form on-click or inside a Popup (this setting can be found inside the Review Form tab). You can customize what text to show on this button.
  • Star Rating headline - This is the star rating title / header for the stars shown in the Review form.
  • Review title headline - This is the label for the Review title text field in the Review form.
  • Review title placeholder - This is the text that will show up inside the review title field in the Review form while the field is empty. (A placeholder is text that will show inside a text field if the text field is empty.)
  • Review content headline - This is the label for the review content text field in the Review form.
  • Review content placeholder - This is the text that will show up inside the review content text field in the Review form while the field is empty. (A placeholder is text that will show inside a text field if the text field is empty.) 
  • User Name headline - This is the label for your user name field on the Review form.
  • User Name placeholder - This is the text that will show up inside the user name text field in the Review form while the field is empty. (A placeholder is text that will show inside a text field if the text field is empty.) 
  • User E-mail headline - This is the label for the user e-mail text field in the Review form.
  • User E-mail placeholder - This is the text that will show up inside the e-mail text field in the Review form while the field is empty. (A placeholder is text that will show inside a text field if the text field is empty.) 

  • Submit button - You can customize the submit button text inside the Review form.
  • Successfully published review confirmation message - This is the message that will display for the user confirming that his review has been successfully submitted and published after submitting the Review form.
  • Pending review approval message -  This message will be displayed to the user after submitting the Review form if you have opted to moderate reviews before publishing (found inside the Access Restrictions tab).

3.) Update the labels you wish to modify.

4.) Don't forget to save your changes (if any are made) by clicking the "Update" button at the bottom of the page.

Your label changes should now reflect on your front-end Review form. Congratulations!


Customize Design and Interface

We give you control over how your Review form looks on the front-end of your website. Here are the steps needed for you to customize its design and interface:

1.) Navigate to the CM Reviews Settings page » Style tab.

2.) From this tab, you can customize the general aesthetic of your front-end Review form under the "Form color theme" section.

As shown below, we have a color picker to make it convenient for you to choose colors that are suited for your website. Of course, the text field will accept any valid HTML/HEX/RGB color code.

  • Form color theme - You have full control over the color theme for your front-end Review form. The color text field will accept any valid HTML/HEX/RGD color code, and of course, you have the option to switch back to the default color (should you wish) by clicking the "Default" button found right under the color text field. A live preview (for visuals) is provided for your convenience.

This is where you can make changes to your Review form's color theme.

3.) Complete control: You also have the power to style the form yourself. Scroll down the page to find "Disable Form style" option.

  • Disable Form style - Of course, we expect some users might not want to use the current form design our plugin provides for many reasons, like it might not go well with their current template or they have a specific form design in mind. Although we have created a standard and generic design for the form to try and cater to every website look, we're aware that some users might want to change this form design. And it is not our intention to limit our users at all, so this is what this option is for. Disabling our form style will remove all CSS properties from the Review form and will leave you with a skeleton form which you can leave as is (to inherit your theme's form styles), or style yourself using the CSS class .cmr_form_custom (which is automatically added to the <form> element so you can easily target it and its child elements when styling the form).

3.) Make the changes and modifications to your Review form's aesthetics according to your liking.

4.) Now of course, don't forget to save your changes!

Your changes should now be applied to your front-end Review form. Congratulations!


And that covers how to customize your Review form in all 4 different ways! Should you have any more questions, feel free to reach out and contact us.


More information about the CM Reviews and Ratings WordPress  Plugin

Other WordPress products can be found at CreativeMinds WordPress Store

Let us know how we can Improve this Product Documentation Page

To open a Support Ticket visit our support center