How to make a multi rowed Textbox within one block?

  • Profile Image
    npapadmin
    Asked on December 16, 2016 at 01:42 PM

    Here is the form I am trying to emulate: 

     

    And this is all I could muster up in Jotform:

     

  • Profile Image
    Mike_G
    Answered on December 16, 2016 at 03: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.

  • Profile Image
    npapadmin
    Answered on December 16, 2016 at 04: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!

  • Profile Image
    Mike_G
    Answered on December 16, 2016 at 04: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?


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

    Thank you.

  • Profile Image
    npapadmin
    Answered on December 16, 2016 at 04: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!

     

     

     

  • Profile Image
    Mike_G
    Answered on December 16, 2016 at 07: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.

    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.