customizing the form

  • Profile Image
    ptsinc
    Asked 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
               
               
               
               
               
               
               
               
               

     

     

               
  • Profile Image
    pinoytech
    Answered 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
    ptsinc
    Answered 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
    pinoytech
    Answered 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
    ptsinc
    Answered on February 24, 2014 at 03:20 PM

    Here is what I meat to show you....
    ...
  • Profile Image
    EltonCris
    Answered 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
    EltonCris
    Answered 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
    ptsinc
    Answered 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
    ashwin_d
    Answered 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!