Custom CSS codes needed to style the Star Rating element

Hello,

I can't make custom CSS to work on the "all cities and states" widget

Please help!

For reference, here's my form: https://form.jotform.com/211453071087046

And I have a couple other CSS problems indeed:

1) How can I change the size of the stars in the star rating?

2) How can I change the color of the star filling for the rating?

3) Why is the "enter your name below" field skipping a line to write "below" while there's still plenty of space, and how to change it?

Thanks in advance

Hello! Please find answers to your queries below:

- 1) How can I change the size of the stars in the star rating?

You can use CSS for this purpose. As an example, please check this form: https://form.jotform.com/211486041583959

The golden stars are zoomed to 120% in this form using the following CSS code:

div.form-star-rating > div.form-star-rating-star.Stars{

 zoom: 120%;

}

This CSS can be applied using these instructions. You can change the zoom level as per your requirement; but if you zoom too much; it will blur the image.

Also, please make sure to place this code at the end of your existing CSS code.

- 2) How can I change the color of the star filling for the rating?

The star images that you see are actually images. The available image styles are as follows:

So, unfortunately color changing option for these rating images isn't available.

- 3) Why is the "enter your name below" field skipping a line to write "below" while there's still plenty of space, and how to change it?

As far as I can this field is left aligned and is almost taking all available space (screenshot attached for your reference).

Q) Did you make changes to this field?

Let us know if you still need assistance with this.

Thank you!

Hey Patrick, thanks for answering

Thanks for the CSS code. Does it work with the "real" field also? (the first field with big stars)

Sorry, I should've clarified

I was referring to the first kind of stars, the "Real" field (first one), when it comes to the color filling

3) Could you please check again? I was trying the "display left" option when you checked. But I was actually referring to the "display on top" option, as it is now

Does it work with the "real" field also?

I'm afraid that the custom CSS codes my colleague, Patrick, has provided will not work with the "Real" Star Rating field on your form since it has a different "Rating Style".

Please try the custom CSS codes below that should work on what you are trying to achieve with the"Real" Star Rating field on your form.

div.form-star-rating > div.form-star-rating-star{

 zoom: 120%;

}

The Custom CSS codes above will work on any "Rating Style" you select on the Star Rating field.

I was trying the "display left" option when you checked. But I was actually referring to the "display on top" option, as it is now

I have checked the form you linked on this ticket and the field you are referring to now shows like on your form.

You can fix the issue by injecting the custom CSS codes below.

.form-label-top {

width: 100% !important;

}

As for your new concern, I have moved it to a new ticket considering it is about another topic.

Here's the link to the new ticket: https://www.jotform.com/answers/3129397

We will be responding to that ticket shortly. Kindly refer to that ticket for any follow-up questions or any additional information you would like to let us know to avoid confusion 

Perfect, thank you Mike

About the "Real" field, is there any way to change the color of the Star fills? Or is it the same problem as with the golden stars

And by the way, any solution in regards of my first problem, the one related to the "all cities and states" widget test color?

Thanks in advance

Edit: OK, so as I was checking the different possibilities, I noticed that if I select the "default theme", the stars are naturally bigger, without being blurry, which is great!

I also noticed that when we change the theme colors, we can change the star fills color too!

What I want to do is to change the star fills color without having to change the theme completely, how can I do that?

Also, how can I edit the size of these stars to make them smaller?

Thanks!

The color of the star changes with the theme of the form when the Star Rating Style selected is the first option.

The color is taken up from the color of the theme's color internally.

If you really want to change the color of the stars to your preference, here's what you can do:

First, download this image on your computer so you can edit the color of the stars to your liking.

Note: Keep in mind the shading of the color and the portion that is only filled in each star on that image.

Once you update the color, you can upload the image to your favorite image hosting website.

Get the link to the image and insert it in these custom CSS Codes.

.form-star-rating-star.Stars {

    background-image: url(https://shots.jotform.com/MikeG/screenshot/starrating2.png) !important;

}

Just replace the custom image link I have also added in the codes above (https://shots.jotform.com/MikeG/screenshot/starrating2.png).

After that, inject the custom CSS codes into your form.

Reference Guide: How-to-Inject-Custom-CSS-Codes

Here's a cloned version of your form where I have injected the codes above.

https://form.jotform.com/211493632000947

And, as for the changes that you would like to apply to the style of the "All States and Cities" field on your form, may we ask that you share with us the details about it, please?

We will wait for your response.

Hello,

Something else :

2) I have noticed that if I don't prefill the stars with one star and keep them empty, and if the user don't fill, them, it will not display in the form report sent by email to him and to me, instead of showing 0/6. How can I choose so it selects 0/6 instead of not showing the field at all?

4) About the stars. I downloaded the image, but it seems like each star looks different. Could you please clarify which star I should change the color of?

So we can focus on your concern regarding the Stars Rating widget on this ticket, I have moved questions #1 and #3 in your last reply to different tickets. Here are the links to those tickets, respectively:

