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

    style the normal radio button fields - remove the button so images are shown instead

    Asked by lironuri on August 10, 2014 at 03:10 AM

    Hi, I am trying to style the normal radio button fields, remove the button so images are shown instead.

    Then, show a border color for selected images, just like the "image radio button" widget can do.

    For example: http://www.jotformpro.com/form/42133891847966

     

    I must use Radio Buttons, because i want to add the "price" field to each product..

    So, what part of that code do I copy to my form to make it work?

     

    Thank you!

    Page URL:
    http://form.jotform.me/form/42130425892451?

  • Profile Image
    JotForm Support

    Answered by EltonCris on August 10, 2014 at 10:25 AM

    Hi,

    You can use the following CSS codes. Make sure to change the element ID as seen on the code below (e.g. #id_209with the element ID you want to remove its radio buttons and highlight the image on selection.

    #id_209 input[type="radio"] {

    display: none;

    }

    input[type="radio"]:checked + label img {

    border: 2px solid #CACACA;

    box-shadow: 0 0 5px #B8B8B8;

    border-radius: 10px;

    }

    Guide: How-to-Inject-Custom-CSS-Codes-to-your-Form

    Here's how to get field ID number. https://www.jotform.com/help/146-How-to-find-Field-IDs-Names

    *Note: You must use the li element ID that holds the field instead of the input field ID, so it should always start with #id_ followed by the number you found on the field properties.

    Sample result:

    If you need further assistance, let us know here.

    Regards!