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

    How can I make a 4-column form?

    Asked by intersportgroup on February 24, 2017 at 02:35 PM

    No matter what I do I cannot get my test form to format within the 4 columns I have created.  When I try to drag them into place the whole screen just shutters around and nothing gets moved.

    Also when I use the previous function the radio dots are not aligned, the letters become scrunched and not aligned. 

    Is there any way to have real time assistance so I can make a decision about switching to JotForm?

     

    Dona

  • Profile Image
    JotForm Support

    Answered by Jim_R on February 24, 2017 at 04:03 PM

    Hello Dona, we don't offer phone support. However, we'd be more than willing and happy to help you here in a timely manner. 

    You have to do a couple of things to make this work as a 4-column form:

    1. Ensure you are indeed using 4 columns. When I cloned your form, I'm seeing it's set to 3 columns only.

    2. The 4th field named Front Width (A) should be Moved to a new line.

    3. Then use CSS to reduce the width of the 2-column field named Base Size so it won't look odd with the other 1-column Radio Buttons. We'll also set the total width of the form so it can accommodate 4 columns.

       3a. REMOVE the CSS you have placed on your form

       3b. REPLACE them with these:

    .form-multiple-column .form-radio-item {

        width : 70px;

    }

    .form-all {

        width : 960px !important;

    }

    This short clip will show all the steps above:

    And here's my cloned form https://www.jotform.com/70545750839969

    Feel free to clone it too (here's how) in case you wanted to start from there.