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

    Mis-aligned name and phone number fields

    Asked by metie on December 21, 2015 at 01:57 AM

    Hi. On our form (Elite Building Services (Mobile)), the form is working well with the exception of the alignment of the name and phone number fields in the cell phone format. For the name, the input fields are shifted down a bit, and for the phone number fields, the fields are shifted down and the entry field labels are off seemingly because of the dash between "Area Code" and "Phone Number" fields. 

     

    Thanks!

     

    name phone number number fields and
  • Profile Image
    JotForm Support

    Answered by Chriistian on December 21, 2015 at 02:27 AM

    Hi,

     

    I am currently checking your form and have confirmed that the name and phone number fields are misaligned. I will check this issue further and get back to you once I have some possible solutions for you.

    Regards. 

  • Profile Image
    JotForm Support

    Answered by Chriistian on December 21, 2015 at 02:46 AM

    Hi,

     

    Can you try to inject this custom CSS code in your form to fix the issue?

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

    input#input_5_area {

        width: 80%;

    }

    div#cid_3 {

        height: 50px;

    }

    div#cid_5 {

        height: 50px;

    }

    }

     

    To inject custom CSS code in your form, just follow the instructions provided in this article: How to Inject Custom CSS Codes.

     

    Do let us know if you need further assistance,
    Regards.

     

  • Profile Image

    Answered by metie on December 21, 2015 at 12:55 PM

    So this doesn't seem to work. There is already CSS code in the form, so I tried injecting the code you provided both before and after the existing code, but this doesn't resolve the problem.

  • Profile Image

    Answered by victor on December 21, 2015 at 02:24 PM

    I have cloned your form and added the CSS code provided by my colleague.

    https://form.jotform.com/53545889532973

    As you will notice. I placed the CSS code inside the CSS of the theme. You may clone the form if you like.

    If you have any additional question or issue, please do not hesitate contacting us. We will be glad to help.

  • Profile Image

    Answered by metie on January 16, 2016 at 04:49 PM

    Hi,

    I'm not sure if the CSS is still in the form, but it appears that the name and phone number fields are misaligned, but only on iPhones. Any help would be appreciated!

    Thanks!

  • Profile Image

    Answered by metie on January 16, 2016 at 04:50 PM
  • Profile Image

    Answered by victor on January 16, 2016 at 05:26 PM

    Could you please indicate if you are still having issues. I have just tested your form on my personal android phone and could not replicate the issue. Unfortunately, I do not have an iphone. But have tested on phone emulators. I was also not able to replicate the issue.

    Please let us know if you require our assistance.

  • Profile Image

    Answered by metie on January 17, 2016 at 12:06 AM

    Yes, we are still having the problem. We never did have a problem on Android. And we tested the app on both an iPhone and iPad in portrait mode and they both have the same problem with the misaligned fields. 

  • Profile Image
    JotForm Support

    Answered by BDAVID on January 17, 2016 at 01:47 PM

    If you are referring to your form Elite Maintenance Request (Mobile) - v2.0, that is looking good on mobile view:

    However if you are referring to your form Elite Maintenance Request (Mobile):

    That one is not display good, so please inject the following CSS code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

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

     #cid_3,#cid_5{

        height: 50px !important;

     }

    #sublabel_area{

        margin-top: -15px;

    }

    }

    Let us know if you need more help.

  • Profile Image

    Answered by metie on January 17, 2016 at 09:22 PM

    This still isn't working. We tried it on both an iPad and an iPhone and the fields are still misaligned. Below is a screen shot of the iPad. We're trying to resolve it with the form, Elite Maintenance Request (Mobile) - v2.0, the one you said is displaying correctly.

     

  • Profile Image

    Answered by metie on January 17, 2016 at 09:24 PM

    And the phone being used is an iPhone 6, 5, and 4, and the iPads are an iPad 1 and iPad 2 Air.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by Chriistian on January 17, 2016 at 11:09 PM

    Hi,

     

    I tested the form in an iPhone 6 and 5 emulator and it appears to be a bit misaligned.

    I was also able to recreate the issue in an iPad air 2 simulator.

    Allow me to investigate this issue further and I will get back to you once I have a possible solution.

     

    Regards.

  • Profile Image
    JotForm Support

    Answered by Chriistian on January 18, 2016 at 02:35 AM

    Hi,

     

    From the code that my colleague gave you, simply increase the amount of the height from 50px to 60px as seen in the highlighted area of the code below:

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

      #cid_3,#cid_5{

       height: 60px !important;

      }

      #sublabel_area{

        margin-top: -15px;

      }

    }

    Then to fix the display in iPad, inject the following css:

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

      #cid_3,#cid_5{

      height:100px!important;

      }

      #input_5_area{

      width: 98%!important;

      }

      #input_5_phone{

      width: 98%!important;

      }

    }

    Please make sure that you inject the css above the /* | *//*__INSPECT_SEPERATOR__*/ as it may be mistaken as a comment if added below and will thus not apply the changes.

     

    Do inform us if you need further assistance,
    Regards.

  • Profile Image

    Answered by metie on January 18, 2016 at 12:05 PM

    Hi Chriistian, there is a LOT of CSS code in the form and I'm having a problem locating the exact line(s) you're referencing. Could you assist in updating the CSS, please?

  • Profile Image

    Answered by victor on January 18, 2016 at 01:40 PM

    After reviewing your form, I did not see any off the CSS code provided by my colleagues. If you enter the DESIGNER, you will be able to inject the CSS code.

    In the CSS tab, you will see a text area. You can just copy and paste the code provided here.

    If you are still having issues, please let us know. We will be glad to insert the code for you.

  • Profile Image

    Answered by metie on January 18, 2016 at 03:48 PM

    It turns out that I was not in the designer when I tried to inject the CSS code. However....when I tried to copy and paste the code you provided above the INSPECT SEPARATOR, I have an error and I don't see the INSPECT SEPARATOR anymore.


    I thought for sure that I was careful about pasting the provided code in the correct place because I didn't want to screw up the CSS code, but apparently I dd something incorrectly...

  • Profile Image
    JotForm Support

    Answered by BDAVID on January 18, 2016 at 05:02 PM

    Could you please let us know what is the form in question? You can always revert your form by using the revision history: http://www.jotform.com/help/294-How-to-View-Form-Revision-History

    Once you revert it, you can include the provided CSS code at the Designer, or Preference as explain o this guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    You simply scroll down to the last line of code, do an "enter" and paste the provided code, example:

  • Profile Image

    Answered by metie on January 18, 2016 at 09:50 PM

    The form name is Elite Maintenance Request (Mobile) - v2.0. So here's what happened when I tried to inject the CSS code. I first followed the instructions to inject it in Developer mode.

    However, the changes don't do anything and when I come back to the CSS code, this is what is not at the bottom of the code:

    So when this doesn't work, I revert to the previous version and try your second recommendation to inject the CSS code in the builder. The process I use is below:

     

    I save this, however, when I come back to this code, it is gone.

     

    I think I've followed both your suggestions, but am still not having any luck. Please help!

  • Profile Image
    JotForm Support

    Answered by Chriistian on January 18, 2016 at 11:15 PM

    Hi,

     

    I previously made a clone of Elite Maintenance Request (Mobile) - v2.0 where I applied the css changes. If you are having trouble applying the css on your own form, you can instead clone this form where the css are already injected so you don't need to make any more changes.

    Here's the link to the cloned form: https://form.jotform.com/60170656297965 

    This guide can help you on how to clone a form: How to Clone an Existing Form from a URL

     

    Do inform us if you need further assistance,
    Regards.

  • Profile Image

    Answered by metie on January 19, 2016 at 12:04 AM

    Thank you for cloning the form! I appreciate it. This form is used in an app that has been published on Google Play and the App Store. Since the form ID is in the app, I would like to be able to use the cloned form so that I don't have to resubmit the app to Google Play or the App Store. Is there a way to change the form ID of this new form to the ID of the form that is currently in the app?

    For example, the form in the apps is https://form.jotform.com/53547773403964

    Is it possible to have the new form use this ID to avoid having to resubmit the app?

  • Profile Image
    JotForm Support

    Answered by Chriistian on January 19, 2016 at 01:59 AM

    Hi,

     

    What method did you use to embed the form to your app? If you used the source code to embed it, you will unfortunately have to re-embed the new form into your app.

     

    I will wait for your reply,
    Regards.

  • Profile Image

    Answered by metie on January 19, 2016 at 09:19 AM

    I didn't use source code to embed it. The form is called by the app by using the direct URL https://form.jotform.com/53547773403964.

  • Profile Image

    Answered by victor on January 19, 2016 at 11:51 AM

    Than you for the update. If your app is using the URL directly, the only option you have would be.

    1) adjust your app so the it is pointing to the correct form

    2) adjust your original form with the proper code so the form opens correctly in you app

    This would be the only option you have, since you are not embedding it in your app.

    If you require our assistance, please let us know.