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

    Validation error issue in Foundation 5 framework.

    Asked by orbitcs on May 25, 2014 at 09:11 PM

    Hi,

    I have got 2 questions regrading embedding the jotForm onto my website.

    1) I used Foundation 5 framework for my website; however, when I embedded the jquery.min.js at the bottom of the page, the form validation error message will pop up in another window instead of outlining the boxes in red. If I were to remove the jquery.min.js at the bottom of the page, I will get the red outlines outlining the input boxes but the other functions from foundation 5 will be lost on the website.

    2) Is there a way to have the thank you message pop up in the reveal modal (from foundation 5) instead of giving me another page?

    Thanks.

    Page URL:
    http://www.orbitcs.com.hk/

    JotForm Thank You message message thanks
  • Profile Image
    JotForm Support

    Answered by ashwin_d on May 25, 2014 at 10:16 PM

    Hello orbitcs,

    I did check your web page where you have embedded your form. It seems you have done a lot of changes in your form's source code. There seems to be some code conflict between your form scripts and other scripts available in your web page. Embedding your form with its iFrame embed code will solve your problem. Here are the steps you should follow :

    1. Upload your form's html file with the css and JS folder in your own server and grab the html file URL.

    2. Paste the following iFrame code in your webpage where you want to display your form:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="XXXXX" frameborder="0" style="width:100%; height:100%; border:none;" scrolling="no">

    3. Replace the "XXXXX" in the above iFrame code with the html file URL you saved in step number 1 above.

    This will ensure that there is no code conflict between the form's script and other scripts of your web page

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by orbitcs on May 25, 2014 at 10:32 PM

    Thank you for the quick reply.

    But I would like to keep the UI as it is now, is there another way to solve this conflict?

    Thanks again.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on May 26, 2014 at 01:51 AM

    Hello orbitcs,

    The steps I have mentioned in my previous reply will retain the same UI. You will embed your form with custom code in an iFrame. Please follow the steps and that should solve your problem. It will retain the same UI and at the same time rule out any conflict issue since your form will be embedded in an iFrame.

    Do get back to us if you have any questions.

    Thank you!