Classic Forms: How to have fields in the same line?

  • Profile Image
    capt742000
    Asked on March 13, 2018 at 12:56 PM
    Now , If I may, How can I put the first 3 fields on the same line? (Mr,
    First Name, Last name to appear under the title "Full Name")
    and how to put phone number and email on same line (I will use sub-titles
    in place of "Phone Number" etc.
    I need to shorten the form so it will print on 1 page.
    https://form.jotform.com/80317296256157
    Thanks again,
  • Profile Image
    Richie_P
    Answered on March 13, 2018 at 01:00 PM

    You can set the alignment of both fields to right.

    Here is a sample screenshot.

    Let us know how it goes.

  • Profile Image
    capt742000
    Answered on March 13, 2018 at 04:43 PM
    It's not working. I need the Phone number and email fields on the same line.
    Mike
    ...
  • Profile Image
    Richie_P
    Answered on March 13, 2018 at 05:11 PM

    To clarify, you want your phone and email to be aligned to each other horizontally or vertically?

    If you want your phone and email to align horizontally, you can use this css code.

    #id_4{
    position: absolute;
        margin-left: -40px;
     
    }

    Here is a sample screenshot.

    But if you want your fields to look like this, you can use these custom css codes.


    #id_6{
      margin-top: -50px;
    }
    #id_4{
    position: absolute;
        margin-left: -40px;
            margin-top: -50px;
     
    }
    #sublabel_first {
        margin-bottom: 10px;
        margin-left: 110px;
        margin-top: -15px;
    }
    #first_3 {
        width: 160px !important;
        position: absolute;
        margin-top: -44px;
        margin-left: 70px;
    }
    #last_3 {
        width: 200px !important;
        position: absolute;
        margin-top: -64px;
        margin-left: 260px;
    }
    #sublabel_last{
      margin-top: -34px;
        min-height: 13px;
        margin-left: 320px;
    }

    Let us know how it goes.

  • Profile Image
    capt742000
    Answered on March 13, 2018 at 06:43 PM
    Still needs some adjustment.
    When I add your code example starting with #id_6{ ...thru the end of your
    code margin-left: 320px;
    }
    I get the following:
    Last name is off form and email and phone nuber are overlaying each other.
    Mike
    ...
  • Profile Image
    Kevin_G
    Answered on March 13, 2018 at 10:03 PM

    Please note that it's not possible to have the elements "Full name" label as well as the three fields inline due to the form's width, you must increase the form's width in order to have the 4 elements inline. 

    https://www.jotform.com/help/35-The-Importance-of-Form-Widths 

    Now, if it's OK for you to change the label position then you may do the following: 

    1. Change the label position for the full name field: 

    1520992861screenshot_02.png

    2. Turn on the shrink option on the email field: 

    1520992896screenshot_03.png

    3. You may then remove the code my colleague provided and inject the following: 

    #id_3 span.form-sub-label-container {

        width: auto !important;

        display: inline-block;

    }


    input#input_4 {

        width: auto !important;

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    The result can be seen on this cloned form of yours: https://form.jotform.com/80718777416972 

    I hope this helps. 

  • Profile Image
    capt742000
    Answered on March 14, 2018 at 10:43 AM
    Still no luck. I increased the width of the form and I deleted both phone
    number and email fields and
    added them back again. That put both fields on the same line. I added code
    to increase size so that I
    could type into them . The email field increased but I seem to have no
    effect on the Phone number field.
    The phone number field is too small to accept (###) ###-####
    Here is the phone and email CSS code:
    #input_24 {
    width : 200px !important;
    }
    #input_25_Full {
    width : 200px !important;
    }
    here is my link
    https://form.jotform.com/80717198056160
    Thank you for your help,
    Mike Enriquez
    ...
  • Profile Image
    Richie_P
    Answered on March 14, 2018 at 11:35 AM

    You can try to use this css code to increase the width of your Phone number field.

    #input_25_full{
      width:160px!important;
    }

    Let us know how it goes.

  • Profile Image
    capt742000
    Answered on March 14, 2018 at 01:43 PM
    I'm getting close now, but look what happens when I am designing:
    Picture 1 = view on Build screen. Looks Great.
    Picture 2 = view when published. Line goes off page.
    I have noticed at other times that the build screen does not always show
    the
    same when published. This makes it very hard to design a form.
    Mike
    ...
  • Profile Image
    Richie_P
    Answered on March 14, 2018 at 02:03 PM

    Your images did not go through, you can check this guide on how to insert screenshots in the thread.

    -How-to-add-screenshots-images-to-questions-to-the-support-forum

    Yes, sometimes the build screen doesn't sync correctly to your published form. Kindly,refresh your browser's cache if that happens.

    We recommend to follow always the published form when creating/editing your forms.