How do I create product checkboxes with associated quantity text boxes on the same line?

  • mcagnest
    Asked on October 5, 2014 at 1: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 

    Thanks

     

    Melvin CHan

  • jonathan
    Replied on October 5, 2014 at 4:12 PM

    Hi Melvin,

    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

    How do I create product checkboxes with associated quantity text boxes on the same line? Image 1 Screenshot 20

     

     

    Hope this help. Tell us if you need further assistance.

    Thanks.

     

     

  • mcagnest
    Replied on October 6, 2014 at 7:41 AM
    HI Jonathan,
    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
    here?
    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.
    Thanks.
    Melvin
    ...
  • Ben
    Replied on October 6, 2014 at 9:17 AM

    Hi Melvin

    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.

    Best Regards,
    Ben

  • mcagnest
    Replied on October 6, 2014 at 10:51 PM
    Hi Ben,
    A number of your links provided don't work.
    It's ok. I'll pass.
    All the best.
    ...
  • TitusN
    Replied on October 7, 2014 at 6:43 AM

    Hello, 

    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. 

    How do I create product checkboxes with associated quantity text boxes on the same line? Image 1 Screenshot 20

    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. 

     

  • mcagnest
    Replied on October 14, 2014 at 6:31 AM
    Hi Titus,
    Thanks for the help. I imported your sample and started working on it.
    Seems better now. But I have a few questions.
    http://www.jotform.com/?formID=42862300743450
    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 mcagnest@gmail.com but it does not seem to work.
    Lastly, is it possible to configure the quantity box as a compulsory field?
    Thank you.
    Melvin
    ...
  • mcagnest
    Replied on October 14, 2014 at 6:31 AM
    Sorry Titus, the notification works fine now.
    Thanks. Hear from you on the rest.
    Melvin
    ...
  • Ben
    Replied on October 14, 2014 at 9:42 AM

    Hi Melvin

    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.

    Best Regards,
    Ben

  • mcagnest
    Replied on October 15, 2014 at 4:41 AM
    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! :)
    Melvin
    ...
  • mcagnest
    Replied on October 15, 2014 at 11:01 PM
    Hi Ben,
    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
    Melvin
    ...
  • Welvin Support Team Lead
    Replied on October 16, 2014 at 1:09 AM

    Hi Melvin,

    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.

    How do I create product checkboxes with associated quantity text boxes on the same line? Image 1 Screenshot 20

     

    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.

    Thank you!

    BTW, that's too close, just M and W :) 

  • mcagnest
    Replied on October 21, 2014 at 6:31 AM
    Hello Ben,
    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.
    http://form.jotform.me/form/42862300743450
    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
    previously.
    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
    out.
    Looking forward to your advise. I have attached the screen shots of the
    requests.
    Thank you Ben
    Melvin
    ...
  • Welvin Support Team Lead
    Replied on October 21, 2014 at 7:56 AM

    Hi Melvin,

    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.

    Thank you!

  • mcagnest
    Replied on October 23, 2014 at 12:31 AM
    Hi Welvin,
    Sure.
    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.
    Melvin
    ...
  • jonathan
    Replied on October 23, 2014 at 4:46 AM

    Melvin,

    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.

    Thanks.

     

  • mcagnest
    Replied on October 23, 2014 at 4:51 AM
    Hi Jonathan,
    That's right. Thank you.
    Looking forward.
    ps: The final thing that I am looking to do to this form is to put a photo
    sample of the items in the box. I read that this is possible.

    Melvin
    ...
  • sosinteractive
    Replied on July 14, 2016 at 3:49 PM