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.
Star Rating Field: Ability to use a custom image.Asked by marketing905 on January 13, 2017 at 08:12 AM
Is there anyway to use a custom image as a star rating? I'd really like to use a custom one as the "stars" available to me are too small.
Unfortunately there is not a way to change the images in the star rating field or increase its size without affecting the field functionality.
I will forward this thread to our second level as a feature request, although we cannot provide an ETA or ensure this will be developed we will let you know as soon as we get updates regarding this.
I forwarded your request but as my colleague Kevin said we can't ensure you if this will be ever implemented or not.
But by curiosity I tried this CSS3 property where you can scale objects. Maybe this can interest you.
If you inject this CSS code below, you can make the star rating field a little bit bigger by compensating on the image quality:
transform : scale(1.25,1.25);
Thank you Scott,
That's definitely been a big help.
You are welcome Richard,
If there is anything that I can help you with, just let me know,
Hi, I am using your transform solution to scale my rating stars larger, it works great in Chrome, but changes are not visible on Safari / Ipad. Do you have any suggestions?
You could add a vendor prefix so the code works in all browsers, here's a link with more info about it: https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix
Here's the code given above with the browsers prefix added:
transform : scale(1.5);
-webkit-transform : scale(1.5);
-moz-transform : scale(1.5);
-o-transform : scale(1.5);
-ms-transform : scale(1.5);
Hope this helps.