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 do I create product checkboxes with associated quantity text boxes on the same line?Asked by mcagnest on October 05, 2014 at 01:00 PM
I am trying to create a multiple item form with a check box and a corresponding field for the user to specify the quantities to order. It could be any thing from 0 to a few thousands.
The problem is when I tried to add a text beside the item check boxes, the formatting does not allow the quantity text box to be in the same line as the item. Is there a way out of this?
The sample form can be found on http://www.jotform.com/?formID=42774951793469
JotForm problem quantity sample form configurable list
Please check also this user guide http://www.jotform.com/help/90-Form-Field-Positioning
You can use the field positioning property to position multiple fields on same line.
BUT I think it will be much simpler also if you will instead use the Configurable List Widget.
Check it here http://widgets.jotform.com/widget/configurable_list
Using this widget, you can add multiple fields in the same group, and they are positioned side by side already when added
Here is a sample jotform http://www.jotform.me/form/42775776851470
Hope this help. Tell us if you need further assistance.
I tried to access http://www.jotform.com/help/90-Form-Field-Positioning
- Doesn't work.
Check it here http://widgets.jotform.com/widget/configurable_list - I
visited this link but it gets more complicated. What am I supposed to do
Sorry but it's really a complicated way to get a simple working form!
Please help. I'll try for the last time before I'll try other sites.
Please check the user guide link once again ( Form Field Positioning ). Unfortunately we had some error which did not allow it to be opened at that time.
In regards to our configurable list widget, please go to it again and take a look at screenshots and the description. If you like it please check this tutorial to see how to Add a Widget to your Form. It will help you with your future projects as well.
If you need any assistance with setting it up, just let us know.
A number of your links provided don't work.
It's ok. I'll pass.
All the best.
We sincerely apologize for that - we had some delays with some of our links loading - but we have since addressed the problem and the links should work properly.
In addressing your original request - kindly check out this form - http://form.jotformpro.com/form/42792410915960?
I used the Purchase Order field to create it - and it allows a lot of customization as you have described:
1. A product checkbox
2. A corresponding quantity box/drop-down field
3. Variations of the same product with differing pricing.
Does it look like what you are looking for?
The fields can be easily arranged to be next to each other on the same line - should this be the functionality you are looking for.
We are willing to assist in helping you create the form - and we look forward to your response.
Thanks for the help. I imported your sample and started working on it.
Seems better now. But I have a few questions.
I would like to add another text box called "Electronics" similar to the
category "Stationary" in the same item checkboxes but it seems impossible.
Everytime I create a text box it appears as a new field instead of it
within the checkboxes. Is there a way out of this?
I also tried to configure the submit button to have a notification to my
email email@example.com but it does not seem to work.
Lastly, is it possible to configure the quantity box as a compulsory field?
Sorry Titus, the notification works fine now.
Thanks. Hear from you on the rest.
I would like to add another text box called "Electronics" similar to the category "Stationary" in the same item checkboxes but it seems impossible.
Everytime I create a text box it appears as a new field instead of it within the checkboxes. Is there a way out of this?
It would be possible to do this with some CSS turning it from a field with checkbox into looking like "Stationary" text, but if you want to have 2 different payment processing widgets on the same jotform and use them both in the same time, than that would not be possible.
Lastly, is it possible to configure the quantity box as a compulsory field?
Please set the available quantities with 1 as minimum. This will set them to at least 1 item if they click on the item (leave a checkmark on the item) to order it and will ignore if they do not check it.
If you decide to add it and let us help you with the CSS for making it look like "Stationary" please add all the fields that you wanted to add and let us know and we will help you with the CSS.
Thanks Ben. I will add all the items as you advised and send the form back
to you for the CSS part. Let's see how it goes! :)
I have created all the fields as advised and this is how it looks. Funny
thing is the alignment of the office telephone number field and the
expected date of return field goes out of alignment.
Anyway, I would need to add in the headings "Electronics" and "For Event
Site" to the items. The positioning I have created a dummy in the two
attachments attached. Can you help me create this or teach me how to do
this?Lastly, is there a way I could reposition the items in a two column
format. It currently looks like a very long form! :)
Thank you and regards
I've fixed the field alignment. You can move it to a new line. IT's the same way of field positioning: https://www.jotform.com/help/90-Form-Field-Positioning.
For Product Categories under Payment Tools, we have a guide for that: https://www.jotform.com/help/178-How-to-Have-Sub-Category-or-Sub-Labels-on-an-Order-Form.
Would you mind configuring the Items as Category? Then we'll help you add the custom CSS codes to remove the checkboxes, make it bold and adjust the sizes.
BTW, that's too close, just M and W :)
I have created a fairly decent form with the help of your colleagues for
the 2 column form which you advised me to settle first.
Now this is done and I need your help to create the CSS label for
Electronics and For Event Site just like the Stationary field as mentioned
I find now with the 2 column field, things are a little complicated for the
Event Site where one of the item remains in the column of the Electronics
column. Don't know if this is an issue for you but thought I just point it
Looking forward to your advise. I have attached the screen shots of the
Thank you Ben
Would you mind telling us what options are your categories for the whole payment form, please? OR, can you please group it? For example, 1, 2 and 3 for Category 1 and 4, 5 and 6 for Category 2.
1) The first category "Stationary" consists of items 1 - 26.
2) The second category to be created is "Electronics" which consists
of items that comes right after 26 but they are numbered as 1 - 15.
3) The last category to be created is "For Event Site" consists of items
that comes right after 15 of "Electronics" which is 1 - 12.
Hope this helps.
Thank you very much.
Thank you for providing us the required details.
I understand this is the jotform you were referring to http://www.jotform.me/form/42862300743450
Give us some time to create the the solution you need on this form.
We will get back to you as soon as we can.