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

    Two phone number field in my form displays differently.

    Asked by MaggieJedlicka on June 15, 2016 at 11:16 AM

    Hi Jotform,

    This should be easy for you guys.  Attached is screen shot and my form.  I have 2 phone number entries.  I want them to look the same - LIKE THE FIRST FORMAT where the zip code and phone number appear on the SAME LINE.

    CSS? or is it just something in the Designer to setup.  From the designer, both text boxes have the same entries.

    Thanks,
    Maggie Jedlicka

    Page URL:
    https://form.jotform.com/61663963380159

    Screenshot
  • Profile Image
    JotForm Support

    Answered by ashwin_d on June 15, 2016 at 12:51 PM

    Hello Maggie,

    I have fixed this in your form. Please check your form and see if both the phone number field is being displayed correctly. Please check the screenshot below:

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by MaggieJedlicka on June 15, 2016 at 04:50 PM

    Great! Thanks!  But is this something I could have fixed myself!

    Jotform Rocks!

    Maggie Jedlicka

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 15, 2016 at 07:29 PM

    It is our pleasure to help Maggie.

    I can see that your full name field is also not aligned on the same line so I have fixed it for you.

    I have also made a small change on the phone field so it displays properly on different browsers and on mobile.

    Let us know should you need anything else. Regards!

  • Profile Image

    Answered by MaggieJedlicka on June 16, 2016 at 12:01 AM

    Could you please look at my form again?  I added in a Print button at the bottom, added in a line of text at the beginning, and now both area code and phone number portions of the entire phone number span 2 lines.  

    Thanks,

    Maggie Jedlicka

  • Profile Image
    JotForm Support

    Answered by Kevin_G on June 16, 2016 at 12:33 AM

    I checked the form in question, the link you originally provided in your post and fields are displaying properly, it seems like you're referring to a different form, I found the form with ID 61565634774162 where fields are not displaying inline, I applied the code that Elton applied in your first form and it worked, fields are displaying inline. 

    I will provide you the code here as well, so if you have the same issue you may inject this code to your form: 

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

        margin-right: 0  !important;

    }

    input[name$="[area]"] {

        width: 72% !important;

    }

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

        width: 65.8% !important;

    }

    [data-type="control_fullname"] .form-input{

        max-width:424px;

    }

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

        width: auto;

    margin-right: 5px !important;

    }

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

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

            width: 65.8% !important;

        }

        input[name$="[area]"] {

            width: 100% !important;

        }

        span.phone-separate {

            display: none;

        }

     

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

     

  • Profile Image

    Answered by MaggieJedlicka on June 16, 2016 at 09:06 AM

    Thank You for the CSS.  No we're still talking about the same form... it's about an application for a Free Spay/Neuter.  My issue is that when I bring up the form to edit it, it looks appropriate, but when I PREVIEW in full screen, they are stacked.  Also, loaded the form into my website, and it is stacked.

    Before I apply/check the CSS, could you pls PREVIEW this form and if you see what I'm seeing?

  • Profile Image
    JotForm Support

    Answered by BDAVID on June 16, 2016 at 11:01 AM

    I have looked your form in edit and live mode, and both look the same:

    Let us know if you still need help.

  • Profile Image

    Answered by MaggieJedlicka on June 16, 2016 at 11:09 AM

    Whoa!  Okay..look at this when I PREVIEW.  What am I doing wrong??? Thanks for helping me...

     

  • Profile Image
    JotForm Support

    Answered by BDAVID on June 16, 2016 at 11:24 AM

    What browser are you using? Please try clearing browsers cache, because it is showing correctly:

  • Profile Image

    Answered by MaggieJedlicka on June 16, 2016 at 01:53 PM

    With all due respect, there was a slight issue with your CSS.  You needed to add in this:

    [data-type="control_phone"] .form-input {

        max-width : 300px;

    }

    I cleared my cache, same problem.  I stripped down the form to only the 2 phone numbers.  No problems, both in DESIGNER and in PREVIEW everything showing up properly.  The problem was that I have TWO types of fields (control_fullname) and (control_phone) which were aligned on the same line. Similar CSS code was applied for control_fullname, but it was incomplete when I added in control_phone.  I know there is precedence with CSS and I think that was confusing the display between Designer and PREVIEW in other words, the order in which was loaded, why I saw it and you did not.  

    Anyway, because of your good examples I was able to figure out the issue and add in the line above, now all is displayed properly, in Designer, in Preview, in Full Preview and on my website.

    Thanks for the CSS,

    Maggie Jedlicka

     

     

  • Profile Image
    JotForm Support

    Answered by Nik_C on June 16, 2016 at 03:47 PM

    On behalf of my colleagues you're welcome. 

    Thank you for the heads up about the CSS code you used for your solution!

    We appreciate the explanation you provided, it will be valuable to other users as well.

    Thank you!