How can I make the embedded form mobile responsive?

  • Stanka
    Asked on June 13, 2019 at 5:26 AM

    Hello,
    when embedding created form (script or iframe) to my website, the form isn't responsive/mobile friendly. I followed your instructions (https://www.jotform.com/help/311-Deprecated-How-to-Make-the-Form-Responsive-Using-the-Form-Designer-Tool) but I don't have the "Make this form responsive" option under "Form Layout" section. See image attached.

    Nevertheless the direct link works fine on mobile.

    Regards,
    Stanka

    Jotform Thread 1855725 Screenshot
  • AndrewHag
    Replied on June 13, 2019 at 7:07 AM

    Please note that the forms are by default mobile responsive. Could you please try embedding the form using its iFrame code?

    Here is the guide: Getting-the-Form-iFrame-Code

    Also, please share the URL of the web page if the above solution doesn't work.

  • Stanka
    Replied on June 13, 2019 at 7:35 AM

    I have tried with iframe and script and in both cases on my mobile I don't see a resposnsive mobile form


  • Ashwin JotForm Support
    Replied on June 13, 2019 at 8:29 AM

    I did test your embedded form in mobile device and it seems to be mobile responsive. Fields are displayed correctly. Please check the screenshot below:

    1560428875mobileView Screenshot 10

    If you view the embedded form in landscape mode, the fields size will adjust automatically. 

    How are you expecting the fields to be displayed? 

  • Stanka
    Replied on June 13, 2019 at 8:38 AM

    How can that be responsive and mobile friendly if input fields are so small?!
    Go to direct link with your mobile device and you will see the difference => this is how embedded code it should look like (img bellow), right?


  • Ashwin JotForm Support
    Replied on June 13, 2019 at 9:09 AM

    Let me test this on what is causing it and will get back to you soon.

  • Stanka
    Replied on June 14, 2019 at 7:40 AM

    Hi Ashwin, have you found the reason?

  • Richie JotForm Support
    Replied on June 14, 2019 at 9:02 AM

    It seems the issue is  with your HTML code when your embed the form.

    Here is a screenshot of the error in the console log when viewing your web page.

    How can I make the embedded form mobile responsive? Image 1 Screenshot 20

    It seems you may have not declared any header,meta tag or body in your HTML.

    Kindly try adding this HTML code in your web page

    <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    </head>

    <body>

    <Insert the Iframe Code here>

    </body>

    </html>


    Please give it a try and let us know if the issue still remains.

  • Stanka
    Replied on June 14, 2019 at 10:04 AM

     Thank you. That solved the problem.