Embedding Form without scrolling

  • GreenwaldRandall
    Asked on December 6, 2022 at 3:39 PM

    I'm having difficulty getting my form to appear on my webpage without it scrolling. I tried the Wordpress plug-in, regular embed code, and iframe and nothing seems to work.

    https://iapemember.com/index.php/membership-renewal-2023/

    Jotform Thread 4652433 Screenshot
    Page URL: https://iapemember.com/index.php/membership-renewal-2023/
  • CJ_G
    Replied on December 6, 2022 at 10:37 PM

    Hello GreenwaldRandall,

    Thanks for reaching out to Jotform Support. I am sorry that you're having difficulties with this. Could you please try re-embedding the form using the iFrame embed method but replacing the height of the iFrame with 1350px? Here's a demo video on how to do that.

    Give it a try and let us know how it goes.


  • cabalowen
    Replied on December 7, 2022 at 1:16 AM

    In order to remove scrolling features you can use iFrame code for embedding your form. Please see the steps below:

    1. Go to the Publish section and click Embed.
    2. Find IFRAME and click on it. You will see the “COPY CODE” button, click the button and copy the code.

    Now you can go to your Wordpress account and follow the steps:

    1. Click Toggle block inserter and choose Embed 
    2. Click Edit as HTML from Options. (vertical three dot icon on the top of the block).
    3. Paste the code here 
    4. from More Options (horizontal three dot icon next to the block) click Convert to HTML, here you can see preview by clicking the “Preview” button of your form as well.

    Basically I have also faced the same issue, while I am developing a jotform to integrate with my mobile app development company. But after folowing the above mentioned processes I have resolved it.

    Previously I have used this to integrate it -

    <iframe width="460px" height= "1000px" scrolling="no" 
    
src= "https:...&embed=true" 
    
frameborder= "0" marginwidth= "0" marginheight= "0" style= "overflow:hidden; border: none; max-width:100%; max-height:100vh" 
    
allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen>     </iframe>

    But you are doing this on CSS can do this -

    You can do it by adding following CSS.

    <style type="text/css">
    
body {margin:0; overflow: hidden;}
    
iframe {border: none;}
    
</style>
    
<body> 
    
<iframe height="100%" width="100%" 
    
src="yourframe1.html"></iframe>
    
<iframe src="yourframe2.html" 
    
width="100%" height="100%"></iframe>
    
</body>


    Hope this will help.

  • GreenwaldRandall
    Replied on December 7, 2022 at 3:37 PM

    That worked. Thank you!