https://www.jotform.com/answers/3130039 — All States and Cities widget: Change the "country", "state", and "city" text color

https://www.jotform.com/answers/3130038 — Include Geolocation widget value in the email notification, not email autoresponder

As for your additional concern about the Stars Rating fields on your form, please allow me some time to find a workaround/solution. I'll get back to you on this ticket as soon as possible.

Since you can insert the value of the Star Rating widget into another field using conditions or into the Form Calculation widget, here's what you can do so you can get a value of "0/6" or "0/10" out from the Star Rating fields on your form that will be in your report or email alerts that will be sent to you and your form respondents:

My screenshot above shows that I have used the Form Calculation widget to achieve such requirements. I have added the Real Star Rating in the widget's calculation and typed in "/10" after it manually. Note: Do not forget to click the Save button to save the calculation.

You will have to do this for each Star Rating field on your form. And you can hide the Form Calculation widgets so your respondents won't have to see them.

Let's say you have set up everything already, you can now include the Form Calculation widgets into the content of the email alerts you have set up in your form if the widgets were not added automatically.

You can now set the Default Value of the Star Rating fields on your form empty.

Here's the result:

As for changing the color of the stars to your preference, here are the parts that I have only updated in the image.

The second star has a color that is a shade lighter than the color of the third star and the fourth half-star. The color of the second star is the color of the star on the Star Rating field when you hover over it.

I hope this helps. Feel free to let us know if you need any further assistance.

Questions about the calculation widget :

1) Does the 1/6, 2/6 etc rating have the "form calculation widget" too? And

2) Is there a way to avoid the "form calculation widget" mention in the email at all?

With the workaround my colleague provided the form calculation widgets will have all ratings. The form calculation widget rating will be shown based on the selected star rating option. From 0/6 to 6/6.

You can remove the "form calculation widget" from the question text on your form or in the Email Notification.

Example:

Perfect, thank you

Can you tell me how to make the stars smaller?

Kindly allow me some time to check if there is an available workaround that would help you with your requirements based on the current setup of the Star Rating fields on your most recent form. I'll get back to you on this ticket with my findings/solution as soon as possible.

Apologies for any delays. Please try injecting the custom CSS codes below into your form to see if it meets your requirement.

.form-star-rating-star.Stars {

    width: 26px;

    height: 24px;

    background-size: cover;

}

.form-star-rating-star.Stars.rated {

    background-position: -51px 0px !important;

}

.Stars[style*="32px 0px"] {

    background-position: -26px 0px !important;

}

Reference Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Result:

Please give it a try and let us know if you need any further assistance.

Hey Mike, thanks for the answer

So, it kinda worked for the size, but it didn't work for what I wanted to achieve, which is displaying 10 stars on one line for the phone version of my embedded form, on my website.

Here's how it looks after injecting CSS http://prntscr.com/13w5uvo

(still can't align more than 5 stars in a row)

Here's the web page https://www.darknighthimself.com/pages/darknight-music-emotions-poll

Thank you for the additional information.

We can perhaps reduce the distance or eliminate the space between each star by injecting these additional custom CSS codes into your form.

.Stars {

margin-right: 0px !important;

}

You can set the value of the margin-right property in the codes above from 0px to 5px.

Here's how it should look like on mobile view when you applied it to your form.

Here's the link to the form in the screenshot above, feel free to test it on your end:

https://form.jotform.com/211534170522949

Please give it a try and let us know if you need any further assistance.

It looks good, thanks!

I created a new thread for your other question: https://www.jotform.com/answers/3140434

Hey Mike,

About this "Since you can insert the value of the Star Rating widget into another field using conditions or into the Form Calculation widget, here's what you can do so you can get a value of "0/6" or "0/10" out from the Star Rating fields on your form that will be in your report or email alerts that will be sent to you and your form respondents:"

Is there any other workarounds in order to just show the 0 star fields in the email that summarizes the form?

For example, even if it doesn't state 0/6, it's ok if it states something like "empty", or something

I just want it to be listed.

The problem with the workaround you showed me, is that since I have 60 fields, it's gonna take ages for me to tie the form calculation widget with each, and then ages too to rename each field and delete "(form calculation widget", and delete the previous field, and then ages to modify my form statistics, etc.

I'd appreciate any other solution

Thanks

Hello! If you only wan these to be listed in the emails then you can disable "Hide empty fields" for your email alerts. If you disable it; then the star field will still show up but without any value (as indicated in the screenshot below).

If this works for you; then following is how you can disable "Hide empty fields" for your email alerts:

Let us know if you have any questions.

Thank you!

Interesting

Now, is there a way to create a "default value" for empty fields?

For example, instead of being blank, all empty fields will display "0"

Please note that only if you are using a Form calculation widget can the empty field show a value of 0.

Otherwise, there is no option to show a value 0 on empty fields on the email.