How do I widen the column width of radio buttons

  • Profile Image
    Asked on March 11, 2017 at 03:58 AM

    The apparent lack of function on columns is frustrating me. On a basic radio button 'spread to columns' option no matter how wide the form is set it cramps the columns together so that you get multiple lines and it looks untidy. I just need to make the columns wider and cannot see how.

    Have tried searching FAQ's - can you help me to make the columns wider please. I warn you I don't code without a cut and paste and step by step instructions - too scary.

    Also - Security - I have message that all forms are secure by default - I know that I can encrypt but this makes sending data to google spreadsheets problematic. I need users of the form to feel secure - I have added the seal but it says make sure the form is secure. I am used to seeing 'securejotform' in the link. Please confirm that this form is secure by default.

    Form in question is

  • Profile Image
    Answered on March 11, 2017 at 02:15 PM


    What the developers have in mind on this is have options for the most common settings available to be available to users. Having too many options can be confusing and would often overwhelm users. So the rest is let go. We let users manage the rest of the styling with CSS coding. But of course not everyone is technically adept to this so this is where we come in :D

    So for your case about your radio buttons in which some texts are moving to the next line, here is my CSS code for you:

    #id_20 .form-radio-item {
       width: 200px;

    #id_12 .form-multiple-column .form-checkbox-item {
        border: solid 1px red;
        width: 175px;

    I also noticed that you have a multiple column checkbox which one item has its text moving on to the same line as well, so I also expanded the width of each item for this.

    Now, here is the instruction on how you will insert this code:

    1. In the form builder, click the Form Designer icon.


    2. Click on the CSS tab, and paste the code in the "Inject Custom CSS" area.


    3. Once the code has been injected, do not forget to click on the Save button on the lower part of the window.


    With regarding your 2nd concern (Security), please take note that encrypted forms feature is different from using SSL and the encryption that goes with this.

    The encrypted forms feature of JotForm prevents the storing of readable data on JotForm's servers. So all texts here are encrypted from its very text. This requires a JotForm key for a form owner to be able to read texts. If the key is lost or if the encryption forms feature gets disabled, the text in your submissions is as good as garbage.

    On the other hand, there is this encryption called SSL. SSL stand for Secure Sockets Layer and is the standard for establishing an encrypted link between a web server and a browser. What this do is it ensures that all data passed between the web server and browser remain private. Normally, data sent between browsers and web servers is sent in plain text. For those hackers who can eavesdrop data transmissions, this leaves users to be vulnerable for interception. So SSL prevents this from happening.

    For using SSL, what you simply need to do is make sure that the URL you are using starts with https://. And as how I see your form, it appears to be fine. Only that the security seal on your form fails to load properly. An easy way to fix this is download the security certificate seal from your form and place it under your images folder on your website

    If you have questions or if you need assistance, please let us know.