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

    Possible to add a space between radio buttons?

    Asked by cgl102770 on October 28, 2011 at 07:07 AM

    In the example below, its important to my client that the "CORE Services" option is at the bottom, like it is now, with a space above it, so that it stands out. Is it possible to add a space like this? I created that form using a different form maker but like jotform better and would prefer to use it. I hope this makes sense, thank you for any suggestions!

    Page URL:
    http://www.npsga.com/referral_djj.html

    radio buttons form maker JotForm css inject css spacing
  • Profile Image
    JotForm Support

    Answered by liyam on October 28, 2011 at 07:30 AM

    Hello,

    You can do his by injecting a CSS code on your form.

    But first, find the class or the ID of the fields you wish to add spaces.  Next, create your code and then insert the CSS code in your CSS injection field.

    Example: You wish all radio button items to have 5 pixels of space on top of each.  I searched the code and  found this class that all radio items have.

    form-radio-item 

    I created then this code to insert for CSS injection:

    .form-radio-item { margin-top: 5px;}

    Now, to inject the CSS:

    1.Edit your form and click Preferences

    2. A pop-up will appear, go to Form Styles tab, at the bottom is the Inject Custom CSS field

    3. Click the "Click to Edit" part beside the Inject Custom CSS and paste the CSS code.

    Please let us know if you have other questions or concerns.

    Thanks.

  • Profile Image

    Answered by cgl102770 on November 03, 2011 at 02:38 PM

    Thank you! I'm almost there. I've increased the spacing between all of the radio buttons, but I only need the space increased between the PRTF radial and the CORE one. Is this possible? I can't find where in the code those radials are named specifically. Thank you for any suggestions!

  • Profile Image

    Answered by cgl102770 on November 03, 2011 at 02:38 PM

    This is the form in progress:

    http://www.jotform.com/form/12963736541

  • Profile Image
    JotForm Support

    Answered by abajan on November 03, 2011 at 09:10 PM

    Replace the second rule in your current injected CSS with the following two rules and save the form:

    .form-single-column
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item {
    margin-top:20px;
    }

    .form-single-column
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item {
    margin-top:5px;
    }

    In all likelihood,  there's a more elegant, less bloated way to achieve your objective. Nevertheless, the above CSS does work!

  • Profile Image

    Answered by cgl102770 on November 04, 2011 at 08:35 PM

    It works, thank you! 

    http://www.jotform.com/form/12963736541

    Just one more question and I'll leave you guys alone. Is there a way for the "other" radial button to not be at the bottom? I'd like for it to be at the bottom of the top list, but above "core services".

    another option would be for there to be two columns of radial buttons, all of them on the left column, except for "core services", which would be on the right.

    Thank you for any help...

     


  • Profile Image
    JotForm Support

    Answered by abajan on November 04, 2011 at 10:15 PM

    The requested repositioning can be accomplished but the problem is inconsistent rendering across browsers and possibly platforms.

    My tests have shown that while the spacing between the radio button elements in this form looks okay in Chrome 15, IE 8 and Safari 5, it doesn't quite "pass muster" in Firefox 7 and Opera 11 (especially Opera).

    As to the alternative of having just "CORE Services" on the right, I imagine CSS would have to be injected here too but our team will have to look into it and get back to you soon.

    Incidentally, to reposition the "Other" field, the two rules I gave in my last post above would need to be edited like this:

     

    .form-single-column
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item {
    margin-top:45px;
    }

    .form-single-column
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item {
    position:absolute;
    top:114px;
    left:10px;
    }

    Correction: Replace ALL of your injected CSS with the following:

     

    #label_1 {padding:3px 3px 5px 0;}
    #input_1 {width:350px;}
    .form-radio-item {position:relative;}
    .form-radio-item label {
    position:absolute;
    top:0;
    left:16px;
    width:540px;
    }

    .form-single-column
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item +
    .clearfix +
    .form-radio-item {
    margin-top:20px;
    }

    This formats the "CORE Services..." element correctly (in addition to other things).

     

  • Profile Image
    JotForm Support

    Answered by abajan on November 05, 2011 at 10:32 AM

    By the way:

     


  • Profile Image

    Answered by DRPLASTER on July 31, 2012 at 02:34 PM

    You seem very helpful abajan, maybe you can help me too. :)

     

    I made a form for my dentist and there is a big radio button series with only two options, a yes and a no. The problem is the two options are so spread out from each other and the dentist as well as patients have asked me to make that space much smaller between the options.

    Here is a link to my form: http://plasterdds.com/forms.html

    Can you help me with that?

    Thank you, Jamie

  • Profile Image
    JotForm Support

    Answered by Mike_T on July 31, 2012 at 05:01 PM

    @DRPLASTER,

    As far as I can see, you have injected something like:

    .form-matrix-column-headers {

    width: 70px !important;

    }

    For example, you can reduce the size in pixels to 30. Just change your code to:

    .form-matrix-column-headers {

    width: 30px !important;

    }  

     And you will get something like this:

     If you need any further assistance, please let us know.