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

    Use image as labels on radio buttons

    Asked by coorfm on December 17, 2015 at 10:16 AM

    Hi!

    I would like to have radio buttons with only colors and no text. How can I do that?

    I have tried one of the gadget, but I need to input text and it would be great if I can remove the round "tick it box".

     

    Screenshot
    image radio image buttons
  • Profile Image
    JotForm Support

    Answered by EltonCris on December 17, 2015 at 11:11 AM

    I see that you are using an image checkbox widget. If you want to remove its subtext and check mark, simply inject this CSS codes under its properties so only the images are visible.

    .radio, label {display: none;}

    Example:

    Make sure to add a slight difference between the active and default images so it is easy to identify if the option is selected or not. :)

    If you need further assistance, do let us know.

  • Profile Image
    JotForm Support

    Answered by EltonCris on December 17, 2015 at 11:12 AM

    If you also want to remove the gray border on the images, append this.

    li img {border: none;}

    Result:

    Cheers!

  • Profile Image

    Answered by coorfm on December 17, 2015 at 11:27 AM

    Great! Thanks!

    Three more questions :-)

    - I guess that I need to insert another picture for each color so I can "see" that I have clicked on the button.

    - The pictures got very large, how do I change the size, it does not work when I change the size in the wizard.

    - Do you recommend another gadget for this feature? 

  • Profile Image
    JotForm Support

    Answered by EltonCris on December 17, 2015 at 11:48 AM

    1. Yes, that's right :)

    2. It worked for me when I check your form. It is now bigger compared earlier.

    3. There's actually another way using a native radio button field, but I'm afraid it would require more CSS codes and more steps to be accomplished. I think this widget much easier and neater.

    By the way, if you want to use radio buttons for single selection, I suggest using "Image Radio Buttons" widget, instead of the "Image Checkboxes" widget. Checkbox is intended for multiple selections. If you're going to restrict its limit e.g. by 1, it would not be convenient to switch between options because you have to uncheck the selected checkbox first before you can check a different one. In short, "Image Radio Buttons" widget is the appropriate one. You can search this on the Widgest section.

    Let us know should you need further help with the radio image CSS.

    Regards!

  • Profile Image

    Answered by coorfm on December 18, 2015 at 03:09 AM

    Hi!

    Thanks, much better to use "Image Radio Buttons". I used the same CSS codes:

    .radio, label {display: none;}  

    li img {border: none;}

    And the border disappered but not the subtext. Have I done something wrong or do I need another CSS code?

  • Profile Image
    JotForm Support

    Answered by mert on December 18, 2015 at 08:03 AM

    Hi again,

    I think the following CSS code is just like what you are asking. It shows the subtexts; but hides the orange buttons at the same time. 

     

    .radio{

    display: none;

    }  

    li img {

    border: none;

    }

    .orange-radio{

    display: none;

    }

     

    After applying this CSS, the widget will look like the following:

     

    I hope this one will meet your needs. If it is not, please let us know.

    Thanks.