I need some help splitting my form into 2 columns

  • tidybooks
    Asked on December 11, 2015 at 6:02 AM

    Hi I have a form built but I would like to split this into 2 columns I have tried the Shrink option but this doesn't create the desired results. So looks like a CSS job. I have attached an image to show how I would like it to look. Unfortunately my css skills are very basic so not sure where to begin. Any help would be great!

     

    thanks

    Jotform Thread 723147 Screenshot
  • Charlie
    Replied on December 11, 2015 at 9:11 AM

    I cloned your form for testing purposes, you can check it here: https://form.jotform.com/53443739344965?

    To do this, here's how I did it:

    1. First, place the form fields you want to be on the same row side by side, example:

    "Full Name"      "Phone Number"

    "Last Name"     "E-mail"

    etc...

    I shrink them and merge them on the same line. Here's a guide: http://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm 

     

    2. After that, tick "Enable Form Columns" in your Form Designer Tool. Also adjust the form's width, in my case, its set to "900".

    I need some help splitting my form into 2 columns Image 1 Screenshot 30

     

    3. If the "Serial Number" field is quite off on the right, you'll need to use this custom CSS code:

    #id_11 {

        padding-left: 18px !important;

    }

    I need some help splitting my form into 2 columns Image 2 Screenshot 41

     

    If you want to copy or clone my form, you can do that by following this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

     

    Let us know if that works.

  • tidybooks
    Replied on December 11, 2015 at 12:25 PM

    Thank you I will try this out!

  • tidybooks
    Replied on December 15, 2015 at 9:19 AM

    Hi thanks again for the answer

     

    My next questions is I have make form responsive ticked but in mobile mode this form doesn't work correctly. How can I get this to work correctly. thanksI need some help splitting my form into 2 columns Image 1 Screenshot 20

     

     

  • Carina
    Replied on December 15, 2015 at 11:09 AM

    I could replicate the same situation. I will add some changes to the responsive css code to solve this situation.

    I will let you know as soon as I have more details.

    Thanks.

  • tidybooks
    Replied on December 15, 2015 at 11:22 AM

    That is great thank you Carina 

  • Carina
    Replied on December 15, 2015 at 11:43 AM

    You're welcome. You can try and clone this form:

    https://form.jotform.com/53484244103954? 

    I will just correct the slight alignment different that exist on the fields and will get back to you later.

    Thank you

  • Carina
    Replied on December 15, 2015 at 4:03 PM

    I believe it is done:

    I need some help splitting my form into 2 columns Image 1 Screenshot 20

    You can clone the final form:  

    https://form.jotform.com/53484244103954? 

    Let us know if we can assist you further.   

  • tidybooks
    Replied on December 16, 2015 at 10:53 AM

    Brilliant thank you for that!

  • Kiran Support Team Lead
    Replied on December 16, 2015 at 12:22 PM

    You are welcome. Glad to see that solution provided by our colleague worked for you. If you need any further assistance, please do not hesitate to get back to us. We will be happy to help.

    Thank you for using JotForm!!