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

    Can I change the color of the check marks?

    Asked by CIWisc on September 25, 2011 at 11:07 PM

    I'd like to know if it's possible to change the color or size of the actual check marks as my users select the item.  I'd like them to "pop" on the screen.

    Thank you!

    Page URL:
    http://form.jotform.com/form/12664845262

    Check box size
  • Profile Image
    JotForm Support

    Answered by liyam on September 26, 2011 at 09:15 AM

    Hello,

    Thank you for posting your inquiry.

    Is this the type of functionality that you are looking for? http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

    If so, apparently, this option is not possible yet with JotForm's tools and features.  And since this type of functionality uses Javascripts, you will have to get the HTML source code of your form and place it on your own web page.  This is because you cannot insert Javascripts in forms that are hosted in JotForm.

    To get your form's HTML source code:

    1. Go to Setup & embed tab
    2. Click embed Form

    3. An Embed Form Wizard will appear.  Under Display it on your site, click Source

    4.Copy the source code or if you prefer, you can click on the link if you prefer having a copy of the CSS and Javascript files.

    After getting the source code, you can paste it inside your web page and then you can customize it the way you like, including having the checkbox features that you're looking for.

    If you are going to search for other scripts, I would like to recommend as well to use the ones that do not use jquery libraries as it has a high possibility of conflicting with your form's other functionalities such as the error messages of your required fields.

    If you have other questions or concerns, please do let us know.

    Thanks,

    Liyam

  • Profile Image
    JotForm Support

    Answered by idarktech on September 26, 2011 at 09:20 AM

    Wow that was a great guide, I hope it works I will give a try. Thank you!

  • Profile Image

    Answered by CIWisc on September 26, 2011 at 11:05 AM

    Hmmm, I will try.  Looks a bit tricky, but thank you for point me in the right direction!  I'm guessing I need to add some bit of color code somewhere?

  • Profile Image

    Answered by CIWisc on September 26, 2011 at 11:20 AM

    I don't know where I would put it into the source code.  And once I'd put it into the source code, where would I put the revised source code?  (Perhaps I'm too new at this to even ask my question correctly, sorry!)

  • Profile Image

    Answered by brx250 on September 28, 2011 at 05:09 PM

    Hi there,

    To obtain the level of customization you're looking for requires a little bit of tinkering and programming. As liyam mentioned, you need to get the whole form's code not the embed code. Once you got it, you have to paste everything on your local webpage. That way you can customize it to your heart’s desire. You will not be able to edit your form if you only embed it, because your webpage is only linking from our servers. You have to save your form on your own hosted site to get more versatility.

    Hope this helps!

    ___________________________________________________________
    Albert | JotForm Support

  • Profile Image
    JotForm Support

    Answered by liyam on September 29, 2011 at 01:52 AM

    In addition to what my colleage, Albert, has stated;  I'll share with you a sample of the javascript integrated jotform that I have created. 

    What I did was create my own html file and inserted my form code there. Then I inserted my javascripts and this is the result:

    http://liyam.awardspace.com/jotform/checkboxsample.html

    You can try downloading the script on this link. Just unzip the file and then you can play around with the script. The file comes with a demo script.

    Hope this information helps you.

    Warm regards,

    Liyam

  • Profile Image

    Answered by rdillman on August 03, 2015 at 12:12 PM

    In the designer you can modify any code you want via CSS.

     

    I added the following code for green check marks.  This assumes that your check boxes are the large ones and that you have them left aligned to the text.  You will have to play around with the top and left properties to get it to align the way you want.

    .jotform-form .form-checkbox-item:not(#foo) input:checked + label:after {

        content : '\2713'; /* the fat check-mark character */

        background-color : transparent; /* turn off their version */

        -webkit-transform : none;

        -o-transform : none;

        -ms-transform : none;

        transform : none; /* turn off rotation */

        left : -34px;

        top : -9px;

        font-size : 36px;

        font-weight : bold;

        color : green;

    }