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 I embed my form outside of jotform.com, the formatting rules misbehave.

    Asked by ArtArtFaces on July 21, 2015 at 12:56 PM

    My forms show up perfectly in preview mode, but when I try to embed my form on an html page, the formatting that keeps it neat looking begins to fall apart. This is especially apparent in my "Addons" and "Address" sections. On a minor note, the grey "hint" information in input boxes and the captcha don't seem to be showing up properly either. And I'm seeing bullet points outside along the left of my main blue box.

    I thought this was conflicts with my own css coding, but I tried embedding it onto a plain html file and found the exact same result. I've tested this plain html document in Firefox and Chrome.

     

    Here is the url to the original form on it's own:

    http://form.jotform.ca/form/51986109552260

     

    Here's an example of it misbehaving, even on a plain html page with no conflicting css:

     

     

    ===================================================================

    <!DOCTYPE>

     

    <html lang="en">

     

    <head>

     

      <title>HTML/Jotform Test</title>

     

      <meta charset="utf-8">

     

    </head>

     

    <body><script type="text/javascript" src="//form.jotform.ca/jsform/51986109552260"></script>

     

    </body>

     

    </html>

    ===================================================================

     

    Please let me know if there's anything I can do to fix these issues. Thank you so much! I appreciate the help as usual :)

    Page URL:
    http://form.jotform.ca/form/51986109552260

    Screenshot
    meta sections jsform iframe script
  • Profile Image
    JotForm Support

    Answered by jonathan on July 21, 2015 at 04:41 PM

    It will also help us check more on the problem if you can share to us the URL of your website page where the form was embedded. We can test on the actual form on the website.

    For initial troubleshooting, have you already tried re-embedding the form using instead its iframe embed code?

    user guide: -Getting-the-Form-iFrame-Code

    if not yet, please try first using its iframe embed.

    Make sure to clear first any previous script embed code of the form before using the iframe embed code on the website page.

    Let us know if issue remains.

    Thanks.

     

  • Profile Image

    Answered by ArtArtFaces on July 24, 2015 at 01:13 PM

    Hey thanks for the help. It turns out that when loading from an html file directly from my computer, the script doesn't work properly. But when loaded from an html file online, it works like a charm. I wasn't able to post a link to my site because it wasn't online yet, but I just launched it online and since it's loading from online, everything is working perfectly. Each browser seems to have good results. Thanks for the help!

  • Profile Image
    JotForm Support

    Answered by Kiran on July 24, 2015 at 01:51 PM

    After verifying the link of your local file being accessed, it seems that you are accessing the file directly from your PC which may result in some of the scripts might not be executed. The files needs to be accessed from the server that may be a locally installed server like xampp, wampserver, etc. so that the scripts executed properly. I've checked the file from my local server which seems to working fine.

    Hope this information helps. Let us know if you need any further help. We will be happy to help.