I am looking to create form like this

  • TD
    Asked on December 21, 2017 at 3:56 PM

    Hi, I am looking to create form like this. There  doesn't seem like there is a good way to do this.  Would be nice to get the amount row to auto calculate but not mandatory. 

    Jotform Thread 1329540 Screenshot
  • John_Benson
    Replied on December 21, 2017 at 6:28 PM

    First, I suggest creating a Free account here in JotForm so you can manage your forms and submissions properly. Here's the link: https://www.jotform.com/signup/

    After that, please follow the video/guide to get familiarize with our Form Builder. Here's the link: https://www.jotform.com/help/2-How-to-Create-Your-First-Web-Form

    About your question, that is possible here in JotForm. You can use Input Table field and calculate the Total using Form Calculation widget. Here's a demo simple demo form: https://form.jotform.com/73547517928974

    If you want to copy the demo form to check it further, please follow this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    I hope this information helps. If you have questions, please contact us again.

  • T_D
    Replied on December 23, 2017 at 8:43 AM
    Thank you. The is exactly what I was looking for. I have setup an account. The only thing i don’t understand is how were you able to change the size of the entree file size. I checked in field properties area and don’t see an option and I also tried to see if you can drag to set the width but no luck. I wanted to have 20 input rows.
    ...
  • Ardian_L
    Replied on December 23, 2017 at 9:40 AM

    To add a new row you should click on that element, and then an Add Row button appears in the bottom left side. Please check the video below:

    1514039945InputRow Screenshot 10

    Let us know if you have any other question.

  • T_D
    Replied on December 23, 2017 at 10:43 AM
    I see how to add it but the text I put area of the columns don’t line up.
    ...
  • liyam
    Replied on December 23, 2017 at 11:26 AM

    If what you mean is that the text box does not stretch to expand its width the same as the ones above it, I recommend to please replace your CSS code with this:

    .form-matrix-table tr td:nth-child(2) + td input {
      width: 300px;
    }

    15140463322017 12 24 0022 Screenshot 10

    With using this code, the Entree textboxes shall automatically come up with the same width.

    Here is a guide to know where to find the CSS tab and inject the code into your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    If I misunderstood your concern, please let us know.

    Thanks.

  • T_D
    Replied on December 23, 2017 at 1:43 PM
    Perfect,
    last question, where do I adjust the the the “total” calculation widget so it calculates the new rows I add?
    ...
  • T_D
    Replied on December 23, 2017 at 1:43 PM
    Scratch that last ask, I figured it out.
    ...