JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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 can I stack the "Number" boxes in the Configurable Forms widget?Asked by susantannermd on August 18, 2015 at 03:11 PM
As can be seen in the screenshot, I am able to stack four check boxes on top of each other in column 2. I would like to stack four number boxes in the column 3 to correspond with each of these check boxes. Is there a good way for me to achieve this?
I see on this form: http://www.jotform.us/form/52244803137147 that there are configurable lists, one after another, which would allow you to do what you are trying to do with ease.
Now, if you still want to set some number box to repeat itself right of the checkboxes, do let us know what is the form (if it is not the one above) and the field so that we can see and help you set it all up.
- It is however recommended to add all of the checkboxes and other fields that you will need into the configurable list before we make any changes.
It is the above form that I was referring to. Specifically the configurable list in the screenshot I provided. I'm still editing the form as a whole, and if you need me to complete it first I'll do that. This particular configurable list, however, is otherwise completed if that's all we need to make the changes to it.
Is this the setup you are looking for: http://form.jotformpro.com/form/52374947022961?.
I believe each cells on each row can only take 1 input type. Let's say one check box field for Column 1, 1 number text box in Column 2, and so on.
The question is how I did mine? It is actually aesthetic or I designed it to look like it, but in the actual setup, the number field are separated by 3 columns.
This is how the configurable List widget is setup in mine:
The setup shown above shows that the number field is separated by one line, this means they are separate columns. The first number field has the column definition "Number", this is the column name. 2nd number field does not have one, but instead I added a space on it, same with the 3rd number. This is how it looks like:
Now what we want to do is position them just below the 3rd column or the 1st number field to have a styling effect that they are in one column. In my case, I used this custom CSS code:
left: -85px !important;
top: 30px !important;
left: -170px !important;
top: 60px !important;
You can check this guide link about CSS positioning. Please check this guide to learn more about the Configurable list widget: http://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget.
If that's something that will work for you, please let us know.
Aha! Thank you. That's exactly what I needed. With a few modifications to the pixel numbers and columns, I got the layout I was going for.
You are welcome. Glad to hear that it helped.
If you needed any assistance again, feel free to open a new thread here in the forum.