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

  • Profile Image
    Asked 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?


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

  • Profile Image
    Answered 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

    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:


    or an alternative is to use the Infinite List widget


    test form:


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





  • Profile Image
    Answered 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 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: (Testing) form

    I have cloned the form to work on it and you can see the end result here:

    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 on June 24, 2015 at 05:44 PM

    Works great!