When I embed my form outside of jotform.com, the formatting rules misbehave.

  • ArtArtFaces
    Asked 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 :)

    Jotform Thread 615692 Screenshot
    Page URL: http://form.jotform.ca/form/51986109552260
  • jonathan
    Replied on July 21, 2015 at 4: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

    When I embed my form outside of jotform Screenshot 20

    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.

     

  • ArtArtFaces
    Replied on July 24, 2015 at 1: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!

  • Kiran Support Team Lead
    Replied on July 24, 2015 at 1: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.

    When I embed my form outside of jotform Screenshot 20

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