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

    Increase the star image?

    Asked by Bo on February 06, 2012 at 04:31 PM

    Using full source code, is there a way to increase the size of the stars?  I need to increase them by about 3x.

    size source full source code
  • Profile Image
    JotForm Support

    Answered by idarktech on February 07, 2012 at 02:19 AM

    Hi Bo,

    I think editing star image is a lil bit complicated. May we know the form URL containing star ratings field? We'll see if we can adjust the size for you. Thank you so much!

  • Profile Image

    Answered by Bob on February 07, 2012 at 11:20 AM

    An example form is here:

    http://www.messagereminders.com/forms/form/20314928083

     

  • Profile Image
    JotForm Support

    Answered by idarktech on February 08, 2012 at 12:31 AM

    Hi,

    I have here the stars image increased up to 3x bigger: https://cms.jotform.com/uploads/image_upload/image_upload/global/1335_stars.png

    To make it working, simply replace your stars image file to that and your protoplus-ui.js file (it's included on the form's full source code file when you download your form files) to this: http://www.idarktech.com/jotform/JotForm/jotform/js/protoplus-ui.js

    Here's a sample demo: http://www.idarktech.com/jotform/JotForm/jotform/Test_Form.html

    Hope you like it. If you need any further assistance, please let us know. Thank you so much for waiting, have a great day!

  • Profile Image

    Answered by Bob on February 08, 2012 at 09:31 AM

    This is great, however, it will not show up in a browser when previewing form or going to form url.  It only shows up in admin when creating or editing a form.

    http://www.messagereminders.com/forms/form/20372507395

     

    HELP!

  • Profile Image
    JotForm Support

    Answered by idarktech on February 08, 2012 at 07:04 PM

    Hi Bob,

    I see that you've purchased license version of JotForm and hosted on your own, so let me ask you this first, is it correct that what you are trying to achieved here is to change your default stars rating to something bigger so that everytime you'll create form on your side the stars has its bigger size by default? Or you only want to apply this big stars to a specific form? Please let us know so that I could pass this to our development team for your further assitance.

    Furthermore, about your form, don't you worry as you've done everything correctly. The only problem here is, your form is still pointing to this javascript: http://cdn.jotfor.ms/jotform.jgz?3.1.110 which I believe it's still hosted on JotForm. This link contains another default image stars size which controls the stars image of your form. This is the reason why stars on your form displays only 16px of the image which is supposed be 48px now (48px is from protoplus-ui.js file which I gave you). So, if you'd like to apply big stars on a specific form, I can do it for you. But, making it as your default star ratings then our developers will handle this for you.

    We'll be looking forward to your response. Thank you so much!

  • Profile Image

    Answered by Bob on February 08, 2012 at 07:45 PM

    Yes, I would like the stars to be bigger by default.  Applying this to only one form would not do the trick.

    Thanks for the help, and I look forward to hearing from you.

  • Profile Image
    JotForm Support

    Answered by idarktech on February 08, 2012 at 08:37 PM

    Hi Bob,

    Let me inform you that this issue was already forwarded to our developers. They will be notified about this as long as they get online. Sorry though if I can not provide a definite time to when this issue will be handled, if possible. Also, I'm quite not sure if custom modification of codes is possible with JotForm, I'll just inform you if this can be accomplished or not. Please stay in touch for updates on this matter. Thank you so much!

  • Profile Image

    Answered by Bo on February 09, 2012 at 12:53 AM

    Hello idarktech,

    Thank you for your help!

    Can we do both options?

    I know you said that JotForm developers are already pursuing customizing the code for the default settings for our forms...that's great for a permanent solution!

    For the time being, can you apply the bigger stars to a specific form for us?  Couldn't we then just clone that form and alter some of the other form fields and have the stars still remain bigger?

  • Profile Image
    JotForm Support

    Answered by idarktech on February 09, 2012 at 02:31 AM

     

    Hello,

    I think I have misinformed you. Sorry to say but we have to wait our higher team's decision first, they are the one to decide when it comes to this matter.

    What we can do for now is to apply bigger stars to a specific form using your form's full source code. Cloning the form is pretty useless at this matter since the form always uses the default code that controls the stars image. My suggestion is to create and finalize your form with a star ratings field, send to me that form's full source code and I'll apply the big stars for you.

    I hope this clarifies the issue. I'll await for your reply. Thank you.

  • Profile Image
    JotForm Founder

    Answered by aytekin on February 09, 2012 at 03:52 AM

    Unfortunately, changing the sizes of the star images on a star rating field is not possible currently. 

  • Profile Image

    Answered by Bo on February 09, 2012 at 04:23 AM

    Here is the full source code for the form:

    <script src="//cdn.jotfor.ms/jotform.jgz?3.1.110" type="text/javascript"></script>
    <script type="text/javascript">
       JotForm.init(function(){
          $('input_6').hint('myname@example.com');
          $('input_8').rating({stars:'5', inputClassName:'form-textbox', imagePath:'http://www.messagereminders.com/forms/images/stars.png', cleanFirst:true, value:'5'});
       });
    </script>
    <link target="_blank" href="http://cdn.jotfor.ms/jotform.cssgz?3.1.110" rel="nofollow" rel="stylesheet" type="text/css" />
    <link type="text/css" rel="stylesheet" target="_blank" href="http://www.messagereminders.com/forms/css/styles/pastel.css" rel="nofollow" />
    <style type="text/css">
        .form-label{
            width:320px !important;
        }
        .form-label-left{
            width:320px !important;
        }
        .form-line{
            padding:30px;
        }
        .form-label-right{
            width:320px !important;
        }
        .form-all{
            width:768px;
            background:none repeat scroll 0% 0% rgb(186, 186, 186);
            color:rgb(6, 4, 15) !important;
            font-family:Verdana,Arial,Helvetica,sans-serif;
            font-size:22px;
        }
    </style>

    <form class="jotform-form" action="http://www.messagereminders.com/forms/submit.php" method="post" name="form_20390322054" id="20390322054" accept-charset="utf-8">
        <input type="hidden" name="formID" value="20390322054" />
        <div class="form-all">
            <ul class="form-section">
                <li id="cid_1" class="form-input-wide">
                    <div class="form-header-group">
                        <h2 id="header_1" class="form-header">
                            General Form
                        </h2>
                    </div>
                </li>
                <li class="form-line" id="id_4">
                    <label class="form-label-left" id="label_4" for="input_4">
                        Feedback for:<span class="form-required">*</span>
                    </label>
                    <div id="cid_4" class="form-input">
                        <select class="form-dropdown validate[required]" style="width:320px" id="input_4" name="q4_feedbackFor">
                            <option>  </option>
                            <option value="John Smith, DMD"> John Smith, DMD </option>
                            <option value="Jane Smith, RDH"> Jane Smith, RDH </option>
                            <option value="Jack Smith - Staff"> Jack Smith - Staff </option>
                        </select>
                    </div>
                </li>
                <li class="form-line" id="id_6">
                    <label class="form-label-left" id="label_6" for="input_6"> Your email address: </label>
                    <div id="cid_6" class="form-input">
                        <input type="email" class="form-textbox validate[Email]" id="input_6" name="q6_yourEmail" size="25" />
                    </div>
                </li>
                <li class="form-line" id="id_8">
                    <label class="form-label-left" id="label_8" for="input_8"> Your overall experience: </label>
                    <div id="cid_8" class="form-input">
                        <div id="input_8" name="q8_yourOverall">
                            <select name="q8_yourOverall">
                                <option value="1"> 1 </option>
                                <option value="2"> 2 </option>
                                <option value="3"> 3 </option>
                                <option value="4"> 4 </option>
                                <option value="5"> 5 </option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="form-line" id="id_5">
                    <label class="form-label-top" id="label_5" for="input_5"> Please tell us what went well: </label>
                    <div id="cid_5" class="form-input-wide">
                        <textarea id="input_5" class="form-textarea" name="q5_pleaseTell" cols="54" rows="6"></textarea>
                    </div>
                </li>
                <li class="form-line" id="id_7">
                    <label class="form-label-top" id="label_7" for="input_7"> Please tell us how we can improve: </label>
                    <div id="cid_7" class="form-input-wide">
                        <textarea id="input_7" class="form-textarea" name="q7_pleaseTell7" cols="54" rows="6"></textarea>
                    </div>
                </li>
                <li class="form-line" id="id_2">
                    <div id="cid_2" class="form-input-wide">
                        <div style="margin-left:340px" class="form-buttons-wrapper">
                            <button id="input_2" type="submit" class="form-submit-button">
                                Submit
                            </button>
                            &nbsp;
                            <button id="input_reset_2" type="reset" class="form-submit-reset">
                                Clear
                            </button>
                        </div>
                    </div>
                </li>
                <li style="display:none">
                    Should be Empty:
                    <input type="text" name="website" value="" />
                </li>
            </ul>
        </div>
        <input type="hidden" id="simple_spc" name="simple_spc" value="20390322054" />
        <script type="text/javascript">
            document.getElementById("si" + "mple" + "_spc").value = "20390322054-20390322054";
        </script>
    </form>

  • Profile Image
    JotForm Support

    Answered by idarktech on February 09, 2012 at 05:25 AM

    Hello,

    Thank you so much for your quick reply. Here's now the final code: http://pastebin.com/raw.php?i=PmHQvLE1

    If you have further questions, please let us know. Thank you so much!

  • Profile Image

    Answered by Bo on February 09, 2012 at 12:07 PM

    idarktech,

    Thank you much!

  • Profile Image

    Answered by 23thechange on February 24, 2016 at 01:39 PM

    I agree with the size of the stars. Touch and tap devices such as a mobile user cannot use the form. Its just to small to manage to choose the correct amount of stars. Has a resolution for this issue been found.