What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
Embed a Form on a Zenfolio pageAsked by terrimillerphotos 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?
to something else:
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.
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,
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
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.