Required field crops form

  • Profile Image
    born
    Asked on March 21, 2014 at 06:16 AM

    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...?

     

  • Profile Image
    jedcadorna
    Answered on March 21, 2014 at 09:37 AM

    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" onload="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;
    }

     

  • Profile Image
    born
    Answered on March 21, 2014 at 12:43 PM

    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

     

  • Profile Image
    TitusN
    Answered on March 21, 2014 at 03:35 PM

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

    Please try the following Iframe embed code:

    <iframe id="JotFormIFrame" onload="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.

  • Profile Image
    born
    Answered on March 21, 2014 at 03:44 PM

    no change I'm afraid

  • Profile Image
    born
    Answered on March 21, 2014 at 03:49 PM

    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

  • Profile Image
    TitusN
    Answered on March 21, 2014 at 03:50 PM

    Glad you figured it out -

    Let us know if you hit another bump.