Embedded forms get the wrong height when multiple forms are embedded

Dear Jotform Support Team,

I am using two Forms made with Jotform and embedded them in two articles in my joomla site,

unfortunatly there is an extraordinary space between those two foms if you open them on a desctop computer or tablet but on a smartphone the gap is not existing.

I figured out that if I embed my forms to an article in Joomla then publish the article
the form is not shown completely in the frontend.

Maybe the embedcode that is generated by jotform is not correct.
see the maximum hight: is automaticlay set to 539 pxl by jotform embedcode
which is way to small and I have to ajust this entry to 1639 in my case to show the whole form.
but unfortunatly the gap between the two forms on PC or tablet is also too big.

<p>

    <iframe src="https://form.jotform.com/242444919624361" id="JotFormIFrame-242444919624361" style="min-width: 100%; max-width: 100%; height: 539px; border: none;" title="Clone of Libratus Abo Presale" scrolling="no" allow="geolocation; microphone; camera; fullscreen" frameborder="0"> </iframe>

</p>

please would you give me some advice to generate a better i frame code

kind regards

Jo

Hi Jo,

Thanks for reaching out to Jotform Support. When I checked your webpage, I saw that your two forms located side by side. Take a look at the screenshot below:

However, I cloned your form and checked it's IFrame code on another webpage, but there wasn't any unnecessary spaces in height. Check out the screenshot below:

Since the IFrame code you got from Jotform is working as it should, adjusting the spacing on your website where you embed the form might be a solution for you.

Reach out again if there’s anything else we can do for you.

Hi Arwen
unfortunatly I cant close the gap between the two forms ...

I dont belive that the generated code is wrong .... the hight is to small and if I increase the amount of the forms drift away from each other. I tried to set hight to 100% which destroid the form on my joomla project.

Anyway please could you check the I frame code and show me how it looks like if you embed it.

<p>

   <iframe src="https://form.jotform.com/242444919624361" id="JotFormIFrame-242444919624361" style="min-width: 100%; max-width: 100%; height: 539px; border: none;" title="Clone of Libratus Abo Presale" scrolling="no" allow="geolocation; microphone; camera; fullscreen" frameborder="0"> </iframe>

</p>

Hi Jo,

This is how the embedded forms are looking on your website side by side and the gap between them is very reasonably small. Check out my screenshot below:

Do you want to remove the gap between the forms entirely? If so, you can get back to us so that we can provide a suitable CSS code for this.

After we hear back from you, we'll be able to move forward with a solution.

Hello Bilal

thank you for your briliant support. to express myself correctly I dont mean the horizontal distance but the huge vertical space between the forms when you open the site on a tablet or a smartphone.

see atteched pic

I would be very happy about a corresponding CSS code that fixes this

kind regards

Jo

Hi Jo,

I checked your webpage, and it seems the space is from the height of the first form and not from the second form. Check out the screenshot below as your reference:

We can adjust this by creating a breakpoint in your CSS code and add a specific height to the first form when it applies. Could you try to use and test the code below?

@media only screen and (max-width: 768px) {

  #JotFormIFrame-242406374619358{

  height:1900px !important;

}

Make sure to save your file and refresh your browser to update the webpage.

Check out the screenshot below to see my result:

Give it a try and let us know how it goes

thank you for your reply ... could you please let me know where I should put this code to

@media only screen

and (max-width: 768px)

{

 #JotFormIFrame-242406374619358{

 height:1900px !important;

}

Hi Jo,

To apply the CSS code provided, you’ll need to add it to the CSS file within your website builder. Most website builders allow you to customize the appearance of your site by modifying the CSS directly. Simply paste the provided code there, and it will take effect for screens with a maximum width of 768px. This will ensure that the height of the specified iframe is adjusted correctly on smaller screens.

Give it a try and let us know if you need any other help.

i will try right now thanx

Hi Jo,

I'll need a bit of time to look into this. I'll get back to you as soon as I can.

Thanks for your patience and understanding, we appreciate it.

Hi Jo,

Upon checking your website, it seems like the 2 forms have an error embedded in one location of the website. Take a look at the screenshot below:

When you check the screenshot, both forms are embedded and the top one is much shorter, but both iFrames got set to 1900px by the code. That's why the extra space keeps on appearing on the preview mode of the website. Can you please try to re-embed the other form to a different location on your website to see if it could fix the issue?

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