- terrimillerphotosAsked on January 19, 2016 at 06:09 PM
I'm trying to embed a form on a page at Zenfolio. In the past I have used the iframe code and adjusted the width and height to accommodate both computers and mobile devices. However, that tweak isn't working.... What's my next step?
- JotForm FounderaytekinAnswered on January 19, 2016 at 08:03 PM
to something else:
- terrimillerphotosAnswered on January 19, 2016 at 09:14 PM
I have tried that. It's worked before, but not this time. Below is what it looks like with the width set at 700px or at 900 px. If I have to, I'll just link back to the form on the JotForm site, but I'd prefer to have it on my branded page on my website.
- JotForm SupportChriistianAnswered on January 20, 2016 at 02:44 AM
I checked your website using the developer option in chrome and it looks like the iframe doesn't have a width in the styles. The width becomes 300px because there is no fixed width in the styles of the iframe.
When I added the 700px in the developer mode, I can see the full width of the form in the website.
Do inform us if you need further assistance,
- JotForm SupportChriistianAnswered on January 20, 2016 at 02:49 AM
Just to clarify, you will change the width in the iFrame embed code.
Here's a snippet of an iFrame embed code:
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/60190942026955" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe>
The highlighted part of the code is what should be edited from 100% to 700px
- JotForm UI DeveloperomerAnswered on January 20, 2016 at 04:18 AM
There are two parent elements of iframe.
The first one has "zb-richtext largeimage" classes and its style contains "width: 300px" property. The width value should be 100% of this element.
The second parent element with "zb-embed" has absolute positioning, so its width, left and top values should be declared.
And please leave iframe width as 100%.
So final styles should be like this:
zb-richtext largeimage => width: 100%;
zb-embed => left: 0; width: 100%;
iframe => width: 100%;
If your problem still stands, please let us know.