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

    Is it possible to hide the checkbox and use the image to select as in Image checkbox widget?

    Asked by natupote on June 28, 2016 at 02:10 AM
    it is possible using this method of HTML tags hide the icons of checkboxs , and you can choose a secondary image the checkbox when it has selected ?
  • Profile Image
    JotForm Support

    Answered by Chriistian on June 28, 2016 at 03:13 AM

    I believe it is possible to replace the checkbox with an image and change it to another image when it is checked. However, you will need to identify each of the checkboxes first.

    You can use the inject the custom css below to add an image to each of the checkboxes. Replace the yellow highlighted elementID with the id of the checkbox, and replace the blue highlighted url with the url to your image.

    elementID{

        content: url(http://goo.gl/5hltAw);

        width: 100px;

        height: 100px;

    }

    Now to change the image when it is checked, simply add the :checked property after the elementID of the checkbox, then replace the blue highlighted url with the url to the second image.

    elementID:checked {

        content: url(http://goo.gl/5hltAw);

        width: 100px;

        height: 100px;

    }

    Here's a demo form so you can see it in action: https://form.jotform.com/61791949464976. Please note that when using this method, you will not be able to see the image in the submissions page.

  • Profile Image

    Answered by natupote on June 28, 2016 at 01:05 PM

    many thanks, thats will help me but, how i do to change the image id?

  • Profile Image

    Answered by natupote on June 28, 2016 at 01:51 PM

    Is possible add a onmouseover effect in the checkbutton image?

  • Profile Image
    JotForm Support

    Answered by Nik_C on June 28, 2016 at 02:12 PM

    You need to add a checkbox to your form and then you need to get the checkbox id. You can do that by following this guide:

    In the case I have provided, you would write:

    #input_1_0:checked{

        content: url(ImageURL1);

        width: 100px;

        height: 100px;

    }

    #input_1_0{

        content: url(http://goo.gl/5hltAw);

        width: 100px;

        height: 100px;

    }

    #input_1_1{

        content: url(ImageURL2);

        width: 100px;

        height: 100px;

    }

    #input_1_1:checked{

        content: url(ImageURL2);

        width: 100px;

        height: 100px;

    }

     

    #input_1_2{

        content: url(ImageURL3);

        width: 100px;

        height: 100px;

    }

    #input_1_2:checked{

      content: url(ImageURL3);

        width: 100px;

        height: 100px;

    }

    You can add a hover effect by writing the following code:

    #input_1_0:hover{

        content: url(http://goo.gl/5hltAw);

        width: 110px;

        height: 110px;

    }

    This code will add a hover effect to checkbox.

    The width and height(the orange part of CSS code) are changed so the checkbox will be bigger when the user hovers over it.

    Let us know if you need more information.

  • Profile Image

    Answered by natupote on June 28, 2016 at 05:22 PM

    Cool! Thanks, is it possible put two images at same time in this checkbox?

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 28, 2016 at 05:48 PM

    @natupote

    I'm not quite sure what you're trying to achieve here.

    The CSS codes provided by my colleagues works only on the form level. It is used to replace the checkbox button with images you defined on the CSS codes. They actually involved two images, one for the normal state and one for the active state.

    Example, from my colleague's CSS codes.

    This is its normal state

    #input_1_2{

        content: url(ImageURL3);

        width: 100px;

        height: 100px;

    }

    This is for the active state (when a checkbox is selected)

    #input_1_2:checked{

      content: url(ImageURL3);

        width: 100px;

        height: 100px;

    }

    However, if you want the images to be as an option, then you only have to define the image HTML codes as its options.

    Example:

    Just separate the image codes with space to add more images on the same line (as a single option). Use new line if you want to create a new image option.

    Or I would suggest to use this widget http://widgets.jotform.com/widget/image_checkboxes. This would make this thing so much easier for you. You just need to define the images as its options.

    Hope this helps!

  • Profile Image

    Answered by natupote on June 28, 2016 at 06:10 PM

    thanks! thats help me

  • Profile Image
    JotForm Support

    Answered by Nik_C on June 28, 2016 at 06:13 PM

    On behalf of my colleague you're welcome.

    Please let us know if you have any further question.

    Cheers!