Visual Report - change the embed dimensions

hello,

I am trying to embedd a jotform report on my website

I'd like to change the html code so that it doesn't take all the screen size (see this link for example: https://www.quali-service.fr/wip

as of right now, it pops up as a type of modal although I'd like to make it appear on a dev that wouldn't take all the page

how can I do?

cheers

Greetings,

You can embed your report via an iframe like so:

Replace the src attribute's value with your form's URL. You can get your report's URL here:

Adjust the width and height attributes to your liking.

cheers,

Greetings,

Regarding "is that possible to enable the viewers to access the filters and enable them to change the date for example?"

I have moved it to separate support ticket to avoid confusion. We will be handling one topic/issue per ticket. We will get back to you via these support tickets shortly here https://www.jotform.com/answers/2897940

Regards.

Hello

coming back to you on this. Is it possible to avoid the "pop up" effect that you can see on this loom video

https://www.loom.com/share/f56e47dc20064bffaebd8179043244aa

as you can see, as soon as I hit the url, a javascript code activates and takes over on the page hiding my nav menu.

I would like the iframe to behave as such:

=> the report appears in the iframe but do not take over hidding the menu

thanks for your help

Greetings.

Have you tried the iFrame code my colleague has provided:

<iframe src="https://www.jotform.com/report/21044421813704414" width="600" height="400" scrolling="no" frameborder="0"></iframe>

Does this not work for you?

Hello,

yes, this is exactly what I did. Just changed around width and height...

you can check the page here: https://www.quali-service.fr/rapport/71807b82-597f-42e4-ab82-2397f9ae185d

Hello! As far as I can check your webpage; the contents of the report are within the iframe itself.

However, this iframe is not correctly placed on your webpage. It has fixed position and will thus remain at a specific space as per the applied CSS; hiding anything else behind it (screenshot attached for your reference).

You'll need to fix your webpage's CSS to make it work. So, if you set this iframe's CSS to static position and also set its height (like below); this will take care of your iframe's alignment.

iframe{

 position: static;

 height: 800px;

}

And for the top navigation menu, simply set a z-index to a higher value, like 10 (as shown below) in the CSS.

.section-9{

 z-index: 10;

}

Please give it a try. I hope this helps. If you have any questions, let us know.

Thank you!

It seems to have worked. My front end now only looks like shit but it's on me ;)

As always, jotform's support is PROPERLY amazing!

Thank you guys!