Can I change the color of the check marks?

  • Profile Image
    CIWisc
    Asked 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!

  • Profile Image
    liyam
    Answered 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
    idarktech
    Answered 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
    CIWisc
    Answered 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
    CIWisc
    Answered 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
    brx250
    Answered 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
    liyam
    Answered 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
    rdillman
    Answered 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;

    }