How can I widen the iFrame on my web page?

When I insert the iFrame code to my zenfolio-hosted web page, it appears very narrow and cuts off some portions of the text boxes as a result.

Where in this code would I insert a line telling it to play nice with my website. It looks fine on JotForm's site, but again, extremely narrow when I paste the code into my webpage and view it.

Here's a link to my web page to show you what I mean:

http://www.mcdanielphotography.net/wedding-day-questionnaire

Here's the link to my form on JotForm:

http://www.jotform.com//?formID=40624501280140

And here is the source code provided for the iFrame:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/40624501280140" frameborder="0" style="width:100%; height:6438px; border:none;" scrolling="no"></iframe>
<script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

I will add that I attempted to somply embed the source code of the whole form, but it would never save on my site. This may be because the size exceeds my host's 100KB limit.

Thanks!

Please try to insert this code instead:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://form.jotform.us/form/40624501280140" frameborder="0" style="width:800px; height:6148px; border:none;" scrolling="no"></iframe>

<script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

I changed the width value from 100% to 800px, and from my tests, it solved the issue.

Let us know please if you need further  assistance.

Thanks Carina! That's perfect!

I adjusted the height a little further and it appears beautifully. Thanks so much.

-Tim

You are most welcome. Feel free to contact us whenever you need.

Have a good day!