How can I allow users to input multiple lines of texts (e.g. a URL) in a single field?

  • Profile Image
    Merowish
    Asked on October 07, 2017 at 12:15 AM

    Hello sir,

    I'm using the jotform for submission in my website https://merowish.com/buy-from-india-online-store-p35

    Here i want a small little help from your side, sir actually i want to add the option to "Add more url" by users as here i had marked with red circle http://prntscr.com/guavif

    Here i want to add one option so that user could Add extra field url according to their need. 

    Waiting for your kind response and reply.

    Please help me!

    Thank you


  • Profile Image
    Jim_R
    Answered on October 07, 2017 at 04:02 AM

    Hello @Merowish - Looks like you're using the Short Text Entry (Textbox) for the URL of the Product field.

    If you want users to add more URLs on that field, you should use the Long Text Entry (Textarea) field instead. This should allow users to add as many URLs as they want, depending on how you would set it up.

    In case we misunderstood your question, just get back to us with a bit more info and a clearer description of what you're trying to do so we can better assist you.

  • Profile Image
    Merowish
    Answered on October 07, 2017 at 06:05 AM

    Thanks for the reply.. but actually i want to say that.. on below that "small text box area" i want to add one option like button "Add More Url" it shows just below that text box area. "Add more url" and then when user click on that " Add more url" there should come another text box area for the user to fill there.. 


    Please help me how to do this?


  • Profile Image
    liyam
    Answered on October 07, 2017 at 06:47 AM

    You can add another textbox field in your form and a radio button (single choice) which follows a question to whether add another URL or not. Then create a condition where if the selected choice is yes, the 2nd textbox for URL appears.

    But I think a faster solution is by using an infinite list widget, or a configurable list widget. This way, you are able to allow users to add more information such as URL without setting conditions.

    Here are the widgets suggested:

    https://widgets.jotform.com/widget/infinite_list
    https://widgets.jotform.com/widget/configurable_list

    If you have questions or if you need assistance, please let us know.

  • Profile Image
    Merowish
    Answered on October 08, 2017 at 02:15 AM

    Hello sir,

    i had used this widget https://widgets.jotform.com/widget/infinite_list as per you suggestion.

    It works great as i had wanted but here sir i need one help that i want to place "Sub-Label" Text on that just of field. Please help me how to add "Sub-Label" of that element box.

    My form is https://form.jotform.me/72800287329459

    waiting for your kind response & reply.


    Thank You

  • Profile Image
    liyam
    Answered on October 08, 2017 at 03:52 AM

    Unfortunately, there is no direct solution to add a sub-label on the text field. But you can try adding this CSS code into your widget:

    table#form tbody:after { 
      content: "Text Here"; 
      margin-left: 10px; 
      font-size: 11px;
    }

    Just replace the "Text Here" detail to anything that you wish to have as sub label.

    If the result is not what you expect, please let us know.

  • Profile Image
    Merowish
    Answered on October 08, 2017 at 06:16 AM

    Thanks for your reply sir :)

    Sir i had recently used this widget https://widgets.jotform.com/widget/infinite_list  but this is little difficult as for user because this widget needs to save the details before submit so normal user could face difficult. so i had changed and Added this widget https://widgets.jotform.com/widget/configurable_list and now it works fine. Here is little help i need from your side sir, I had tried the above method to Add Sub-label in this widget but it does not work on this configurable list widget, And also it does not match the design of the Theme which i'm using. As this widget has the another size of "Text Box" and all fields are different in shape and size so it could not match the current theme, please help me how to make all the "Text Box" look like same, here is something exactly what i want. https://prnt.sc/gupo43

    My forms : https://form.jotform.me/72800287329459

    Please help me sir.

  • Profile Image
    liyam
    Answered on October 08, 2017 at 09:14 AM

    Please take note that the CSS codes we provide usually come for a specific purpose and layout. For this reason why the code that I had recommended will not work on a different widget, although they are closely the same.

    Here is a CSS code that should work for your configurable list widget (Note: I have added some styles that should allow the select and input fields, including the button to conform to the sizes of other fields in your form):

    table#list tbody:after { 
      content: "Text Here"; 
      margin-left: 10px; 
      font-size: 11px; 
    }

    input{
      line-height: 1.071em;
      font-size: 1em !important;
      border: solid 1px #ccc !important;
      height: 29px;
      border-radius: 0px !important;
      -webkit-border-radius: 0px !important;
    }

    select {
      line-height: 1.071em;
      font-size: 1em !important;
      border: solid 1px #ccc !important;
      height: 35px; 
      -webkit-border-radius: 0px;
      border-radius: 0px;
    }

    button {
      height: 35px;
      -webkit-border-radius: 0px !important;
    }

    Please let us know if you have questions or if you need assistance.

  • Profile Image
    Merowish
    Answered on October 10, 2017 at 07:41 AM

    Sir, I had added the CSS as per your guidance, And Now the Box Fields Height are similar to the theme matching, But the width issue is arise here, just like this I had edited what I want to have the "Width of the Box" fields according to the page, please help me how to Increase the width of the box. Here is what i'm saying. https://prnt.sc/gvl3m0

    please help me sir.

  • Profile Image
    liyam
    Answered on October 10, 2017 at 09:28 AM

    On the part of the CSS for input{...}, please add this text:

    width: 265px !important;

    So it will look like this:


    input{
      line-height: 1.071em;
      font-size: 1em !important;
      border: solid 1px #ccc !important;
      height: 28px;
      border-radius: 0px !important;
      -webkit-border-radius: 0px !important;
      width: 265px !important;
    }

    This should expand the width of the textbox.

    If you have additional questions or if you need assistance, please let us know.

  • Profile Image
    liyam
    Answered on October 10, 2017 at 09:28 AM

    On the part of the CSS for input{...}, please add this text:

    width: 265px !important;

    So it will look like this:


    input{
      line-height: 1.071em;
      font-size: 1em !important;
      border: solid 1px #ccc !important;
      height: 28px;
      border-radius: 0px !important;
      -webkit-border-radius: 0px !important;
      width: 265px !important;
    }

    This should expand the width of the textbox.

    If you have additional questions or if you need assistance, please let us know.

  • Profile Image
    liyam
    Answered on October 10, 2017 at 09:28 AM

    On the part of the CSS for input{...}, please add this text:

    width: 265px !important;

    So it will look like this:


    input{
      line-height: 1.071em;
      font-size: 1em !important;
      border: solid 1px #ccc !important;
      height: 28px;
      border-radius: 0px !important;
      -webkit-border-radius: 0px !important;
      width: 265px !important;
    }

    This should expand the width of the textbox.

    If you have additional questions or if you need assistance, please let us know.

  • Profile Image
    Merowish
    Answered on October 11, 2017 at 01:53 AM

    Thank you sir for this Guidance for me, Sir now everything is almost fine, here one last small issue i'm facing with " x Remove" button. As the Remove button shows in the same line of the Input fields so that it goes out of the page and this issue is facing on Mobile users just like this screenshot i had taken from my mobile. https://prnt.sc/gvwzh8 you can see that "x Remove" button is not showing on mobile device because it is in same line of Input fields. for this i want to modify little something like this one https://prnt.sc/gvx2s2 here you can see that i want that " x Remove" button on just below the Input fields so that in mobile device it could be seen and easy for user to use it.


    Please help me for this sir.

    waiting for your kind response & reply.

  • Profile Image
    liyam
    Answered on October 11, 2017 at 05:25 AM

    Been trying to find a way how to compress the height between the add button and the textbox while the add button is hidden but I could nof find a solution as of yet.

    Here is so far what I have come up with:

    15077136962017-10-11_1720.png

    With added fields:

    15077137572017-10-11_1722.png


    Here is the CSS code that you can add, for the resulting screenshot above:

    td.col3 {
        display: block;
        position: relative;
        left: -335px;
        top: 36px;
    }

    .buttonsColumn {
        margin-bottom: 37px;
    }


    If you have questions, please let us know.

  • Profile Image
    Jim_R
    Answered on October 11, 2017 at 07:44 AM

    Adjust the width of the input field on your Configurable List Widget so it would fit. Change the width value in px on the previous codes that were given to you by my colleague.

    FROM:

    input {

      line-height: 1.071em;

      font-size: 1em !important;

      border: solid 1px #ccc !important;

      height: 28px;

      border-radius: 0px !important;

      -webkit-border-radius: 0px !important;

      width: 265px !important;

    }

    TO:

    input {

      line-height: 1.071em;

      font-size: 1em !important;

      border: solid 1px #ccc !important;

      height: 28px;

      border-radius: 0px !important;

      -webkit-border-radius: 0px !important;

      width: 220px !important;

    }