Alignment of form fields

  • SeaPyp
    Asked on November 7, 2014 at 4:00 AM

    Hi

    http://www.jotform.com//?formID=43085941152150

     

    I have two issues on my form:

    1)  The radio buttons at the top should be centered (I toggled that in the properties menu) and its not.

    2)  As you progress down the form, my fields become narrower.  I want to have the bottom 6 fields in two columns of 3 next to one another.  No matter how big I make the fields however, they still stay the same size.  I also want to put more space between "Desired Aircraft" and "Notes".  Pretty much the same issue as above.

     

    I have set my form wider than normal (850px) but that is because I want the airport pickers next to one another.  

     

    Can anyone help me please?

     

    Sean

  • Ashwin JotForm Support
    Replied on November 7, 2014 at 6:27 AM

    Hello Sean,

    Please take a look at the following cloned form and see if this is what you wanted to achieve:  http://form.jotformpro.com/form/43102838776965? 

    Feel free to clone this form for a closer look. The following guide should help you in form cloning: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Hope this helps.

    Do get back to us if you want some other changes as well.

    Thank you!

  • Ben
    Replied on November 7, 2014 at 5:08 PM

    Hi,

    I presume that you would like to do something like this?

    http://form.jotformpro.com/form/43106661814956

    If you do, you can clone it to your account: How to Clone an Existing Form from a URL

    or inject this CSS to your jotform:


    li.form-line.form-line-column[data-type="control_textbox"] {
        max-width: 400px;
        width: 400px;
    }

    li.form-line.form-line-column[data-type="control_textbox"] > .form-input-wide, li.form-line.form-line-column[data-type="control_textbox"] > .form-input-wide > input {
        max-width: 100%;
        width: 100%;
    }

    You can do that following this guide: How to inject Custom CSS Codes.

    You will also need to shrink the fields and make every third fall in a new line.

    Alignment of form fields Image 1 Screenshot 20

    Do let us know if you have any further questions.

    Best Regards,
    Ben

  • Kiran Support Team Lead
    Replied on November 7, 2014 at 6:26 PM

    Please check the following JotForm to see the changes as you need with.

    http://www.jotformpro.com/form/43106739469968 

    Alignment of form fields Image 1 Screenshot 30

    This width can be changed from the form designer to adjust as per your requirement.

    Alignment of form fields Image 2 Screenshot 41

    You may clone this form to your account to make any additional changes. Let us know if you have any questions in this regard. We will be happy to help.

    Thank you!!

  • Kiran Support Team Lead
    Replied on November 7, 2014 at 7:35 PM

    We are glad that the solution provided by us worked for you. It's our pleasure to assist you.

    Please get back to us if you have any other questions. We will be happy to help you.

    Thank you for using JotForm.