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

    Image Radio Buttons: checkbox position and design

    Asked by Rpcaporali on July 28, 2017 at 09:57 AM

    Hello,

    I´m using the Image Radio Buttons widget but I would like to make the following changes, if possible:

     

    1) Move the circular checkbox to the left side of the image instead of the bottom of it.

    2) Change the circular checkbox from the black/white dot to a green check (such as the ones in "Image Checkbox widget")

    3 ) Change vertical spacing between choices, since I´m using just one column.

    Examples are shown in image attached.

     

    Thank you very much in advance. 

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Nik_C on July 28, 2017 at 01:06 PM

    I checked your form and I saw that you were able to move the checkbox to the left.

    I tried to change the look of it, I got something like this:

    And this is the CSS I used: 

    .black-radio {

        background: url(https://www.shareicon.net/data/128x128/2016/08/20/817720_check_395x512.png);

        background-size: 30px;

    }

    I used some external image to change the background. But unfortunately, I wasn't able to make it change on click only. I'm just not sure if it can be done.

    Regarding the margin between fields, the best would be to add bottom margin for each div(each image checkbox):

    You could inspect each element and add the CSS on the right hand-side.

    If you need further assistance please let us know.

    Thank you!