Can fields built with a certain table configuration

  • Profile Image
    tjotim
    Asked on September 29, 2017 at 08:16 PM

    Hello

     

    I am trying to build a form with a table as below, I want to list a group of categories and have an option to select "Applicable" or "Not applicable" and then add a free text remark.

    I would also like to know if it is possible to hide the remarks field aand only show if one of the other fields is selected. 

    I have used configurable matrix widget for similar applications but have not yet worked out a solution for this one. 

     

    Category

    Applicable

    Non Applicable

    Remarks

    Fixed Text

    Check Box

    Check Box

    Free Text

    Fixed Text

    Check Box

    Check Box

    Free Text

  • Profile Image
    John_Benson
    Answered on September 29, 2017 at 09:34 PM

    Please try the Configurable List widget. Here's the link: https://widgets.jotform.com/widget/configurable_list

    To learn more about the Configurable List widget, please open this guide: https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget

    If you have any questions, please contact us again.

  • Profile Image
    NRGTIM
    Answered on October 02, 2017 at 05:51 PM

    Thanks John

    I have used the configurable list widget successfully in another form. Can the configurable list be configured that the table shows 3 lines with pre-defined text in the first row and then have check boxes, drop downs etc in subsequent rows? 

    Matrix is an option but as far as I can see you cannot have additional field types I the matrix, they all need to be text, check box etc?


    Regards

  • Profile Image
    liyam
    Answered on October 02, 2017 at 09:04 PM

    With the limitations on the Matrix, I suppose that your way to go is with the configurable list widget.

    And yes, it is possible to make the configurable widget show 3 lines with pre-defined text/questions by positioning it using CSS. We can also assist you with this.

    In any case, feel free to let us know if you have questions or if you need assistance.

  • Profile Image
    NRGTIM
    Answered on October 02, 2017 at 09:21 PM

    Thanks Liyam


    Are you able to share the CSS code with me to make this happen?

  • Profile Image
    John_Benson
    Answered on October 02, 2017 at 11:31 PM

    I have created a demo form that you can check. Here's the URL: https://form.jotformpro.com/72749226028965

    Is that what you're referring to? To show only 3 lines of the Configurable List widget. 

    Or are you referring to the 3 lines of Static Text in the Configurable List widget?

    The only custom CSS code I have added is to hide the "Add" button.

    We'll wait for your response. 

  • Profile Image
    NRGTIM
    Answered on October 02, 2017 at 11:38 PM

    Thats what I am after,.

  • Profile Image
    John_Benson
    Answered on October 03, 2017 at 01:26 AM

    Just to add, you can clone the demo form by following this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    If you need to adjust the spacing or alignment of the fields inside the Configurable List widget, let us know so we can provide you a custom CSS code.

  • Profile Image
    NRGTIM
    Answered on October 03, 2017 at 05:32 AM

    Excellent thanks, what do I do to change the text in each line of the static text category one, for example’

    Category 1

    yellow truck

    white truck

    blue truck

  • Profile Image
    liyam
    Answered on October 03, 2017 at 10:19 AM

    I think there is a misunderstanding here. But I see what you are trying to achieve NRGTIM.

    To give a better idea on the configurable list widget and how you can put it in multiple lines per set, you will need to set your order on a single line first Then, by using a CSS code, you can set your layout next.

    Here is an example:

    1) I have created a single line set of fields having a total of 9 fields.

    2) I have divided it by 3's, so the 4th and my 7th should go down. By adding a CSS code, I managed to have it show like this:

    For your reference, here is a sample form: https://form.jotform.com/72753894539978

    Note, however, that we do not have a fixed code for this. The CSS code may vary depending on the fields that you have in the widget. So it's kind of useless to share the code with you (but if you clone the form, you will see the CSS code in it).

    I suggest that you create your fields in the widget first and let us know to which parts that you wish to be moved to the next row.

    Thanks.