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 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?
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.
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
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.
Very Thank you for your big help!
yes! i did it! Thanks to all for suggestions!
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:
and this into CSS code:
*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
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!
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.
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!
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. :)