How to make a multi rowed Textbox within one block?

  • npapadmin
    Asked on December 16, 2016 at 1:42 PM

    Here is the form I am trying to emulate: 

    How to make a multi rowed Textbox within one block? Image 1 Screenshot 30

     

    And this is all I could muster up in Jotform:

    How to make a multi rowed Textbox within one block? Image 2 Screenshot 41

     

  • Mike_G JotForm Support
    Replied on December 16, 2016 at 3:47 PM

    This actually depends on how would you like the data to be gathered.

    If you want to have each of the fields in the group to be separated in the submission page then, you can use normal "Textbox" fields. We just need to apply CSS codes to the fields to meet your requirements.

    I have created a clone version of your form (https://www.jotform.com/63496678982176) and applied the CSS codes below.

    Sample Form (clone version)https://www.jotform.com/form/63506356598972

    ul.form-section.page-section li:nth-child(n+3):nth-child(-n+5), ul.form-section.page-section li:nth-child(n+7):nth-child(-n+9) {

        padding: 0px 36px;

        margin-top: 0px;

        margin-bottom: 0px;

    }

    ul.form-section.page-section li:nth-child(n+3):nth-child(-n+5) label, ul.form-section.page-section li:nth-child(n+7):nth-child(-n+9) label {

        width: 434px !important;

        margin: 0px !important;

    }

    ul.form-section.page-section li:nth-child(n+4):nth-child(-n+5) label, ul.form-section.page-section li:nth-child(n+8):nth-child(-n+9) label {

        text-indent: 15px !important;

    }

    NOTE: I did not include the field, "Please notify the above of my gift in honor of (no amount will be indicated).", to the group since it was not included in the screenshot you provided. However, if that should really be included, please let us know and give us more details on how you would want to position it. 

    To learn how to inject custom CSS codes to your from, please refer to this guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    If you want the submission data to be as one, then you can try to use any of the following widgets below:

    Configurable List Widget - which may also require you to use CSS codes to position the fields.

    Multiple Text Fields Widget - would also require minimal CSS coding to format/style the fields.

    I hope this helps. If you need any further assistance, please feel free to contact us again anytime.

    Thank you.

  • npapadmin
    Replied on December 16, 2016 at 4:15 PM

    Hi Thank you so much, very helpful. Yes this needs to be added: Please notify the above of my gift in honor of (no amount will be indicated)

    Please position it at the bottom of the paragraph. Thank you again!

  • Mike_G JotForm Support
    Replied on December 16, 2016 at 4:27 PM

    You're much welcome! 

    With regards to the field "Please notify the above of my gift in honor of (no amount will be indicated).", I see two of it. May we know which one are we going to place below the paragraph? And, are you referring to the paragraph placed at the top of your form?

    How to make a multi rowed Textbox within one block? Image 1 Screenshot 20

    Kindly give us more details. We will wait for your response.

    Thank you.

  • npapadmin
    Replied on December 16, 2016 at 4:50 PM

    The above paragraph is text only, I can manage that thank you!

    Please notify the above of my gift in honor of (no amount will be indicated) --- this goes in tow places:

    1)  I want my gift to be in honor of:

    2) I want my gift to be in memorial of:

    This is the form I am trying to emulate also: http://npap.org/donate/

    Thank you, this is so great!

     

     

     

  • Mike_G JotForm Support
    Replied on December 16, 2016 at 7:53 PM

    In the form you're trying to imitate, the "Please notify the above of my gift in honor of (no amount will be indicated).", is just a text and not a field just like what you have in your form.

    I suggest you change that to "Text". Please see the screenshot below.

    How to make a multi rowed Textbox within one block? Image 1 Screenshot 20

    Please note that you also need to do the same with the second "Please notify the above of my gift in honor of (no amount will be indicated).".

    Then, update the CSS codes I gave you above to the CSS codes below:

    ul.form-section.page-section li:nth-child(n+3):nth-child(-n+5), ul.form-section.page-section li:nth-child(n+7):nth-child(-n+9) {

        padding: 0px 36px !important;

        margin-top: 0px !important;

        margin-bottom: 0px !important;

    }

    ul.form-section.page-section li:nth-child(n+3):nth-child(-n+5) label, ul.form-section.page-section li:nth-child(n+7):nth-child(-n+9) label {

        width: 247px !important;

        margin: 0px !important;

    }

    ul.form-section.page-section li:nth-child(n+3):nth-child(-n+5) input, ul.form-section.page-section li:nth-child(n+7):nth-child(-n+9) input {

        width: 309px;

    }

    ul.form-section.page-section li:nth-child(6), ul.form-section.page-section li:nth-child(10) {

        padding: 0px 36px;

        margin: 0px;

    }

    ul.form-section.page-section li:nth-child(6) p, ul.form-section.page-section li:nth-child(10) p {

        margin: 0px;

        text-indent: 244px !important;

        font-size: 10px;

    }

    li#id_19 {

        margin-bottom: 12px;

    }

    Here again is the Sample Form where I have applied the codes above.

    https://www.jotformpro.com/form/63506356598972

    You can clone it to your account so you can inspect it better.

    https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Please feel free to let us know if there is something else in it that you need help with and we will be glad to assist you. And if, in any case, I have misunderstood your concern, please let us know also and provide us more details.

    Thank you.