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

    My form fields just changed width to zero

    Asked by EpicStudio on January 16, 2015 at 04:59 PM

    Hi there, thanks for your help.

    I just visited my sie after a while and it seems that the fields changed width. Is there any kind of conflict I can avoid? Since it changed automatically.

     

    Thanks again..!

    Page URL:
    http://www.woox.com.mx

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Mike on January 16, 2015 at 06:28 PM

    Unfortunately, there is no way to find out how the fields were changed, but the issue seems to be specific to your form. There are custom styles on your form, you might consider changing them from:

    .form-textbox,
    .form-textarea {
    width:35%;
    }

    to

    .form-textbox,
    .form-textarea {
    width:100%;
    }

    and from

    .form-input,
    .form-input-wide {
    width:20%;
    }

    to

    .form-input,
    .form-input-wide {
    width:100%;
    }

    Result:

    Please give it a try and let us know if you need any further assistance.

  • Profile Image

    Answered by EpicStudio on January 16, 2015 at 06:59 PM

    Thanks. I did it. Much better. Problem solved.

    I'm still looking for a way to make it 2 lines when it becomes mobile-width narrow. Do you have any idea mhow could I make it?

    Thanks again.

  • Profile Image
    JotForm Support

    Answered by abajan on January 17, 2015 at 02:37 AM

    Try this:

    1. In the form's injected CSS, change the following rule:

    .form-line {
    padding:0;
    margin: 0 0 15px;
    }

    to

    .form-line {
    padding:0;
    margin: 10px 0 15px;
    }

    and change the following rules (the last ones in the injected CSS)

    #id_1, #id_3 {width:41%;}
    #id_2 {width:18%;}

    to

    #id_1, #id_3 {min-width: 300px;}


    2.
    Close the Preferences popup and then insert the Mobile Responsive widget:

    (Please see this guide)

    When I cloned your jotform and did the foregoing, I got this result. It it closer to what you wanted to achieve?

  • Profile Image
    JotForm Support

    Answered by abajan on January 17, 2015 at 02:42 AM

    Make sure the widget is placed after the submit button.