Custom CSS codes needed to style the Star Rating element

  • Profile Image
    darknighthimself
    Asked on May 29, 2021 at 08:41 AM

    Hello,

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

    Please help!

  • Profile Image
    darknighthimself
    Answered on May 29, 2021 at 09:14 AM

    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

  • Profile Image
    Patrick_R
    Answered on May 29, 2021 at 02:20 PM

    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:

    1622312376_60b285b82bb23_The Easiest Onl

    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).

    1622312406_60b285d6c8d16_Darkbcxvbxbcxbd

    Q) Did you make changes to this field?

    Let us know if you still need assistance with this.

    Thank you!

  • Profile Image
    darknighthimself
    Answered on May 29, 2021 at 03:43 PM

    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

    4) One more thing : I'm trying to use the shuffle widget to only shuffle the star ratings, while I keep the name, email, country etc. fields where they are (which means, at the end of the form). I tried to add them to the exclusion in the widget but it didn't work and it kept shuffling. Can you help?
  • Profile Image
    Mike_G
    Answered on May 29, 2021 at 10:27 PM

    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.

    1622340192_60b2f26009414_zt210529_215945

    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 

  • Profile Image
    darknighthimself
    Answered on May 30, 2021 at 06:49 AM

    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!

  • Profile Image
    Mike_G
    Answered on May 30, 2021 at 10:23 AM

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

    1622380994_60b391c2361ad_zt210530_092221

    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.

    1622382744_60b3989826259_zt210530_095200

    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.

  • Profile Image
    Mike_G
    Answered on May 30, 2021 at 04:15 PM

    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.

  • Profile Image
    Mike_G
    Answered on May 30, 2021 at 05:15 PM

    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:

    1622406560_60b3f5a0bd46b_zt210530_162054

    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.

    1622406991_60b3f74ff3cca_zt210530_163527

    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.

    1622407283_60b3f8735aa47_zt210530_164006

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

    1622408358_60b3fca6c0e1c_zt210530_165810

    Here's the result:

    1622408615_60b3fda7b87b9_zt210530_170307

    1622408632_60b3fdb8a9987_zt210530_170241

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

    1622409120_60b3ffa0f2663_zt210530_170456

    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.

  • Profile Image
    Nik_M
    Answered on June 01, 2021 at 12:09 PM

    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:

    1622563722_60b65b8a66d8f_star2.gif

  • Profile Image
    darknighthimself
    Answered on June 03, 2021 at 08:12 AM

    Perfect, thank you

    Can you tell me how to make the stars smaller?

  • Profile Image
    Mike_G
    Answered on June 03, 2021 at 09:27 AM

    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.

  • Profile Image
    Mike_G
    Answered on June 03, 2021 at 11:28 AM

    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:

    1622729283_60b8e2438d2ac_zt210603_100413

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

  • Profile Image
    Mike_G
    Answered on June 03, 2021 at 06:43 PM

    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.

    1622760133_60b95ac52d1ea_zt210603_184109

    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.

  • Profile Image
    Nik_M
    Answered on June 04, 2021 at 08:35 AM

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

  • Profile Image
    darknighthimself
    Answered on June 05, 2021 at 12:00 PM

    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

  • Profile Image
    Patrick_R
    Answered on June 05, 2021 at 05:33 PM

    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).

    1622928758_60bbed769642a_tgesrgregesrgse

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

    1622928775_60bbed87d87bb_The Easiest Onl

    Let us know if you have any questions.

    Thank you!

  • Profile Image
    darknighthimself
    Answered on June 06, 2021 at 08:10 AM

    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"

  • Profile Image
    gerardw
    Answered on June 06, 2021 at 08:14 AM

    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.