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

    Can I insert vertical space between options in radio button field?

    Asked by spartan02 on April 08, 2014 at 11:18 AM

    Hi,

     

    My form has a question with 27 radio buttons that can be selected as the answer.  Is there any way I can insert some blank spaces between a certain group of questions so that it is easier to look at visually?  The only thing I can think of is to insert a blank radio button and put "------" (dashes) across one row.  The problem with this is that that row is still an active radio button.

     

    Any help you could provide would be great.

     

    Thanks!

     

    radio button field radio buttons problem selected thanks
  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on April 08, 2014 at 01:36 PM

    You can do that with custom CSS.

    You must first find out the ID element of the radio button, to do this, use the inspect element of your browser (point to the radio button first, then do right click).

    Once you get the ID element, you can do this:

    Use the padding property and apply it to the entire radio buttons class, like this:

    .form-radio-item {

    .form-radio-item {
    padding-bottom: 15px;
    padding-top: 15px;
    }

    To find out how to inject custom CSS codes, please follow this guide

    You can modify the space in px, according to your needs. If you want to apply this to only a few radio buttons, please share with us the form link and we will gladly assist you. So far I see no radio buttons on the last form you edited, just checkboxes .

  • Profile Image

    Answered by scubbae2000 on April 08, 2014 at 03:16 PM

    You can try the Calumn Spread Dialog.

    check out this link for screen shot example.

    https://www.dropbox.com/s/c35rvkordy35xtb/thumb1-01.jpg

    But if you have CSS/HTML experience your best way is to do it through CSS

    as to what Jeanette posted

  • Profile Image

    Answered by spartan02 on April 08, 2014 at 03:52 PM

    Thanks for the prompt response.  Here is a link to a form with 10 options: http://form.jotform.us/form/40976289828171

    Is is possible to insert a solid or dashed line after Option4 and Option8 in CSS?

     

    If so can you please explain how.

     

    Thanks

  • Profile Image

    Answered by spartan02 on April 08, 2014 at 03:56 PM

    scubbae2000, thanks for the advice.  The issue is that each option has a long string of text, making columns difficult.  Thanks though!

  • Profile Image

    Answered by azhar000 on April 08, 2014 at 04:23 PM

    You can use break <br> tag to create spacing between two or a group radio buttons.

    The break <br> tag inserts a single line break between two html elements.

    You can also solve it by editing css.

     

    Thanks

  • Profile Image

    Answered by spartan02 on April 08, 2014 at 04:41 PM

    Thanks Azhar000, how can I edit it in CSS? Any explanation you could provide would be great.

     

    Thank you

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on April 08, 2014 at 05:50 PM

    Using the <br> can be an option, but they will be gone every time you open the form on edit mode

    So the better solution is to inject Custom CSS code to the form.

    Like I said above, , please follow this guide to know how and where

    Use the padding property and apply it to the entire radio buttons class, like this:

    .form-radio-item {

    .form-radio-item {
    padding-bottom: 15px;
    padding-top: 15px;
    }

    You can see what I've done with your own form using the code above

    You can change the px amount, accordingly.

  • Profile Image

    Answered by spartan02 on April 08, 2014 at 06:04 PM

    Hi, Thank you.  How do I do this using CSS if I only want to change the spacing after only option 4 and option 8 rather than changing the spacing for all the options?

     

    I am looking at this question from last year and trying to adapt it to the form you modified: http://www.jotform.com/answers/178054-Add-vertical-spacing-between-two-radio-buttons

     

    Thanks!

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on April 08, 2014 at 07:19 PM

    You must find the element in the form. In order to find out the specific ID, do a right click right on the 4th one. And click on Inspect Element of your browser. It should give you a similar view as the picture below.

     

    Taking the example of that thread, we have:

    #input_66_0{padding-bottom:20px !important;}

    #input_66_1{padding-top:20px !important;}


    So  #input_66_0 is the upper radio button (in your case, the 4th one), so you must find the id, then use padding-bottom property to actually push the radio button to the top in 20px


    Then  #input_66_1 is the lower radio button (5th one), so you must use padding-top property to actually push the radio button to the bottom in 20px

    Does that make sense?

  • Profile Image

    Answered by spartan02 on April 08, 2014 at 10:42 PM

    Hi, Thanks for the help and prompt responses Jeanette, but its not working in my form :-(

    I am not sure what I am doing wrong?! I tried inserting a space between option 4 and 5.

     

    Link to form: http://form.jotform.us/form/40976289828171

     

    #input_1_2{padding-bottom:25px !important;}

     

    #input_1_3{padding-top:25px !important;}

     

    Thoughts? 

     

    Thanks!

  • Profile Image

    Answered by Cesar on April 08, 2014 at 11:43 PM

    I have cloned your very last form. and injected the following code:

    span:nth-child(5){
    margin-top: 15px;
    }

    span:nth-child(13)
    {
    margin-top: 15px;
    }

    This is my cloned form: http://form.jotformpro.com/form/40978753400963?

     

    Do let us know if this works out for you or not. Thank you.