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

    customizing the form

    Asked by ptsinc on February 24, 2014 at 01:44 PM

    I created a form on your site and would like to convert one area into a table that would look like this:

     

     

     

     

    Date Quantity Manufactuer Model Number Serial Number Problem Description
               
               
               
               
               
               
               
               
               

     

     

               
    Screenshot
    problem quantity table site
  • Profile Image

    Answered by pinoytech on February 24, 2014 at 02:38 PM

    Hi,

    There is tool to achieve that in your form called Matrix field which can be found under Survey Tool.

    You might like to take a look at this demo form that I've created.

    http://www.jotformpro.com/form/40545637625963

    If you need further assistance, please let us know.

  • Profile Image

    Answered by ptsinc on February 24, 2014 at 02:50 PM
    Exactly what I need. How do I edit your form to add more rows and change the field sizes? Also, I tried using the Matrix option but got this:
    How do I go from this screen to the sample you sent me?
    Thanks! Tim
    ...
  • Profile Image

    Answered by pinoytech on February 24, 2014 at 03:02 PM

    How do I edit your form to add more rows and change the field sizes?

    You can clone my demo form for you to use it and modified.

    Here is the guide on how to clone form: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    For changing Matrix textbox size, I've injected some custom css into the form. Bellow is the custom css that I've injected. 

    .form-matrix-values {

    padding-left: 8px;

    padding-right: 8px;

    }

    .form-matrix-values .form-textbox {

    width: 50px;

    }

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 60px;

    }

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 150px;

    }

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 150px;

    }

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 70px;

    }

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {

    width: 250px;

    }

     

    How do I go from this screen to the sample you sent me?

    Unfortunately, I don't see any attached image in your response. Can you please post it again for further assistance?

    Thanks,

  • Profile Image

    Answered by ptsinc on February 24, 2014 at 03:20 PM

    Here is what I meat to show you....
    ...
  • Profile Image
    JotForm Support

    Answered by EltonCris on February 24, 2014 at 03:28 PM

    @ptsinc

    Sorry but we cannot find the image on your reply if you have attached any. FYI, Attached files on emails cannot be posted here on support forum, unfortunately. May I request you to post the image URLs directly on this thread http://www.jotform.com/answers/337915 so we can view it here. You may refer to this guide: http://www.jotform.com/answers/277033

    Regards!

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 24, 2014 at 03:35 PM

    By the way, if you mean this screen: https://cms.jotform.com/uploads/answers/answer/ptsinc/337915_Sample%20RMA%20form.JPG

    That's possible. You can add columns and rows by adding more options on its properties under Columns and Rows. Each option represents a new column/row label. The input type can be changed from radio buttons to text as well. Check this screenshot:

    Regarding on the customization, please refer to my colleague's instruction on how to inject CSS codes to your form and use the one he provided.

    Thanks!

  • Profile Image

    Answered by ptsinc on February 24, 2014 at 11:10 PM
    How do I inject this custom css into my form? The directions about creating the form are perfect but I still can't figure out how to adjust the field sizes. For example I want to make the problem description column longer.
    Here is the link to the form I created:

    This is the ccs I need to figure out how to use.
    .form-matrix-values {
    padding-left: 8px;
    padding-right: 8px;
    }
    .form-matrix-values .form-textbox {
    width: 50px;
    }
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 60px;
    }
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 150px;
    }
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 150px;
    }
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 70px;
    }
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 250px;
    }
    ...
  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 25, 2014 at 01:10 AM

    Hello ptsinc,

    Do you actually need to know how to inject the above mentioned custom css code in your form?

    The following guide should help you to inject custom css code:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Do get back to us if you have any questions.

    Thank you!