Form Builder: Aligning fields into 2 columns

  • Profile Image
    neoranking
    Asked on October 10, 2016 at 07:31 AM

    How can I achieve this 2 column form?

    http://neo360.digital/contact-us/

     

    My form is located here: https://form.jotform.me/62832709096463

  • Profile Image
    John_Benson
    Answered on October 10, 2016 at 08:19 AM

    You can do that by shrinking the fields. You just need to right click the field and then select the Shrink option. Here's a screen animation guide:

    Keep in mind that you need to move to a new line the Company text box field. 

    Please do check this guide: https://www.jotform.com/help/90-Form-field-positioning

    Visit our theme store, we have a lot of free templates. Here's a sample: https://www.jotform.com/theme-store/theme/smarty

    Hope that helps.

  • Profile Image
    neoranking
    Answered on October 10, 2016 at 09:38 AM

    I tried shrinking it but this is what happens.

    The textbox are not stretch and also captcha and submit button.
    http://staging.neo360.digital/contact-us/

  • Profile Image
    Chriistian
    Answered on October 10, 2016 at 09:55 AM

    Hi,

    Can you inject the following CSS to your form?

    .form-line.form-line-column {

    width: 50%;

    }

     

    #id_2 {

    width: 20% !important;

    }

     

    #id_8 {

    width: 80% !important;

    }

     

    #input_2 {

    float: right;

    }

     

    The result should be as follows.

     

    Do let us know if you need further assistance.

  • Profile Image
    neoranking
    Answered on October 10, 2016 at 10:13 AM

    Thanks Chriistian! ;)

  • Profile Image
    neoranking
    Answered on October 10, 2016 at 10:03 PM

    Hi Chriistian, 

    The form is not looking good in mobile.

    http://staging.neo360.digital/contact-us/

     

     

    Can the fields display horizontally in each line in mobile version?

  • Profile Image
    Chriistian
    Answered on October 10, 2016 at 11:27 PM

    Please inject the custom CSS code below to have the fields display horizontally in mobile.

    @media only screen and (max-width: 580px){

    .form-line.form-line-column {

        width: 100%;

        margin: 0px;

    }

    #input_7, #id_8, #id_2 {

        width: 100%!important;

    }

    }

    Here's how it should look after:

    Regards.

  • Profile Image
    neoranking
    Answered on October 11, 2016 at 12:11 AM

    Thanks! ;)