Form not displaying in mobile devices

  • Profile Image
    digichef
    Asked on April 09, 2018 at 01:04 PM
  • Profile Image
    digichef
    Answered on April 09, 2018 at 02:11 PM

    Sorry, only on mobile... mine is iPhone 8 plus..

    (when you click "Free Trial, Click Here"

    Here's a grab..

    Forms is all run off to the left side.

    Thanks1523297404IMG_3159.PNG

  • Profile Image
    Jan
    Answered on April 09, 2018 at 02:14 PM

    I checked your webpage and I can verify that the form is displaying properly. Here's a screen capture:

    1523296923formdispl.gif

    Are you referring to a different form? If yes, please let us know so that we can further assist you.

    Thank you.

  • Profile Image
    digichef
    Answered on April 09, 2018 at 02:54 PM

    Not on mobile1523300047E7D76CE7-DBF0-4384-B73F-82AD86

  • Profile Image
    Jan
    Answered on April 09, 2018 at 03:08 PM

    I was able to replicate the issue on my Desktop PC when I resized the browser window.

    Please try to re-embed the form using the iFrame method. Here's a guide: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code.

    If the issue persists, you might need to add a custom CSS to your webpage to make it responsive.

    Hope that helps. Thank you.

  • Profile Image
    digichef
    Answered on April 09, 2018 at 03:44 PM

    Thanks, same exact form has been there for a long time...  

    ive changed nothing on my website.

    Any idea why something changed?

    if you check my history/account.. you’ll see.. I’ve been waiting to start up this idea and have been paying annually..

    please check this again more carefully (I’m not in my office) because I’m not super technical and this form was set up a long time ago and worked perfectly.

    Thanks

    Brian

  • Profile Image
    jonathan
    Answered on April 09, 2018 at 04:42 PM

    We apologize for the inconvenience caused. I was able to see the issue as well when I test the form using mobile browser. The published form was not displaying properly on mobile browser in the website page http://www.eforms.mobi/

    1523306272zzz 2018-04-10 04.33.33.png


    When I checked the source code of the website page, I see that the form was embedded using the JS script embed code.

    1523306408zzz 2018-04-10 04.37.23.png


    It is possible that script conflict related issue was contributing to the issue on the mobile browser display problem.

    Re-embedding the form using the iframe embed code in your website should not be that complex. I suggest you try re-embed first and let us check if it makes any difference.

    Follow the steps on the user guide: Getting the Form iFrame Code

    Make sure you clean/remove first any previous script embed code of the form in the website before you add back the form using its iframe embed code.

    Let us know if issue persist.





  • Profile Image
    digichef
    Answered on April 09, 2018 at 05:27 PM

    Ok, I’ll try when I get back from work, thanks

  • Profile Image
    Adrian
    Answered on April 09, 2018 at 06:36 PM

    From what I can see, this seems to be caused by the parent div on your website.

    Adding the following CSS code to your website should fix the issue.

    #trial {
      width: 100%;
    }

    15233132591.gif

  • Profile Image
    digichef
    Answered on April 14, 2018 at 11:25 AM

    I tried re-embedding iframe, still couldn't get it to work.

    Below is what I see in Dreamweaver, looks different from the previous animation.

    Could you send me the previous idea as text so I could just paste it in.

    Thanks'1523719526grab.jpg


  • Profile Image
    Adrian
    Answered on April 14, 2018 at 01:06 PM

    Please undo the changes that you have made to your website (Embed the form using the script tag inside the div with the id trial. Currently, the div with the ID #trial is missing.) and add the following CSS to your page.

    <style>
      #trial {

        width: 100%;
      }
    </style>

    This should fix your issue as you can see on my previous reply.


    Let us know if you need further assistance.

  • Profile Image
    brian 
    Answered on April 15, 2018 at 10:25 AM

    This is probably beyond the scope of your support, but this is the code now. When I click on id="trial" Dreamweaver says invalid markup, overlapping or unclosed tag.  There's several stylesheets, where do I add the style edit you suggested.  

    Thanks
    Brian


    </div>


    </div>

    <!-- End Press -->


    <!-- Start Start Trial -->

    <div id="trial" class="page">

    <script type="text/javascript" src="//form.jotformpro.com/jsform/50616448085963"></script>


  • Profile Image
    Adrian
    Answered on April 15, 2018 at 10:39 AM

    Just return the code to the way it was when you posted this and add the CSS I mentioned above.

    The CSS can be added to any stylesheet that is included or internally in the head section of that page.

    Internal CSS


  • Profile Image
    digichef
    Answered on April 15, 2018 at 10:40 AM

    sorry, wasn't logged in............


    This is probably beyond the scope of your support, but this is the code now. When I click on id="trial" Dreamweaver says invalid markup, overlapping or unclosed tag.  There's several stylesheets, where do I add the style edit you suggested.  

    Thanks
    Brian


    </div>


    </div>

    <!-- End Press -->


    <!-- Start Start Trial -->

    <div id="trial" class="page">

    <script type="text/javascript" src="//form.jotformpro.com/jsform/50616448085963"></script>


  • Profile Image
    digichef
    Answered on April 15, 2018 at 10:49 AM

    Perfecto!  Thanks Adrian!