What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Customize Star Rating Style with image?

    Asked by Seastride on November 02, 2014 at 02:27 PM

    Is there a way to change the star rating style to a custom image or images?

    The choices are stars, lightbulbs, hearts etc but I would like to use flames to represent the spice of food selected. (see screenshot below)

     

     

    Page URL:
    http://form.jotformpro.com/form/43055748686972

    Screenshot
    star rating choices selected image rating
  • Profile Image
    JotForm Support

    Answered by jonathan on November 02, 2014 at 03:22 PM

    Hi,

    Unfortunately changing the image used by the Star Rating field is a bit complicated and not very straightforward. You will need to utilize the form's full source code to achieve the modification on the image file used by the tool.

    User guide: http://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form

    I think a much simpler option is to use the Image Radio Buttons widget instead.

    Check it here http://widgets.jotform.com/widget/image_radio_buttons

     

    You can use your own images to it, and use it as a Rating Tool.

    Inform us if you need further assistance.

    Thanks.

     

  • Profile Image
    JotForm Support

    Answered by jonathan on November 02, 2014 at 03:28 PM

    I just want to add on the idea... 

    Since the Image Radio Buttons widget will allow you to have only 1 choice at a time, and it does not show the increased in rating when you select an option (example, in the Star Rating you will know the higher rate was selected because of the increased in number of stars). What you can do in your images instead (i.e. your flame image) is to have bigger flame as the selected option is higher.

    This will indicates which rate the user was selecting.

    Thanks.

  • Profile Image

    Answered by Seastride on November 03, 2014 at 11:25 AM

    Thank you Jonathan. I prefer to use the first method you suggested. I have downloaded the full source code and feel comfortable making the edits. I just don't know where the image references are for the star rating function. (e.g. http://max.jotfor.ms/images/bulps.png)

     

    Can you please point me in the right direction to achieve the desired result?

  • Profile Image

    Answered by Ben on November 03, 2014 at 12:26 PM

    Hi,

    I hope that you do not mind, but I was thinking of giving you a CSS code to accomplish this so that you do not need to alter the source code.

    To do that just add this CSS code:

    div.form-star-rating > div {
        background-image: url("https://shots.jotform.com/ben/images/fire2.png") !important;
        background-repeat: no-repeat;
        display: inline-block;
        height: 20px !important;
    }

    Now, it uses the quick edit of the fire image you posted, but if you have a transparent fire, I could make it look a bit better.

    You can see it in action here: http://form.jotformpro.com/form/43065014601946

    Best Regards,
    Ben

  • Profile Image

    Answered by Seastride on November 03, 2014 at 12:53 PM

    Ben,

     

    that looks really good! In fact the functionality is near perfect. Where did you locate the syntax for div.form-star-rating?

    I'm wondering because when you click the flame, it automatically adds another flame (6 total) at the end. There should only be 5 flames in total. Perhaps this is a glitch because of the CSS?

     

    Thank you for any advice you can provide. I'm 95% there!

     

  • Profile Image

    Answered by Ben on November 03, 2014 at 02:21 PM

    Hi,

    I am glad that you have liked it :)

    Where did you locate the syntax for div.form-star-rating

    You would need to inspect the html code to see what class it is using. Now since there are already codes for the class, I wanted to give it a higher priority so I called it with element in front (more specific CSS).

    I'm wondering because when you click the flame, it automatically adds another flame (6 total) at the end.

    Yes, my bad. I did not test it properly. The last flame should not have been there. It is actually an x to cancel the rating.

    Thank you for any advice you can provide. I'm 95% there!

    Great to hear that. I have updated the form above: http://form.jotformpro.com/form/43065014601946

    I have also added a bit of style to x so that it says what it is for.

    This is the complete CSS:

    div.form-star-rating > div:last-of-type {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    }
    /* You can remove this section bellow if you do not want it to show up */
    div.form-star-rating > div:hover:last-of-type:after {
        border-radius: 4px 12px 12px;
        box-shadow: 0 0 5px orange inset;
        content: "Cancel your rating";
        display: block;
        left: 7px;
        position: relative;
        width: 150px;
    }

    Do let us know how it looks now and if that is what you were after :)

    Best Regards,
    Ben

  • Profile Image

    Answered by Seastride on November 03, 2014 at 02:24 PM

    Absolutely brilliant!

    Put me first in line to recommend you for a pay raise!

    Jotform right on target.

  • Profile Image
    JotForm Support

    Answered by jonathan on November 03, 2014 at 02:37 PM

    I agree. Brilliant solution indeed by Ben.

    We are glad to know of your satisfaction on the service.

    Contact us again anytime for any assistance you need on JotForm.

    Cheers!