Required field crops form

Using the file upload field, when this field is required notice pops up my form suddenly crops so the submit button disappears?

Also why after I've chosen a file, the error mgs is still there, it doesn't go away unless I click elsewhere on the form...?

Hello,

Thank you for contacting us.

If you use the regular embed code the form height should dynamicall adjust your form heigth but just incase it doesn't then when you embed your form in your website there might be some conflicts with your code that is preventing it to adjust automatically.

Can you please share to use your website URL where your form is currently embedded so we can investigate it and provide a proper solution. How about adjusting the form height and see if that helps?

If you are using an iframe code you can adjust the heigt that is highlighted:

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

Also why after I've chosen a file, the error mgs is still there, it doesn't go away unless I click elsewhere on the form...?

Unfortunately that's how our validation was designed. If you want to remove the validation error you can do so by injecting a custom CSS.

You can inject this CSS code:

.form-line-error .form-error-message {
display: none;
}

.form-button-error {
display: none;
}

.form-line-error {
background: transparent;
}

Using Iframe as the normal embed code only seems to work on desktop browsers, not in iOS.

Have tried to adjust the height to no avail.

Here's the url http://www.bornshorts.com/volunteer

Though I could not reproduce the issue using Iphone4,4s and 5:

Please try the following Iframe embed code:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformeu.com/form/23004067153341" frameborder="0" style="width: 100%; height: 544px!important; border: none;" scrolling="no"></iframe>
<script type="text/javascript" async="" src="//www.google-analytics.com/ga.js"></script><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>

Let us know if this helps.

no change I'm afraid

BUT... with your new code I've extended the length of the form about 50px or so and that seems to have done the trick both on iOS and desktop browsers...

thanks very much

Glad you figured it out -

Let us know if you hit another bump.