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 to position all fields in one single row?

    Asked by wellstyled on December 05, 2013 at 09:06 AM

    Hello, JotForm.

    I was wondering if there was a way (or an already created form) to have the following text entries on one row:

     

    Here's What I would like for it to look like on my website:

    First Name [TEXT BOX]  Last Name [TEXT BOX] EMAIL ADDRESS [TEXT BOX] SUBMIT BUTTON.

    ------------

    I do not want a form that looks like this:

    First Name [TEXT BOX]  Last Name [TEXT BOX]

    EMAIL ADDRESS [TEXT BOX]

    SUBMIT BUTTON.

     

    Greatly Appreciate Your Help!

    Michelle

    single row JotForm email name first name
  • Profile Image

    Answered by EliezerN on December 05, 2013 at 10:09 AM

    Thanks for contacting us.

    Please take a look at this form if this is what you are looking for: http://form.jotform.co/form/33384116842858

    If so, you can clone it and use it for your needs. Here's how you can clone a form: How to clone an existing form from a URL What I did is simple,I increased the width of the form and used our Shrink feature: 

    Please let us know if you need further assistance.

    Thanks

  • Profile Image

    Answered by EliezerN on December 05, 2013 at 10:16 AM

    In addition, this guide could help you to learn a bout field positioning: Form field positioning

    I hope it helps.

    Thanks

  • Profile Image

    Answered by pinoytech on December 05, 2013 at 10:20 AM

    Please consider on checking this form also that I've created. 

    http://www.jotform.co/form/33384119425858

    If you like what I did, feel free to clone and use it.

    Please feel free to contact us at anytime if you need further assistance.

  • Profile Image

    Answered by wellstyled on December 05, 2013 at 11:21 AM
    JotForm / Human at JotForm, YOU ARE AWESOME! This is exactly what I was
    looking for. Thank you so much!!!
  • Profile Image

    Answered by wellstyled on December 05, 2013 at 11:26 AM
    Two more things:
    1. How can I decrease padding between text boxes?
    2. Is there a way I can place the button on the same row so that it shows
    after Email text box?
    Thanks!
  • Profile Image

    Answered by pinoytech on December 05, 2013 at 12:40 PM

    Hi,

    1. How can I decrease padding between text boxes?

       - You need some custom css in order to achieve that in your form.

    CSS Code:

    .form-line.form-line-column {

    padding-left: 0px !important;

    padding-right: 0px !important;

    padding-top: 0px !important;

    padding-bottom: 0px !important;

    }

    2. Is there a way I can place the button on the same row so that it shows after Email text box?

       - Yes, that is possible. Just simply shrink your submit button. Please take a look at this form that I've created: http://www.jotform.co/form/33384119425858

    Here are the codes (custom css) that I've use/injected into this form.

    .form-all {

    width: 880px !important;

    }

    #label_3.form-label-left {

    width: 72px !important;

    }

    #label_4.form-label-left {

    width: 72px !important;

    }

    #label_5.form-label-left {

    width: 98px !important;

    }

    .form-line.form-line-column {

    padding-left: 0px !important;

    padding-right: 0px !important;

    }

    #id_6.form-line.form-line-column {

    padding-left: 5px !important;

    }

    Guide on how to inject custom css: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Feel free to contact us again if you need further assistance at anytime.