Need help with formatting the invalid data page

  • Profile Image
    cmackend
    Asked on October 12, 2011 at 09:13 PM

    Our form is quite long and so when a user enteres their credit card information and they make a mistake, they get the invalid data message, but all they see is a big grey square (unless they scroll way down - which most uers don't think to do).

    Where can I edit the source or the CSS of the invalid data message so that it appears right near the top of the screen? 

    The form is here if you would like to test.

     

    http://bit.ly/o9lxkf

  • Profile Image
    idarktech
    Answered on October 12, 2011 at 10:04 PM

    Hi there,

    I have checked your form and it appears to be a problem with your form iframe height. Can you please try re-embeding your form using the default code? The default code would automatically adjust the page which fits exactly on its content so maybe this would help. You can use the code below and tell us how it goes.

     

    <script type="text/javascript" 

    src="//form.jotform.com/jsform/12092944322"></script>

     

    Just feel free to reply if you are still having trouble with your form. 

    Thanks,

    idarktech

  • Profile Image
    cmackend
    Answered on October 13, 2011 at 12:56 AM

    Thanks idarktech,

    However one reason I chose the iframe method of embedding was that the form gets cut off in some versions of IE, including IE8 & 9 I believe.  If you have those browsers you can check it at this URL.

    http://bit.ly/nobmwZ

  • Profile Image
    cmackend
    Answered on October 13, 2011 at 12:57 AM

    Also you might wonder what is the purpose of the large margin at the top? This is so that when the user reaches page 2 the form doesn't interfere with the header logo.

  • Profile Image
    liyam
    Answered on October 13, 2011 at 01:49 AM

    Hello,

    I checked your form and noticed that you have pushed your form lower, that's why it is getting cut off.

    Removing the injected CSS "margin-top:200px;" will fix your form's content.  If you want to push your form futher lower, perhaps you can do it on your web page's code instead.

    Hope this helps.

    Update:  May we know also which header logo are you referring to?

  • Profile Image
    cmackend
    Answered on October 13, 2011 at 02:02 AM

    Thanks, that is helpful. It looks like I don't need that injected CSS at all.

    However this hasn't solved the original issue of the invalid data message floating in the middle of a giant sea of gray in mozilla-based browsers.

    This raises another issue too. If my users make an error entering their payment information, is their only option to hit the back button and fill out the entire form again? 

  • Profile Image
    cmackend
    Answered on October 13, 2011 at 02:02 AM

    The header logo is the pair of figure skates.

  • Profile Image
    idarktech
    Answered on October 13, 2011 at 02:04 AM

    Your form works well on IE8, Firefox 7 and Chrome  using your form's direct link (http://www.jotform.com/form/12092944322). But when I checked your form base on the link you have posted there was a problem on IE8, it was cut off like you said. You can use this code if you like to avoid cut-off on IE, but this will add another vertical scrollbar on your website.

    <iframe name="form" id="Form" 

    style="position:absolute;left:0px;top:170px;width:895px;height:1022px;z

    -index:1;" src="//www.jotform.com/form/12092944322" 

    frameborder="0">Your browser does not support inline frames or is 

    currently configured not to display inline frames.</iframe>

     

    Let us know if you have more questions. Thank you.

     

    ~idarktech

  • Profile Image
    liyam
    Answered on October 13, 2011 at 02:25 AM

    I thought I was missing something else since there was also an injected CSS for the image. :P

    Anyway here's the explanation.  This happens because of your iframe's height, which is set to 6295px.  The error warning automatically adjusts to the center of the page.  Reducing it to the height that idarktech has suggested will make the error message viewable on the screen.

    As for your other issue, when using firefox, you will eventually have to fill up the next pages of your form since you will be pointed back to the 1st page after you pressed the back button.  But with using Chrome, all details will stay and then just scan the pages until you reach the payment information page and fill up the credit card details again.

    Let us know if you have other issues and concerns.

    Thanks.