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.


  • Profile Image

    When submitting without filling out the required fields the validation error message shifts the page towards left in IE.

    Asked by beautifulcanvas on October 07, 2014 at 10:04 AM

    so I have cloned your demo form above and via the preview everything works just fine, form id https://secure.jotformpro.com/form/42786815248971 but when I insert to page (using Xara) there's a problem, if submit button is clicked without all required fields having been completed it shows error at bottom of form as expected but my entire page also shifts to the left and items or information on the page is missing ? it also happens when using just single forms ? not sure how to fix this?

    you can see what I mean using I.E http://beautifulcanvas.co.uk/order.htm even though this is using an iframe + dropbox it still shows the same problem if using the above form.

     

    UPDATE this only seems to be an issue with I.E, all seems to work ok with firefox, chrome, opera and safari

    validation error required fields CSS layout changed IE error
  • Profile Image

    Answered by Ben on October 07, 2014 at 12:14 PM

    Hi,

    Can you please tell us if there are any specific option that we should select to see the issue?

    I have tried submitting on every black screen that I was shown in IE 8 and it only changed the background color to red, which was expected for me.

    Now the red is shown right next to the border, but it is like that on other browsers as well, which is why I am not sure that this is the issue you have mentioned.

    Can you also tell us what is the version of your IE (Internet Explorer)?

    Just to confirm, I have done my tests on both direct URL to jotform and on your website, both resulted in the same layout across different browsers.

    If you can also include a screenshot of the issue, that would be great as it would give us a better insight into what might be the issue.

    Best Regards,
    Ben

  • Profile Image

    Answered by beautifulcanvas on October 07, 2014 at 12:29 PM

    Hi, thanks for the reply, I'm using I.E 11 , and as you can see from the screen shot everything on the page moves to the left when clicking the submit button with incomplete fields. page will reset only when refreshing the page. all other browsers work fine.

  • Profile Image

    Answered by Ben on October 07, 2014 at 02:16 PM

    Hi,

    I see what you mean, but I do not think that this is connected to our jotform. The issue is actually caused by the p element in which the iframe with jotform resides.

    <div style="position: absolute; left: -4px; top: 862px; width: 1304px; height: 2067px; overflow: hidden;">

    Now because of the overflow property it will seem as if the part of it is cut.

    What I would suggest is to replace the above with this code and let us know if it worked for you.

    <div style="position: absolute; left: -4px; top: 862px; width: 1304px; height: 2067px; overflow: hidden; <!--[if IE]>padding-left: 40px;<![endif]-->">

    Do let us know how this goes for you.

    Basically what I added there is to check if the browser is IE or not and if it is to move the page a bit to the right. If other browsers see this, they will just skip it as if it is not there. Now if that does not work I would suggest this one instead:

    <div style="position: absolute; left: -4px; top: 862px; width: 1304px; height: 2067px; overflow: hidden; <!--[if IE]>margin-left: 40px;<![endif]-->">

    Looking forward to hearing from you.

    Best Regards,
    Ben

  • Profile Image

    Answered by beautifulcanvas on October 07, 2014 at 02:27 PM

    No sorry neither worked :(

  • Profile Image

    Answered by Ben on October 07, 2014 at 03:39 PM

    Hi,

    Sorry to hear that.

    Now unfortunately I would need to give you few different CSS styles and I hope that you will not mind testing them out to see if they work. Thing is that IE is usually the one browser that will always cause issues :/

    Lets try to change the line above into this

    <div style="position: absolute; left: -4px; top: 862px; width: 1304px; height: 2067px; overflow: hidden; <!--[if IE]>left: 20px;<![endif]-->">

    Now in case that it does not work this is the same to it, just done in a different way

    <!--[if IE]><style type="text/css">.jotform_class_ie_issue{left: 20px !important;}</style><![endif]-->
    <div class='jotform_class_ie_issue' style="position: absolute; left: -4px; top: 862px; width: 1304px; height: 2067px; overflow: hidden;">

    Now there are few more 'hacks' with IE that we can try if this fails. If you do not mind could you please leave the style that almost works or if none work, then leave the second style in the page and let us know so that we can test it out. I would then try to try few more other things, if it would let me to change it.

    Best Regards,
    Ben

  • Profile Image

    Answered by beautifulcanvas on October 07, 2014 at 06:57 PM

    no sorry none work, but I have left second style in place :(

  • Profile Image
    JotForm Support

    Answered by jonathan on October 07, 2014 at 10:53 PM

    Hi,

    I was able to see the shift you meant when I checked your jotform http://www.jotformpro.com/form/42786815248971 in your website

     

    But can you please try first re-embedding the form using the default Iframe embed code provided when getting it using the form builder?

    Follow this user guide http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    or try this exact iframe code embed (I got it using your account)

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/42786815248971" frameborder="0" style="width:100%; height:960px; 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>

     

    Test and check how it behaves in the browser again after doing this.

    Please inform us if issue persist.

    Thanks.

  • Profile Image

    Answered by beautifulcanvas on October 08, 2014 at 04:26 AM

    tried that but form then only shows the paypal section, the rest is hidden but still shifts left, changed Height:960px to various settings but stll only show paypal section, if I remove "setHeight":iframe.style.height = args[1] + "px"  then all the form shows correctly but still have the left shift ? :(

  • Profile Image
    JotForm Support

    Answered by jonathan on October 08, 2014 at 06:54 AM

    I think it was just a script conflict that was causing the form cut-off.

    Please retry the iframe code without the script part of it.

    Use this

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

     

    You need to remove first the old iframe code you have used 

    This one

    <iframe id="JotFormIFrame" src="https://secure.jotformpro.com/form/42786815248971" style="width:100%; height:100%;"></iframe>

     

    Please try to follow this procedure first and let us check it on your website so that we can further check for any issue.

     

    Thanks.

  • Profile Image

    Answered by beautifulcanvas on October 08, 2014 at 05:29 PM

    ok I have done exactly as you have said, but now only the paypal section is visible this is because the

    Height:960px;  is not enough but I have left it as is, as requested. :(

  • Profile Image
    JotForm Support

    Answered by jonathan on October 08, 2014 at 10:40 PM

    Hi,

    From what I see on the website, it was now a different jotform.

    The current embedded was this http://www.jotformpro.com/form/42765910802960

    The previous one I checked was this http://www.jotformpro.com/form/42786815248971

    As you can see on the iframe embed code

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

     

    If you want to use the new jotform http://www.jotformpro.com/form/42765910802960

    use this iframe code instead

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

     

    Please try again. Update us of the result.

    Thanks.

     

  • Profile Image

    Answered by beautifulcanvas on October 09, 2014 at 04:35 AM

    no I think you made a mistake there,  *48971 is the current embedded form and is the one I've been using all this time, *02960 is a single form (landscape/portrait) which is the first embedded form in the multi form, *48971 and is still the current form as requested in your previous post :(

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

  • Profile Image
    JotForm Support

    Answered by jonathan on October 09, 2014 at 05:59 AM

    Hi,

    Sorry if I made a mistake on that. My previous screenshot did show the URL of the embedded jotform that was used, which I based the iframe embed code.

     

     

    Anyway, in the current embedded jotform, just try to increase the iframe height to 1620px

    OR

    use this iframe code directly

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

     

    it seems to work when I test in the console.

     

     

    We will wait for your update.

    Thanks.

     

     

     

  • Profile Image

    Answered by beautifulcanvas on October 09, 2014 at 05:23 PM

    ok changed code again as above with "height:1620px" but still shifting whole page up and left ? :(

    I believe the page is now shifting up due to insufficient Height.

    Height needs to be about 1900px to work in all browsers without shifting up , but then there is still the problem with I.E shifting left ?

  • Profile Image
    JotForm Support

    Answered by BDAVID on October 09, 2014 at 07:34 PM

    Pleae try adding this property to the iFrame code:

    overflow-y:scroll;

    Hope that helps, let us know what happens.

  • Profile Image

    Answered by beautifulcanvas on October 09, 2014 at 08:13 PM

    ok added that but still shifting left, also shifting up due to insufficient height.

    form embedded as last requested with height at 1620px with overflow-y:scroll; added for your viewing pleasure.

    :( 

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 10, 2014 at 02:48 AM

    @beautifulcanvas 

    We'll check this further and get back to you as soon as we come up with a solution.

    Stay tuned!

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 10, 2014 at 03:41 AM

    Hi,

    I've found out a hack that might help fix the problem. This is to stop the event imposed on the submit button class specifically .form-submit-button. It is probably conflicting with your page since most of your page elements uses absolute positioning.

    1. First, delete your submit button. We have to replace it with the following button codes with the .form-submit-button class.

    2. Add a Text field to your form and paste the following code in the black HTML button found on the top toolbar. Check this visual guide:

    <div style="text-align:center" class="form-buttons-wrapper"><button id="input_2" type="submit" class="form-submit-button-black_blue">Make Payment and Upload File</button>&nbsp;<button id="input_reset_2" type="reset" class="form-submit-reset form-submit-button-black_blue">Clear Form</button><input style="display:none;" class="paypal-button" type="image" src="https://www.paypal.com/en_US/i/btn/btn_dg_pay_w_paypal.gif"></div>

    3. Next, we have to preserve the submit button style. To do that, copy all the CSS codes you see on this page http://www.jotformpro.com/css/styles/buttons/form-submit-button-black_blue.css?3.2.3970

    4. And then inject the CSS codes to your form. Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form

    If you need further assistance, let us know. 

    Hope this helps. Thank you!

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 10, 2014 at 03:47 AM

    @beautifulcanvas 

    By the way, you have to apply that to all the forms you have embedded on your main form.

    --

    Another solution is to use any of the following submit button widgets. I think this is much easier.

    http://widgets.jotform.com/search/submit%20button

    Thanks!

  • Profile Image

    Answered by beautifulcanvas on October 10, 2014 at 06:19 PM

    well I seem to have solved this myself, here is the final code and is the current embedded code -:

    <div style="position: absolute; left: -4px; top: 862px; width: 1308px; height: 2039px; overflow: hidden;">
    <iframe id=
    "JotFormIFrame" src="https://secure.jotformpro.com/form/42786815248971" style="width:100%; height:100%; border:none;"></iframe>
    </div>

     it seems the problem was  with the form/frame height it also seems that the overall page height/length was also a problem.

    But I think the biggest problem was its placing within the page,

    I had to move the code to a different line than Xara was placing it ?

    please check it out and let me know what you find.

    the code is now placed at line 170-172

  • Profile Image
    JotForm Support

    Answered by Charlie on October 10, 2014 at 09:10 PM

    Hi,

    Upon checking your form and website link, I am unable to replicate the problem in my end. As you mentioned, you already have fixed the problem?

    This is what I'm getting on my IE browser.

     

    Let us know if everything is working fine in your end. Rest assured that me and my colleagues will continue to look for a solution if you are still having problems with it. 

     

    Thank you.

     

  • Profile Image

    Answered by beautifulcanvas on October 11, 2014 at 03:20 AM

    no problem wiil do , and thank the team for all their help :) happy days !

  • Profile Image

    Answered by Ben on October 11, 2014 at 04:37 AM

    Hi,

    I am glad that you managed to find the solution. I can confirm that it is not shifting the page anymore for me on IE as well.

    Do let us know if you have any further questions and we will be happy to help.

    Best Regards,
    Ben

  • Profile Image

    Answered by ghf  on December 24, 2015 at 01:18 AM

    how to display message after fill form then submit but message display same page
  • Profile Image
    JotForm Support

    Answered by Charlie on December 24, 2015 at 04:47 AM

    @ghf

    I opened a separate thread for your own concern. Please refer to this link instead: http://www.jotform.com/answers/731722. We will address it shortly.

    Thank you.