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

    Form is not centered on iPhone in Portrait Mode

    Asked by rickeb on November 17, 2013 at 04:11 PM

    I have a responsive website and my JotForm does not centered on an iPhone in the Portrait Mode, although it does center in the Landscape Mode. All other site pages center properly in both modes so I'm thinking it's a JotForm issue. Any Ideas?

     

    https://regalservice.com/careers/driver-application/

    https://regalservice.com/careers/general-application/

    Page URL:
    https://regalservice.com/careers/driver-application/

    Screenshot
    JotForm site landscape
  • Profile Image
    JotForm Support

    Answered by EltonCris on November 17, 2013 at 06:28 PM

    Hi,

    Inject the following CSS codes to your form, this might help.

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

    .form-all{

    width:300px !important;

    }

    .jotform-form{

    margin-right:10px !important;

    }

    }

    I tried this with your form and this is how it looks like after.

    If we can help you with anything else related to this, let us know here. Thanks!

  • Profile Image

    Answered by rickeb on November 18, 2013 at 09:06 AM

    You're example looks perfect! Do I add the CSS code to the JotForm form itself? If so, how?

    Or do I add the css code to my website template?

    Thanks for solving my problem so quickly,

    Rick

  • Profile Image
    JotForm Support

    Answered by guilledutra on November 18, 2013 at 10:34 AM

    Hi,

    the code provided by  EltonCris should be injected to the form itself, check the following guide in order to inject the custom css code to your form:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Hope it helps

    please let us know if you need further assistance

    Thanks

  • Profile Image

    Answered by rickeb on November 18, 2013 at 02:27 PM

    There are 2 pages I'm working with:

    https://regalservice.com/careers/driver-application/

    https://regalservice.com/careers/general-application/

    I already have CSS code injected in each form to make them Responsive in a Desktop browser:

    @media only screen

    and (min-width : 321px) {

    .form-all {

    width: 100%;

    }

    }

    When I add the code provided by  EltonCris it makes the Portrait mode on the iPhone look great but makes the Landscape mode too narrow. Is there a combination of the two codes that would make the form responsive in my Desktop browser as well as solving the Portrait Mode problem on an iPhone?

    Thnaks in advance,

    Rick


  • Profile Image
    JotForm Support

    Answered by EltonCris on November 18, 2013 at 03:30 PM

    Hi Rick,

    Try it with the following. This works only on iPhone's portrait mode.

    /*---iPhone 2G-4S in portrait---*/

    @media only screen and (min-device-width : 320px) 

    and (max-device-width : 480px) 

    and (orientation : portrait) { 

    .form-all{

    width:300px !important;

    }

    .jotform-form{

    margin-right:10px !important;

    }

    }

    /*---iPhone 5 in portrait---*/

    @media only screen 

    and (min-device-width : 320px) 

    and (max-device-width : 568px) 

    and (orientation : portrait) { 

    .form-all{

    width:300px !important;

    }

    .jotform-form{

    margin-right:10px !important;

    }

    Let us know if the problem still persists so we can assist you further. Thanks!

  • Profile Image

    Answered by rickeb on November 18, 2013 at 04:29 PM

    I'm using an iPhone 5S. I currently have the CSS code:

    @media only screen

    and (min-width : 321px) {

    .form-all {

    width: 80%;

    }

    }

    This makes the form responsive in my Desktop browser, the last code you gave me left the Desktop browser unresponsive, it also did not center the page in Portrait Mode, your very first try did although it left my Desktop unresponsive. I think we're very close, I just don't enough about code to fix it.

    Thanks for your efforts,

    Rick

  • Profile Image
    JotForm Support

    Answered by Mike_T on November 18, 2013 at 05:24 PM

    It is actually possible to use the desktop part without @media rule, so you can combine the css code, and it will be:

    /*---Desktop responsive---*/  

    .form-all {

    width: 80%;

    }

    /*---iPhone 2G-4S in portrait---*/

    @media only screen and (min-device-width : 320px)

    and (max-device-width : 480px)

    and (orientation : portrait) {

    .form-all{

    width:300px !important;

    }

    .jotform-form{

    margin-right:10px !important;

    }

    }

    /*---iPhone 5 in portrait---*/

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 568px)

    and (orientation : portrait) {

    .form-all{

    width:300px !important;

    }

    .jotform-form{

    margin-right:10px !important;

    }

    }

    Please give it a try and let us know if you need any further assistance.

  • Profile Image

    Answered by rickeb on November 18, 2013 at 08:09 PM

    I used the code:

    /*---Desktop responsive---*/  

    .form-all {

    width: 80%;

    }

    /*---iPhone 5 in portrait---*/

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 568px)

    and (orientation : portrait) {

    .form-all{

    width:300px !important;

    }

    .jotform-form{

    margin-right:10px !important;

    }

    }

    on this page:

    https://regalservice.com/careers/driver-application/

    The form is not responsive in the Desktop browser and it is not centered on the iPhone 5S in Portrait mode. What went wrong?

    Rick

  • Profile Image

    Answered by Cesar on November 18, 2013 at 10:24 PM

    I have made a few tweaks to the code on the form. Kindly test and let us know if the form continues unresponsive. I have removed unnecessary characters frrom the code as well as made spaced out two words that were together:

    https://cms.jotform.com/uploads/image_upload/image_upload/global/21157_cleancode.png

     

    Do let us know if the issue persists. Thank you.

  • Profile Image

    Answered by rickeb on November 19, 2013 at 08:21 AM

    It's almost there. The desktop is responsive, the iPhone 5 in portrait mode is centered. The only remaining problem is that the iPhone landscape mode is compressed, it's the same width as portrait mode. It's centered, but not responsive.

    Thanks in advance,

    Rick

  • Profile Image
    JotForm Support

    Answered by Welvin on November 19, 2013 at 11:32 AM

    Hi Rick,

    I have added a custom CSS codes for the Mobile Landscape settings. Can you please check? Please update us with screenshots of the remaining issue.

     

    Thanks

  • Profile Image

    Answered by rickeb on November 19, 2013 at 12:29 PM

    That messed the desktop and the mobile landscape up. I returned the code to:

    /*---Desktop responsive---*/

    .form-all {width: 80%;}

    /*---iPhone 5 in portrait---*/

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 568px)

    and (orientation : portrait) {.form-all{width:300px !important;}

    .jotform-form{margin-right:10px 

    !important;}}

    Since the site is live, please give me the suggested fixes and I'll try them. If you look at what you sugessted again you'll see that it didn't fix the Lanscape mobile problem and it to the desktop display from 80% to about 20%

    Rick

  • Profile Image
    JotForm Support

    Answered by Welvin on November 19, 2013 at 12:52 PM

    Hi Rick,

    Apologize! I guess the portrait and landscape codes are conflicting to each other. I combined both into a single line of codes. Kindly try this: http://pastiebin.com/528ba4b9ca32d.

    I've tested this into the clone version of your form, and so far it works fine. Let us know for the results here.

    Thanks

  • Profile Image

    Answered by rickeb on November 19, 2013 at 01:23 PM

    That fixes the desktop and also the portrait mobile mode. The landscape mobile mode is still too narrow (it's centered but only uses about 50% of the screen) I tried changing the max-device-width from 480px to 540px but it made no difference at all. Ideas?

    Rick

  • Profile Image
    JotForm Support

    Answered by Mike_T on November 19, 2013 at 03:06 PM

    Please try the following code, it should set the form width to 80% on iPhone landscape mode:

    /*---Mobile Portrait and Landscape Combined---*/
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    .form-all {
    width:300px !important;
    }
    .jotform-form {
    margin-right:10px !important;
    }
    }
    /*---iPhone 5 in landscape---*/
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px)
    and (orientation : landscape) {
    .form-all {
    width: 80%;
    }
    }
    /*---iPhone 2G-4S in landscape---*/
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 568px)
    and (orientation : landscape) {
    .form-all {
    width: 80%;
    }
    }
    /*---Desktop responsive---*/
    .form-all {
    width: 80%;
    }

    Thank you.

  • Profile Image

    Answered by rickeb on November 19, 2013 at 03:33 PM

    Mike,

    It made no diffrence. I'm confused about the max-device-width you're using, you have it as 480 for an iPhone 5 and 568 for an iPhone 4S, it seems like it should be just the opposite, the iPhone 5 is the wider device in Landscape.

    I think we need to simplify, look at this form:

    https://regalservice.com/careers/general-application/

    I'm only using the Desktop responsive code:

    /*---Desktop responsive---*/

    .form-all {width: 80%;}

    And the only problem with this approach is that Portrait mode on the iPhone 5 is not centered, Landscape mode is fine. So I probabaly only need one additional line of code to give me a 10px margin on the right in Portrait. What do you think?
    Rick
  • Profile Image
    JotForm Support

    Answered by EltonCris on November 19, 2013 at 06:11 PM

    Hi Rick,

    Thank you so much for your patience. Honestly, I don't have an actual device for testing so we used browserstack for iPhone testing which works similarly to an iPhone device. 

    I started on the first issue which is only on the iPhone portrait mode and come up with another script and hopefully this would work now. Please try to replace everything with the following.

    /*---iPhone---*/

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 480px) {

    .form-all {

    width: 94% !important;

    margin-left:0 !important;

    }

    }

    /*---Desktop responsive---*/

    .form-all {

    width: 80%;

    }

    As a result:

    If there's still any problem, feel free to let us know here. Thanks!

  • Profile Image

    Answered by rickeb on November 19, 2013 at 08:39 PM

    Thanks for sticking with me on this EltonCris. It's now perfect in Portrait mode and the desktop browser is responsive. The only thing that needs tweeked is the centering or margin in the iPhone landscape mode, for some reason I'm not able to insert the screenshot using your editor so here's a dropbax link:

    https://www.dropbox.com/s/954picgcp18bqxg/Landscape%203.jpg

    The form just needs to be moved a little right.

    Rick


  • Profile Image
    JotForm Support

    Answered by EltonCris on November 20, 2013 at 05:52 AM

    Hi Rick,

    Great!

    Try this out, replace everything with this.

    @media (max-width: 320px){

    .form-all {

    width: 94% !important;

    margin:0;

    }

    }

    /*---Desktop responsive---*/

    .form-all { width: 80%; }

    The following is the result and hopefully this is similar on your actual device.

    Landscape:

     

    Portrait:

    Kindly update us with the result. Thank you!

  • Profile Image

    Answered by rickeb on November 20, 2013 at 09:10 AM

    Thank you so much EltonCris for sticking with this. It is now perfect!

    Rick