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 do I separate product data or quantities into individual columns or cells in the report?

    Asked by westvincentpta on November 16, 2013 at 12:25 AM

    I just created a new form with products and did a test run. The form works well, but the reports are not compiling the data in a way that is usable.

    We are offering 4 types of hoagies for sale. Users may select any hoagie type(s) and also choose the quantity (using a dropdown menu) for each type.

    However when looking at the reports, all types/quanities of hoagies are all listed together in one cell. I've attached a photo below to illustrate how the report currently looks. 

    To make this form usable, I would need to have each hoagie type's quantity listed in a separate column or individual cells (for sorting). How can I make this happen, either within JotForm itself or as a Google Doc? Help!

    product Reports JotForm separate columns
  • Profile Image
    JotForm Support

    Answered by abajan on November 16, 2013 at 01:00 AM

    This is feasible. In a nutshell, extra text boxes need to be added to the form (they would be hidden from the end users' view) and a copy of the form's full source needs to be embedded into a web page. A script on that page would populate the hidden text boxes with the user selections. Since the text boxes are separate fields, their values will be displayed in separate columns in the report.

    The only drawback I can see at this point (other obstacles may be discovered along the way to the solution) is that the report will have the aforementioned columns plus the one in your screenshot instead of replacing it, which in essence is just a visual issue.

    Let me work on something over the weekend and get back to you.

  • Profile Image
    JotForm Support

    Answered by abajan on November 16, 2013 at 06:22 AM

    Actually, after having slept and then re-read your requirements, I realized that the workaround would be much simpler than I initially thought. Unless some unforeseen obstacle reveals itself, I'll post the solution shortly.

  • Profile Image
    JotForm Support

    Answered by abajan on November 16, 2013 at 08:35 AM

    Okay, here's what to do:

    1. Load the form in the form builder and after the payment field insert a text box:


    2.
    Change the label of the newly inserted field from "Click to edit" to "Italian Hoagie Box"

    3. Under that field, insert another text box and label it "Turkey Hoagie Box"

    4. Under that field, insert another text box and label it "Roast Beef Hoagie Box"

    5. Under that field, insert another text box and label it "Veggie Hoagie Box"

    At this juncture, the form fields should look as follows in the form builder:


    6.
    (Optional) Set each of the newly inserted fields to read-only (See NeilVicente's first reply in this thread)

    7. Inject the following CSS:

    #id_9, #id_10,
    #id_11, #id_12 {
    display: none;
    }

    (The newly added fields should now not be visible in the form builder. If they are, the script to which I will refer later in these instructions will not work. But that can be easily resolved.)

    8. Save the form and copy its full source to your computer's clipboard

    9. Paste the code into the body (and not the head) of a web page of your choice

    10. Just before the closing body tag of the same page, insert this code

    11. Save the page

    That should do it. (Step 6 was included on the off chance that a user has CSS disabled in their browser. In such cases the extra fields would be visible.)

    If you don't wish to see the extra field information showing up in your notification of the form's submissions, open the notification in the form builder and remove the relavant lines from the Question and Answer table in the Compose Email section. Please see guilledutra's reply in this thread.

    As a demonstration of the auto-populating functionality of the script, complete and submit this form and then hit the browser's "Back" button. (This demo form doesn't really submit information anywhere. I just wanted to show that the script populates the boxes according to the selections made.) Also, if you're having difficulty figuring out exactly where the code in step 10 above should go, have a look at the demo's source.

    Do let us know how everything works out.


    Thanks