How to position all fields in one single row?

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

  • Profile Image
    EliezerN
    Answered 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
    EliezerN
    Answered 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
    pinoytech
    Answered 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
    wellstyled
    Answered 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
    wellstyled
    Answered 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
    pinoytech
    Answered 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.