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

    Aligning the email field label

    Asked by MauryMcCoy on July 15, 2016 at 01:52 PM

    So I want do add an e-mail field.   I drag and drop it and it looks like this. (Auto)

    E-mail

     [_______________]

    I don't want it on top, I want it to be to the left of the text field.  

    If I select the label to be left justified, it looks ridiculous.  There's a huge space.

     

    E-mail                         [_______________]

     

    If I choose right justified, it looks good on PC, but on mobile it right justifies it above the text field.

                                                           E-mail

     [__________________________________]

     

    How do I get it to look like this (center justified, like everything else)

     

                                  E-mail  [____________________]

    Thanks,

     

     

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

    aligning email field field label
  • Profile Image
    JotForm Support

    Answered by John_Benson on July 15, 2016 at 03:12 PM

    Thank you for providing a detailed information about the problem. Please try the following steps:

    1. In the Form Builder, click the Designer button.

    2. In the Form Designer, go to Design tab. Click the Form Layout drop down, change the Input Width to 200.

    3. Click the Label Styles drop down menu, select the Right Aligned from the Label Align option. Also, change the Label Width to 200.

    4. Save the changes and check the form. Here's the result:

    Hope that helps. Thank you!

  • Profile Image

    Answered by MauryMcCoy on July 15, 2016 at 04:45 PM
    I followed the instructions and the email label is right next to the text
    field as it should be on my computer.
    HOWEVER,
    When you go to this link on a mobile device, it shoots the e-mail label
    above the email text box on the far right. It looks silly.
    E-mail
    [______________________]
    Any ideas on how to make it look good on PC and mobile devices?
    Thanks,
    Maury
    Maury McCoy
    President - McCoy Associates
    *(512) 775-0944*
    www.McCoy-Associates.com
    Registered Investment Advisor Representative
    Morgan Dempsey Capital Management, LLC.
    ...
  • Profile Image
    JotForm Support

    Answered by Mike on July 15, 2016 at 09:03 PM

    You can add the next CSS via form designer to have a similar email field layout on the mobile devices.

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {
    .form-label {
    width: 75px !important;
    max-width: 75px !important;
    }
    .form-textbox, .form-input {
    width: 175px !important;
    max-width: 175px !important;
    }
    }

    Thank you.