Forms do not display mobile responsive when embedded on a site

  • George Thompson
    Asked on June 23, 2016 at 2:47 AM

    I decided to make my forms responsive and added this option to all forms now none of them display properly. I decided to put the forms on their own page to see if that would cure the problem it did not. I added the mobile widget with no change.

    I dont know what to do other than start again and remake all the forms as they worked before but were not responsive.

    my website is www.phuketacetours.com

    I have changed the adventure tour page to have it's own separate booking page and the Fantasea page booking form has the mobile widget added

    None of the forms display correctly. I went back and unticked the responsive box in form builder but that made no difference either.

    I look forward to your help

    George

  • beril JotForm UI Developer
    Replied on June 23, 2016 at 4:30 AM

    When I've checked your form that you've created on Jotform I am not able to reproduce the same issue that you’re having. it works properly on my side. However, when I've checked on your website, it is also happening to me. 

    Forms do not display mobile responsive when embedded on a site Image 1 Screenshot 20

     

    Could you try to re-embed the form using our iframe method: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    I hope embedding with IFrame method will fix that issue. If this does not resolve the issue, please let us know and we will be glad to take another look.

     

  • George Thompson
    Replied on June 23, 2016 at 4:45 AM
    Hi
    I've already tried using frame no different and I've also tried using source code.
    The forms display OK On my desktop computer but not on iPad or iPhone
    Don't know if there's a css conflict
    George
    Sent from Phuket Ace Tours
    ...
  • Boris
    Replied on June 23, 2016 at 6:59 AM

    George, if ever you do not like how a certain modification to your form turned out, you can use the Form Revision History feature to revert your form to one of its saved states before the unwanted change:

    https://www.jotform.com/help/294-How-to-view-form-revision-history

    When it comes to your forms when embedded, I do not see any forms embedded on the page you have linked to above: http://www.phuketacetours.com/

    However, I found a JotForm form on pages such as this one: http://www.phuketacetours.com/ppcruisertour.html

    On this page, the problem comes from the website itself not being mobile responsive - the website around the form is set to have a width of 1270 pixels, which is way too wide for most mobile devices. In order for the form to perform in a mobile responsive manner, the website where it is embedded must too be mobile responsive.

    Currently, your site is coded with specific widths on multiple container elements, all preventing the site from being mobile responsive. The .main element of your site is set to width 1270 pixels:

    Forms do not display mobile responsive when embedded on a site Image 1 Screenshot 30

    The .container_12 element of your site is set to width 1152 pixels:

    Forms do not display mobile responsive when embedded on a site Image 2 Screenshot 41

    The .container_12 .grid_9 element is coded to have a width of 840 pixels, etc. All this is preventing your site from being mobile responsive, so our form doesn't have a responsive layout to follow on that site - even if the form is mobile responsive when looked at over its direct link.

    In order to have the form act mobile responsive when embedded on your site, you may need to contact your web developer so that they can make your entire website mobile responsive. Our form will simply follow the design and will modify itself to the available space it has on your website.

    If you need further clarifications or assistance, please let us know. Thank you.