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

    Creating checkbox as a button

    Asked by JessicaDClark on February 09, 2017 at 12:53 AM

    Hi. I'm having a really tough time making a custom checkbox like this:

    https://codepen.io/ninthman/pen/oBabrW

    None of the methods found in the forums is working for me. How can I achieve this?

    Page URL:
    https://www.jotform.com//?formID=70388868990982#

  • Profile Image
    JotForm Support

    Answered by Helen on February 09, 2017 at 02:22 AM

    Hello,

    Thank you for contacting us.

    I have cloned your form and tested on my side. Then, I have replicated the same issue with you. We have got an issue about adding background URL to form. I have escalated this issue to our developers. 

    There is no ETA at this time but if we have an update, we will inform you via this thread.

    Thank you for your understanding.

  • Profile Image

    Answered by JessicaDClark on February 09, 2017 at 11:42 AM

    Hello,

    Let's remove the background URL. Not a requirement. How can I achieve this?

    I need a checkbox to behave more like a button, with the button and the text having states for normal, hover, and checked. No background URL. I need the button to look and behave like the codepen example I shared, which is now updated without the background URL:

     

    https://codepen.io/ninthman/pen/oBabrW

  • Profile Image
    JotForm Support

    Answered by Mike on February 09, 2017 at 12:55 PM

    We have a Button Checkboxes widget field available.

    Hover effect can be added with the next CSS injected to the widget.

    label:hover {
    background: white !important;
    }

  • Profile Image

    Answered by JessicaDClark on February 09, 2017 at 02:47 PM

    Thanks, Mike.

    I have it mostly sorted. I just need to adjust the spacing. Need some help so that the items don't overlap.

     

    Here's the new form: https://form.jotform.com/70394803471962

  • Profile Image
    JotForm Support

    Answered by Kevin_G on February 09, 2017 at 04:06 PM

    Glad  to know you were able to resolve it. 

    To fix the current problem, please try injecting this CSS code: 

    .form-multiple-column .form-checkbox-item{

        width: auto;

    }

    Here's my sample working form: https://form.jotform.com/70395782566974 

    Hope this helps. 

  • Profile Image
    JotForm Developer

    Answered by irem on February 10, 2017 at 07:54 AM

    Hello JessicaDClark,

    We are sorry for the inconvenience we may have caused to you.

    Problem should be fixed now, please check it and let me know if you need further help.

    Thank you for contacting us.

  • Profile Image

    Answered by MartinCo on March 18, 2017 at 09:30 AM

    Hi Jotform, 

    I'm using Radio/checkbox button widget, but they are not displaying well on mobile. Can you please recommend CSS to fix the issue.

    form link: https://form.jotform.me/70745086704459

     

    Looking for help. 

    Thanks