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 to align and split boxes along with calculations

    Asked by NickCombs on March 14, 2017 at 03:36 PM

    Hello,

    My name is Nick and I have a quick question about a form I created. It is a form that I found online a while back and tweaked to use as an expense form for my school district. Here is an example of the form: https://form.jotformpro.com/NickCombs/thales-academy-system-expensereport  As you may notice, above the area to fill in dates, it is showing expense 1 (this was not present in the past) and the alignment of the text and cells are not consistent. Is there any way to change these issues?

     

    I am also adding a screenshot of a pdf submission. Maybe you can tell me how to split the expense nine boxes and total calculations boxes.

     

    Warm regards,

     

    Nick

    Page URL:
    https://www.jotform.com/NickCombs/thales-academy-system-expensereport

    Screenshot
  • Profile Image
    JotForm Support

    Answered by BDAVID on March 14, 2017 at 06:53 PM

    The problem is that each box is a field, therefor the alignment in the form is not consistent. What I would suggest you is to use a matrix field type.

    I have taken the time to recreate your form using the Input Table(Matrix) field, and the Configurable List widget for the dates. Here is how I have performed the calculations on each calculation widget from matrix columns: 

    So, to accomplish this layout:

    I injected the following CSS code in the form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #cid_153{

        margin-left: -70px;

    }

    #id_152 table.form-matrix-table input{

    width: 80px !important;

    }

    #label_153{

        visibility: hidden;

    }

    And the following CSS code inside the Configurable List widget:

    #customFieldFrame_153{

    height: 323px;

    }

    th {

        background: #ddd !important;

        height: 25px;

    }

    select{

        height: 31px !important;

    }

    .add{

        display: none;

    }

    You can test my cloned version: https://form.jotform.com/70726925554968 

    And clone it in your account if you want to: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Hope this helps. Let us know if you have more questions.

  • Profile Image

    Answered by NickCombs on March 15, 2017 at 08:46 AM
    Thank you so much. That is excellent and extremely beneficial.
    Nick
    ...