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

    Radio Button Image Alignment

    Asked by bunddlex on February 24, 2016 at 09:25 AM

    Hello Again,

     

    Is there a way to center the actual radio button on top or below the image using the regular radio button image option.

     

     

    Im using this code: <img alt="" src="//telecom.bunddlex.com/wp-content/uploads/2016/02/tv1.png" style="width:100px;height:76px;">

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

    alignment button image image alignment style uploads image option height
  • Profile Image
    JotForm Support

    Answered by Mike_G on February 24, 2016 at 02:10 PM

    Here's a clone version of your form I have used for testing: https://form.jotform.com/60545579782974

    In order for you to achieve such, you need to add CSS codes to your form.

    You may refer to this guide for instructions on how to: How-to-Inject-Custom-CSS-Codes

    Here are the codes that you need to add to your form:

    #id_29 .form-radio-item:not(#foo) label:before{

    left: 34% !important;

    top: 100% !important;

    }

    #id_29 .form-radio-item:not(#foo) label:after {

    left: 37%;

    top: 105%;

    }

     

    #id_30 .form-radio-item:not(#foo) label:before{

    left: 37% !important;

    top: 100% !important;

    }

    #id_30 .form-radio-item:not(#foo) label:after {

    left: 38%;

    top: 104%;

    }

     

    #id_31 .form-radio-item:not(#foo) label:before{

    left: 37% !important;

    top: 99% !important;

    }

    #id_31 .form-radio-item:not(#foo) label:after {

    left: 39%;

    top: 102%;

    }