What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How do you make each text box on a seperate row.

    Asked by brewha51 on June 23, 2015 at 11:53 PM

    How do you make each text box on a seperate row. I'd like to have a drop down box on the 1st row, a text field in the 2nd row, and a text area on the 3rd field?

    Thanks,



    This is a re-post of a comment on How to Set Up the Configurable List Widget

    text field multiple rows configurable list custom CSS widget CSS
  • Profile Image
    JotForm Support

    Answered by jonathan on June 24, 2015 at 03:43 AM

    You can do this on the form fields outside the Configurable List widget

    Check more on the how to on this user guide http://www.jotform.com/help/90-Form-Field-Positioning

    But if you were referring to the Configurable List box itself, configuring the widget to have Textbox on a single row will already allow you to have multiple row Textboxes using its Add button

    Example form: http://form.myjotform.com/form/41112368425549

     

    or an alternative is to use the Infinite List widget

    link: http://widgets.jotform.com/widget/infinite_list

    test form: http://form.jotformpro.com/form/51302775889971?

     

    Hope this help. Let us know if you need further assistance.

    Thanks.

     

     

     

  • Profile Image

    Answered by brewha51 on June 24, 2015 at 08:25 AM

    Thanks for the quick reply.  I probably didn't ask my question the right way.

     

    I'd like to have all the fields in one column.  Starting with a dropdown list and underneath that a text field and underneath that a text area followed by the "Save" button so that I can add all three again with the push of a button.

     

    Does that make sense?

  • Profile Image

    Answered by Ben on June 24, 2015 at 10:08 AM

    I believe that I understand what you mean.

    You like it to be in the same group that is repeated over and over as many times as it is needed.

    For that, the best widget would be Configurable List and to have it shown one under another you would need a bit of a custom CSS.

    I believe that this is the form that you would like to change:

    http://www.jotform.us/form/51727718655162 (Testing) form

    I have cloned the form to work on it and you can see the end result here: http://form.jotformpro.com/form/51743575400957

    I would however first like to mention that you should be aware of our terms of use when it comes to payments and that you can not collect credit card info directly (you are not doing so at this time, but I am mentioning this because of the Payment Details field).

    Now back to the question of setting them into 3 different rows whilst in the same row.

    This is the complete CSS code that I used to achieve that:

    input[type=text] {
      width: 200px;
    }
    td.col2, td.col3 {
        display: block;
        position: relative;
    }
    th {
        display: none;
    }
    .col2 {
        left: -107px;
        top: 40px;
    }
    .col3 {
        left: -107px;
        margin-bottom: 70px;
        top: 43px;
    }
    .col1:before, .col2:before, .col3:before {
        font-weight: bold;
        display: block;
    }
    .col1:before {
        content:"Drop down";
    }
    .col2:before {
        content:"Text Box";
    }
    .col3:before {
        content:"Text Area";
    }

    Do let us know if that works for you and if that is what you wanted to see.

    Also, to mention, to add the CSS code to your widget you should click on the widget and then click on  the wizard icon:

    Once you do you will access its wizard and you will be able to see the Custom CSS field

    Paste the code in it and click on Finish Button and save your form. That is it :)

  • Profile Image

    Answered by brewha51 on June 24, 2015 at 05:44 PM

    Works great!

     

    Thanks!