How to display phone number and full name fields inline?

  • Profile Image
    Trinity3Tech
    Asked on July 01, 2016 at 12:22 PM

    Last thing: I don't know how to fix it but on my main form "Grossmont Union High School District" where you can enter "First & Last Name" and "Area Code & Phone", Why are they on top of each other?

    I want them side-by-side.  

    Student Name:    First Name: [ box]    Last Name: [ box ]

    Billing Phone Number:   Area Code: [ box]    Phone Number: [ box ]

    Could you please tell me how to fix that? 

    Thanks,

    Al 

  • Profile Image
    Kevin_G
    Answered on July 01, 2016 at 12:47 PM

    Please try injecting this CSS code to your form: 

    [data-type="control_fullname"] span, [data-type="control_phone"] span{

     display: inline-block;

    }

     

    [data-type="control_fullname"] div, [data-type="control_phone"] div {

        max-width: 100%;

        width: 50%;

    }

     

    [data-type="control_fullname"] .form-sub-label-container, [data-type="control_phone"] .form-sub-label-container {

        width: 45%;

    }

     

    input#input_16_area {

        width: 78%;

    }

    This guide will help you to inject the code: How-to-Inject-Custom-CSS-Codes

    Here is my cloned form where I did apply this: https://form.jotform.com/61824570371960 

    Please do let us know if you have questions, we will be glad to help. 

  • Profile Image
    Trinity3Tech
    Answered on July 01, 2016 at 01:01 PM

    Ok, that worked but...

    Can I make the boxes any wider? They are super small now.

    Thanks,

    Al

     

  • Profile Image
    Mike_G
    Answered on July 01, 2016 at 03:10 PM

    I have checked the form you're working on and here's what I see when I viewed it.

    However, if you want to make the fields wider, you can also add the Custom CSS codes below to your form.

    .form-input {

        max-width: 186px !important;

    }

    input#input_16_phone {

        width: 109px;

    }

  • Profile Image
    Trinity3Tech
    Answered on July 05, 2016 at 09:41 AM

    I was looking at the fields in the area where you can build it (See attached photo). Once I previewed it, then it looked like the image you showed me.

    Thanks.

  • Profile Image
    Welvin
    Answered on July 05, 2016 at 10:07 AM

    I have corrected the codes, please check again. 

  • Profile Image
    Trinity3Tech
    Answered on July 05, 2016 at 10:19 AM

    I failed to mention that I also added the Custom CSS you sent me and everything looks fine now.

    Al

     

  • Profile Image
    Welvin
    Answered on July 05, 2016 at 10:34 AM

    That's great to know. Please contact us again if we can help in any way.