Form being cut at the bottom in Dreamweaver

My form is not working when I preview it in Firefox 35.0.1

Unfortunately, I cannot provide a link as this is a work in progress in Dreamweaver, but I have provided a snapshot of the problem.

Considering that I can not inspect your website, I can only recommend you to use iFrame for embedding your form inside of your website. Here is link how to embed form in iFrame.

http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code 

Also you can try to delete cache from your browser and update your browsers to the latest version.

You can see how to clear browser cache here: 15 Ways to Clear Your Browser's Cache - wikiHow

Hope this will help. Let us know if you need further assistance.

I did use the iFrame. 

I saw a thread from 2013 on this same issue. Is there some way I can check, and or change, the settings for Firefox within the form script? Thought I saw an option for that.

Will try to upgrade to the latest version of Firefox to see if that helps. 

Clearing cache and updating to latest Firefox did not work. 

Checking discussion thread from 2013. 

Are there any more options for me?

I tried starting over and embedding another form with iframe. Still getting cropped on bottom with Firefox, but not with Chrome or Safari. 

Unless I hear from someone within the next day or so, I am going to have to find another service. This is not working.

We appreciate your efforts in troubleshooting the issue. It would be helpful for us to investigate the issue if the webpage is online. Could you try increasing the height of the iframe to 700px to see if that helps?

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/******************" frameborder="0" style="width:100%; height:700px; border:none;" scrolling="no"></iframe>

Please get back to us if you need any further assistance. We will be happy to help.

Thanks!

Still doesn't work, still getting cut off at bottom.

Site will not be online for a while. This is a class assignment.

Okay. Let us try inserting a form separator after submit button temporarily to increase the bottom space.

http://widgets.jotform.com/widget/form_separator

You may try changing the color to #FFF to match the background of the form and increase the space above or below. Let us know how it goes and provides us with a screenshot if the issue still persists.

Thanks!

Still doesn't work, still cut off on bottom.

Hi,

It would help us identify the issue if we could see your code in Dreamweaver, that would help us give a working solution. 

You can also copy the code and share it to us via http://pastebin.com/.

After the said solutions above that did not work, I would assume that the problem is the element holding the iFrame itself. Is iFrame inside another <div> element with a specific width inheriting the parent element? Example:

<div>

<iframe>

...

</iframe>

</div>

You can try adding a specific width on that <div> element, just make sure that it is large enough to cover the height of the iFrame.

I hope this gives you an idea.

Kind regards.

Here is my code. I added to the width and height in my own .contactform selector (600x600)

When I preview in Firefox it is still cutoff at the bottom. When I preview in Safari and Chrome all four sides show, but there is a thick black line jutting out from it. ?????

    <div class="contactform">

   <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/50775122483152" frameborder="0" style="width:100%; height:585px; 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;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

</div><!--closes contactform-->

Firefox preview

Safari and Chrome preview

I have cloned and tested your form and I was able to reproduced your problem. I was able to fix it by Injecting Custom CSS. To do that inside of your Form Builder select Setup & Embed tab, then click on Preferences, then select Form Styles tab and inside of Inject Custom CSS field at the bottom of existing code paste this code:

.form-all{

height:500px!important;

}

And black line at the bottom is caused by Form Separator Widget.

Hope this will help. Let us know if you need further assistance.

Previews fine in Safari and Chrome using your code advice. Still cutoff on bottom in Firefox.

Inject .form-all under the existing code I see or the one you've highlighted above with a 700 max width?

If it's the one you've highlighted I can't see it all, as it's cutoff in the frame grab.

It is not working in Firefox with the existing code I initially saw when I opened up the settings.

Please ignore the code in the screenshot. I think the screenshot is provided to help you with the steps to insert the provided CSS code.

Please inject the following CSS code to your JotForm  and let us know how it goes. 

.form-all {

height: 500px !important;

}

Thanks.

Still doesn't work. Still cut off on bottom on Firefox preview.

Problem is that you have added a lot of Custom CSS code that now is causing you a lot of problems.

After inspecting your form seems that this CSS is causing problems you have and recommendation is not to add unnecessary code. In you case please try to delete code that is marked on the picture.

Let us know if you need further assistance. 

Still not working. Bottom cutoff on Firefox. Firefox works with layout in css, but Chrome and Safari do not.

Let me clarify. Firefox works when positioning in css, but Chrome and Safari do not match Firefox's preview. They are both way off.

Hi,

I'm quite confused where the problem is now.

I assumed that you are still using the same HTML structure you mentioned above, using the .contactForm class selector. 

So basically here's how I would embed it on your Dreamweaver:

<div class="contactform" style="width: 620px !important; height: 620px !important">

   <iframe id="JotFormIFrame" allowtransparency="true" src="//form.jotform.us/form/50775122483152" frameborder="0" style="width:100%; height:585px; border:none;" scrolling="no"></iframe>

</div>

See if that works, if not, find the parent element and declare a specific width or height, adjust the heights of your element in your Dreamweaver and see if you are able to find which styling is conflicting.

I hope this helps.

Kind regards.

Charlie,

I imbedded the code you recommended above and it works on all three browsers. Have to check on Internet Explorer at my classroom Wednesday evening, but aside from that all seems well.

Thank you. 

When I am doing responsive which height do I refer to? The one in the <iframe id> or the one in the <div class>?

In my colleague's name, you are welcome.

If you want to make your form responsive please read this article:

http://www.jotform.com/help/311-How-to-make-forms-Mobile-Responsive 

Let us know if you need further assistance.