Website Integration Mobile version

  • paradis.marguerite
    Asked on February 11, 2021 at 11:09 AM

    Hello! I've integrated 3 different forms in my website (Adobe Portfolio), but two of them don't entirely display in the mobile version (everything is fine on desktop).

    Here is the page linking my forms:

    https://margueriteparadis.com/reserver-book-photographe-montreal

    And here are the two problematic forms:

    https://margueriteparadis.com/seance-photo-lifestyle

    https://margueriteparadis.com/certificat-cadeau-photographe

    I currently have this code injected into my website. I probably need to add an element so the height in mobile displays correctly. Can you help me?

    <iframe id="JotFormIFrame" src="https://form.jotform.com/paradis.marguerite/seance-photos-lifestyle" frameborder="0" style="width:100%; height:6200px;" scrolling="no"></iframe>


    Thank you in advance for your help!

    Jotform Thread 2891813 Screenshot
  • Nikola JotForm Support
    Replied on February 11, 2021 at 12:54 PM

    The height of the iframe code is currently set to 100%.

    Please change it to 8000px. You can also change scrolling to yes.

    1613066022 60256f2674c99 height Screenshot 10


  • paradis.marguerite
    Replied on February 11, 2021 at 1:42 PM

    Hello Nick,

    Thank you for your reply. It does not really solve my problem for two reasons:

    1- I don't wish to change the current height in desktop since it displays perfectly right now (otherwise my footer containing my contact info would be too far from the submit button).

    2- I tried to enable scroll and it's not very easy to navigate up and down in the form on mobile once you get to the bottom of the page (ex. the person wants to review their information before submitting). I've enabled it here so you can take a look on mobile:

    https://margueriteparadis.com/seance-photo-lifestyle

    Is there a way to change the height only for mobile or at least adjust the iFrame to content?

    Let me know if there is anything else I could add/change to the iFrame code to make this work?

    Thank you very much!

  • paradis.marguerite
    Replied on February 11, 2021 at 1:48 PM

    Hi again Nick,

    I'm looking at your screenshot and I don't know where to go to change this information?

  • Nikola JotForm Support
    Replied on February 11, 2021 at 3:12 PM

    The screenshot I provided is the embed code you added to your webpage.

     <iframe id="JotFormIFrame" src="https://form.jotform.com/paradis.marguerite/seance-photos-lifestyle" frameborder="0" style="position:absolute; top:0; left:0; width:100%; height:100%;" scrolling="yes" class="embed-content"></iframe>

    You can also get the new iframe embed code of your form and embed it as it is without removing the script part of the code or you can try with the script embed code.

    Related Guides:

    Getting the Form iFrame Code

    Embedding a Form to a Web Page