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

    Adjustments to Form Fields to Style Column and Width

    Asked by kauseway on August 26, 2015 at 08:58 PM

    I can get the form to do what I am wanting.


    1) I want all the fields to go to a single column in iphone view.

    2) I want the field widths to be wider initially.  There is a big gap between the the fields when they are in 2 column.  So the spaciing between fields on the same row.



    Page URL:

  • Profile Image

    Answered by KadeJM on August 27, 2015 at 06:59 AM

    To my understanding you are attempting to restyle your form so that it displays in a single column on mobile and with the field widths initially wider.

    Are you just using the form link or are you going to embed it?

    I would first start by recommending that you have Mobile Responsive enabled since this will make it responsive with wide fields in a single column in the requested manner on your mobile device.

    As for your width adjustments I noticed on desktop you have the big gap. Is that what you wanted to remove? Or? Please confirm or correct me so that we can assist you better with this.

  • Profile Image

    Answered by kauseway on August 27, 2015 at 07:06 AM


    1) I want it to be responsive. The submit button goes to 100% width in mobile. I want the other fields to do that also and for them to be a single column.


    2) In desktop I want them to be in 2 columns.

    3)  I dont want that gap you showed. I was trying to get the column widths to be wider for both columns but cant get it.?  Also the number fields are responding differently then the text field so it makes it hard for me to format.


    4)  I am wanting to do something similar to this page:  http://demo.themestreet.net/launch27/index4.html


    5) I am not sure which "responsive form" checkbox to use. There is one under preferences and another under the designer tab.




    So not sure what form I need to embed. I want it to embed it on a webpage. Thanks!


    Also, your reply form flows over your submit button so I could not submit this in one piece. Had to edit.  FYI



  • Profile Image
    JotForm Support

    Answered by Charlie on August 27, 2015 at 12:07 PM


    I cloned your form for testing and demo purposes, is this perhaps the styling that you would like to do: http://form.jotformpro.com/form/52384815259968?. You can try viewing it on a mobile browser.

    I first changed all of your fields into plain text boxes (not number fields). After that, I positioned them. I then enabled the mobile responsiveness on both Preferences and in the Form Designer tool.

    I then used this custom CSS code to tell the browser that the styling that will be used is this one for desktop viewing:

    @media screen and (min-width: 750px){

        .form-textbox {

            width : 100% !important;


        .form-col-1, .form-col-3 {

            padding-left : 20% !important;



    The custom CSS code is placed under the CSS tab in the Form Designer Tool.

    You can clone my cloned form to check it our, or use that instead if you want.

    Let us know if that works for you.