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.
How to align radio buttons in one line?Asked by danischenker on August 26, 2014 at 11:58 PM
I am trying to create a form like on the page below.
I somehow need to get all radio button on one line... Can you direct me to a solution? :)
By the way: I was a bit confused with the support form.
I was under the impression that I was searching a faq database.
But when I hit "enter" I directly created the forum post...
Sorry about that ;-)
Welcome to the JotForm support forum. =)
The Radio button option field has a "Spread column" property. You can use that property to align the options into column formation.
I actually can see in your test form http://www.jotform.co/form/42376679367875 that you had discovered this already.
Contact us again anytime should you need assistance.
Thanks, I did find this option, right. But it did not solve my problem.
I set it to "9 colomns" but just like in your screenshot it would only create 4 columns.
Somehow this seems to be the maximum. But I don't get why... Since I only use the numbers there should be enough space to have all the radio buttons on 1 line... not?
Please be noted that radio button options takes it own width. If you want to show more columns, you will have to increase the width of your form. Please check the screenshot below:
If you do not want to change the width of you form, another option is to add custom css code in your form to reduce the width of the radio button options. Please inject the following custom css code in your form and that should solve your problem:
width: 50px !important;
The following guide should help you in injecting custom css code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
Hope this helps.
Do get back to us if you have any questions.
This is it! Thanks Ashwin!
On behalf of my colleagues you are very welcome. Please let us know if there is anything else we can help you with and we will be happy to do so.
Thank you for using JotForm!
Unfortunately, I've tried both of these solutions mentioned here. I can see my radio button options in multiple columns in the form builder. But when my form is displayed on my squarespace website, it reformats to one column. It is embedded in my website using the source code because the iframe added an vertical blank space of thousands of pixels that was irksomely difficult to regulate.
Thanks all! Great tool, great forums :D
I have moved your question to a new thread and you will be answered here: http://www.jotform.com/answers/494304