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 to setup a 3 column layout on my jotform?

    Asked by ArtyProf on February 27, 2015 at 08:28 AM

    Please help! i want to create form in three colomn - in left  small image and other space under image - is null - simle empty place - other column - content of blocks. I can't free emply space under image - i include the original and what i wont - just paint that. Maybe i dont know how? or it it not possible?

    Screenshot
    create form create content layout align
  • Profile Image

    Answered by Sean on February 27, 2015 at 11:00 AM

    Looking at the images you provided, I presume you would like to get three columns on your form. One with just the image on the left and the other two should consist of the text box and the drop down menu options shown. 

    If my assumptions are incorrect please let me know and feel free to provide additional info.

    I will be doing so checks on the best possible method to explore to get this done. I will update you with my resolution once found - hopefully today. 


    Cheers!


  • Profile Image

    Answered by Wolverin89 on February 27, 2015 at 02:20 PM

    Hello Sean! Yes! you are right - i need three column..no matter what will be in other columns, generally i want to place image in first one! trouble it this situation - is that the image frame is take a full line of all column and i can't to align all other blocks. 

    sorry what from other name a write

  • Profile Image

    Answered by Sean on February 27, 2015 at 03:29 PM

    Thank you for that confirmation. I will be working on a strategy that you can explore to get your desired form alignment. I will be using a cloned version of your form to conduct this test. I will try my best to get this update to you tomorrow if not later today.

  • Profile Image

    Answered by Wolverin89 on February 27, 2015 at 04:11 PM

    Very Thank you for your big help!

  • Profile Image

    Answered by ArtyProf on March 02, 2015 at 03:59 AM

    yes! i did it! Thanks to all for suggestions!

  • Profile Image

    Answered by Ben on March 02, 2015 at 09:59 AM

    I would just like to confirm if your post @ArtyProf was in the right thread?

    If it was, I presume that you are connected to the Wolverin89 account in some manner and have found a way to achieve this?

    Now in regards to the Wolverin89's question and anyone else that comes to this thread looking for the same layout this is how I would approach this issue:

    1. add the image
    2. add the rest of the fields
    3. shrink the fields

    You can see more about this here: http://www.jotform.com/answers/463829

    4. add empty text field that we will use as a spacer so that it falls under the image

    5. set the Text Field to be on a next line

    Using and repeating this will help you set it up to a 3 column layout.

    The rest of the steps is just to:

    1. adjust the width of the text field

    - We do this by adding following into the Text field:

    <div class="ben-empty-column"></div>

    and this into CSS code:

    .ben-empty-column {
          width: 200px;
    }

    *The 200 above can be changed to any width that you are after, that is only as an example.

    2. adjust the width of the rest of the fields

    and once that is done, the layout should look very clean and each fall into a specific column.

    This is a quick sample based on what I have mentioned: http://form.jotformpro.com/form/50604156606955

  • Profile Image

    Answered by ArtyProf on March 03, 2015 at 01:44 AM

    Hello! Yes, you're right, Wolverin89 and Arty - work together! I knew about stretching and stretching blocks, it was only because I made conceived, but the problem is in alignment with a three-column layout. have to play with the settings placement using drag and drop function block, move to another line and stretch with compression, as well as for smooth alignment to adjust the size of the blocks...after much agonizing I did it!
    Ben, I didn't understand anything about the div...don't understand programming and codes, but thanks anyway. I in theory have understood, maybe I could understand and use it in the future! Thank you so much for the help and advice!

  • Profile Image

    Answered by Ben on March 03, 2015 at 07:57 AM

    You are welcome and I am glad to hear that you got it working and in regards to the codes above, if you are interested or need it at some later point we would be happy to explain what exactly they mean and how they are used.

  • Profile Image

    Answered by ArtyProf on March 03, 2015 at 08:09 AM

    Thank you. In my plan later dive deeper in code theme. This is  a big global theme for me as graphic designer, but very interesting! 

    Don't want to trouble you with explanations-first I need to understand the basics, and I'm afraid I don't understand the fact that you will tell :) Thanks for your help!

  • Profile Image

    Answered by Ben on March 03, 2015 at 09:20 AM

    You are welcome and please do let us know of any questions that you have and we would be happy to answer them, no matter how basic or advanced they are. :)