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

    Problem with responsiveness on Iphone.

    Asked by sindikatotakkanan on June 19, 2016 at 01:42 AM

    I have this page http://sindikatotakkanan.com/kontak-kami/ which not shown correctly on iphone with safari browser. this is css codes I used :

     

    @media only screen

    and (min-device-width : 320px)

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

        .form-all {

            width : 320px !important;

        }

     

        .form-line {

            padding-top : 0px !important;

            padding-bottom : 0px !important;

            padding-left : 3px !important;

        }

     

        img.form-image {

            max-width : 100% !important;

            height : auto !important;

        }

     

    }

     

    @media only screen 

        and (min-device-width : 375px)

        and (max-device-width : 667px)

        and (width : 667px)

        and (height : 375px)

        and (orientation : landscape) 

        and (color : 8)

        and (device-aspect-ratio : 375/667)

        and (aspect-ratio : 667/375)

        and (device-pixel-ratio : 2)

        and (-webkit-min-device-pixel-ratio : 2){

        .form-all {

            width : 667px !important;

        }

     

        .form-line {

            padding-top : 0px !important;

            padding-bottom : 0px !important;

            padding-left : 3px !important;

        }

     

        img.form-image {

            max-width : 100% !important;

            height : auto !important;

        }

     

    }

     

    @media only screen 

        and (min-device-width : 375px)

        and (max-device-width : 667px)

        and (width : 375px)

        and (height : 559px)

        and (orientation : portrait) 

        and (color : 8)

        and (device-aspect-ratio : 375/667)

        and (aspect-ratio : 375/559)

        and (device-pixel-ratio : 2)

        and (-webkit-min-device-pixel-ratio : 2){

        .form-all {

            width : 375px !important;

        }

     

        .form-line {

            padding-top : 0px !important;

            padding-bottom : 0px !important;

            padding-left : 3px !important;

        }

     

        img.form-image {

            max-width : 100% !important;

            height : auto !important;

        }

     

    }

     

    .form-dropdown {

        width : 100% !important;

        -webkit-box-sizing : border-box;

        -moz-box-sizing : border-box;

        box-sizing : border-box;

    }

     

    can you help me to fix it?

    I attach the screenshot

    Page URL:
    http://sindikatotakkanan.com/kontak-kami/

    Screenshot
    problem height sizing landscape form-line
  • Profile Image
    JotForm Support

    Answered by ashwin_d on June 19, 2016 at 02:20 AM

    Hello sindikatotakkanan,

    You do not have to inject custom css code to make your form mobile responsive. I did check your web page URL where you have embedded your form and found that you are using your form's script embed code. I would suggest you to make following changes to make your embedded form mobile responsive:

    #1. Please ensure the "Mobile Responsive" attribute of your form is enabled. The following guide should help you:  https://www.jotform.com/help/311-How-to-make-forms-mobile-responsive

    #2. You should embed your form using its iFrame embed code. Please remove the existing embed code you have added in your webpage and add your form's iFrame embed code. The follwoing guide should help yo how to grab your form's iFrame embed code:  https://www.jotform.com/help/148-Getting-the-form-iFrame-code 

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by sindikatotakkanan on June 19, 2016 at 02:26 AM

    Hi ashwind_d, thank you. I'll try and let you know later.

  • Profile Image

    Answered by sindikatotakkanan on June 19, 2016 at 02:52 AM

    Hi ashwin_d, I did what you just suggest, and got better, but not perfect yet. the form element width is still cut on Iphone with Safari.

     

     

     

     

    so, what's missed?

  • Profile Image
    JotForm Support

    Answered by Kevin_G on June 19, 2016 at 03:58 AM

    I have checked your form and I can see there is a conflict with the style, although the element where the form is embedded there is some style that is setting the width of the form more than needed: however, injecting this CSS code to your form should help you to display your form fine: 

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

        .supernova body {

            width: 75%;

         }

    }

    This should be the result: 

    Do note that you will need to embed your form again after doing the change, please let us know how it goes. 

  • Profile Image

    Answered by sindikatotakkanan on June 19, 2016 at 05:21 AM

    Hi kevin_G, thank you. I'll go try first :)

  • Profile Image

    Answered by sindikatotakkanan on June 19, 2016 at 06:12 AM

    Hi kevin_G, so by adding width: 75% will reduce the body width. It will affect to all browsers mobile device not just safari on iphone. Actually, other browsers on some devices work fine without this. The problem is just on safari browser on iphone.

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 19, 2016 at 06:53 AM

    Hi,

    The CSS provided by my colleague will affect all devices with width less than or equal 480px regardless of the browser used to view the form. Unfortunately, there is no way to isolate CSS effect to Safari only. CSS changes will affect all browsers.

    As per checking of your form using Chrome, it still looks fine. Please see below.

    Here is another screenshot when your form is opened in Android phone.

     

    In which device and/or browser does the form have a width problem now?

  • Profile Image

    Answered by sindikatotakkanan on June 19, 2016 at 05:32 PM

    Hi Chriistian, I still got problem on Iphone with Safari Browser

  • Profile Image
    JotForm Support

    Answered by jonathan on June 19, 2016 at 05:58 PM

    I checked and test on Iphone Safari browser using the form URL https://www.jotform.me/form/61536987510462 , but I could not produce the issue.

     

    but on your website http://sindikatotakkanan.com/kontak-kami/ I see the problem.

    Please make sure also that your website has mobile browser enabled. That should allow the form on the website respond when using mobile browser.

     

     

     

     

  • Profile Image
    JotForm Support

    Answered by jonathan on June 19, 2016 at 06:03 PM

    I added the Mobile responsive widget on your form https://www.jotform.me/form/61536987510462

    I think its much better now.

     

    Let us know if there are still issue.

  • Profile Image

    Answered by sindikatotakkanan on June 20, 2016 at 01:51 AM

    Hi jonathan, thank you. but It still messed up (see image). so I took off the widget.

  • Profile Image

    Answered by sindikatotakkanan on June 20, 2016 at 01:58 AM

    I just restored to my first configurations. I removed class body supernova, responsive widget. I just checked responsive from the layout option.

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 20, 2016 at 02:19 AM

    Checking the "Make this form responsive" option from the Form Designer will indeed make the form mobile responsive. Do you still encounter any issues with the responsiveness of the form on iOS? If you do, please let us know. Regards.