Website Integration Mobile version

  • Profile Image
    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!

  • Profile Image
    Nik_M
    Answered 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.PNG


  • Profile Image
    paradis.marguerite
    Answered on February 11, 2021 at 01: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!

  • Profile Image
    paradis.marguerite
    Answered on February 11, 2021 at 01:48 PM

    Hi again Nick,

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

  • Profile Image
    Nik_M
    Answered on February 11, 2021 at 03: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