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

    Area Code Phone Number overlapping

    Asked by cwmn on August 03, 2015 at 05:59 PM

    Is there any way to keep the text from overlapping on the area code/Phone number on the form below?

    Page URL:
    http://www.jotformpro.com/form/51903981741964

    phone number overlapping keep custom CSS
  • Profile Image
    JotForm Support

    Answered by abajan on August 03, 2015 at 09:25 PM

    Sorry but I'm not sure I understand the question. What exactly is overlapping? Please elaborate or provide a screenshot, as explained below:

    1. Go to: https://www.jotform.com/help/image_upload.php?naked=true

    2. Click "Choose File" button and choose your image file (should be in JPG or PNG format and not more than 500KB)

    3. Click "Send Image" to upload (you should be able to see the file successfully uploaded in the image section)

    4. Select and Copy the direct file URL from the "Image URL" box

    5. In our forum editor, click the "Insert/Edit Image" button:

    6. Paste link in the "Image URL" box:

    **You should be able to adjust the image dimensions, we advise to set 550 in the first box to fit the image in the forum view.**

    You're done!

    The preceding instructions were copied from this thread


    Below is my own screenshot of your form with its phone number field highlighted:

    From what I can tell, the only thing overlapping are the words Phone Number but you would want that to overlap because the phone number is in fact comprised of an area code and number.

    It's possible that the overlapping to which you refer is browser related. In which browser are you noticing the problem?

    We look forward to your response.

    Thanks

  • Profile Image

    Answered by cwmn on August 04, 2015 at 10:25 AM
    Safari, see attached.
    Thanks,
    Chuck
    ...
  • Profile Image

    Answered by Ben on August 04, 2015 at 12:25 PM

    Unfortunately Chuck, the only way to upload a screenshot is as mentioned by my colleague above so as you have sent it over the email it is not being shown to us.

    I am however able to see just slight overlapping of each in my browser, so this CSS resolves it:

    .form-line[data-type="control_phone"] span.form-sub-label-container:last-child label.form-sub-label {
        margin-left: 8px;
    }

    Now, this only moves the "Phone Number" text, so the box above it slightly to the left of the text - and since I like to keep things aligned, I would suggest using the following code instead (which moves the box above and the sub label together:

    .form-line[data-type="control_phone"] {
        width: 244px;
    }
    .form-line[data-type="control_phone"] span.form-sub-label-container {
        margin-right: 10px;
        width: 50px;
    }
    .form-line[data-type="control_phone"] span.form-sub-label-container:last-child {
        margin-left: 10px;
        width: 90px;
    }

    To add any one of the two CSS codes to your jotform, please follow the steps shown here: Inject Custom CSS Codes

    and do remember to add the CSS at the bottom of all the other code.

    Do let us know how it goes.

  • Profile Image

    Answered by cwmn on August 04, 2015 at 01:45 PM
    I did upload it this morning as well
    ...
  • Profile Image

    Answered by Ben on August 04, 2015 at 02:20 PM

    Unfortunately we do not see the screenshots on this thread: https://www.jotform.com/answers/627272

    Nevertheless, can you please tell us if the codes above worked as you wanted?