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 display phone number and full name fields inline?

    Asked by Trinity3Tech 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 

    phone number full name inline display
  • Profile Image
    JotForm Support

    Answered by Kevin_G 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

    Answered by Trinity3Tech 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
    JotForm Support

    Answered by Mike_G 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

    Answered by Trinity3Tech 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
    JotForm Support

    Answered by Welvin on July 05, 2016 at 10:07 AM

    I have corrected the codes, please check again. 

  • Profile Image

    Answered by Trinity3Tech 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
    JotForm Support

    Answered by Welvin on July 05, 2016 at 10:34 AM

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