Embedded Form: Form is not showing on the website

  • AtlanticCan
    Asked on April 16, 2024 at 3:01 PM

    I have two forms on my account and they're showing up in my dashboard but have suddenly stopped appearing on my site. I'm using the embed link and I haven't made any changes to those pages or to the form so I can't imagine what the problem could be. I've uploaded a screenshot showing the embed code on my page and the embed code from my dashboard so you can see that they're identical. Please help! We're losing potential business, especially with the quote request form which I've linked below. There's a "Contact Us" link that will take you to our other form.

    Jotform Thread 13950351 Screenshot
  • Aravir JotForm Support
    Replied on April 16, 2024 at 3:41 PM

    Hi Brian,

    Thanks for reaching out to Jotform Support. I reviewed your website and the script embed code of your form is there but it's not visible. It seems there might be a conflict between your website’s source code and the form’s script embed code. To resolve this issue, I recommend embedding the form using its iFrame code instead. Here's how you can get your form's iFrame code:

    1. From your Form Builder, go to the Publish at the top.
    2. Select Embed from the left side.
    3. Then click iFrame. Embedded Form: Form is not showing on the website Image 1 Screenshot 30
    4. Then click on Copy CodeThat's it. Embed your link on your webpage and you're done. Embedded Form: Form is not showing on the website Image 2 Screenshot 41

    Give it a try and let us know if you need any help.

  • AtlanticCan
    Replied on April 17, 2024 at 12:30 PM

    My name is Jen. Thank you for your response. The iFrame is not an acceptable solution because it doesn't work on mobile devices (tested on iOS and Android). It seems to work on desktop but even then I don't like it in the frame. Not only are multiple scroll bars confusing to some users, it's also not clear that there's more content below the fold because our footer makes it look like they've reached the bottom of the page. We have a lot of users who are not web-savvy so an intuitive interface is especially important.

    I've been using Jotform on my site for years and it's never been a problem until it suddenly broke last week. It doesn't make sense that there would be a conflict with our source code because nothing is different. I haven't made any changes to the source code or updated the theme.

  • AtlanticCan
    Replied on April 17, 2024 at 12:41 PM

    Correction: it's not working on desktop at all. It only works in my primary browser because I'm logged into Jotform. On any other browser or device it's showing the Jotform login page. I'm disabling this now so our users don't get even more confused.

  • Shane JotForm Support
    Replied on April 17, 2024 at 1:00 PM

    Hi Jen,

    Thanks for getting back to us. Unfortunately, as my colleague mentioned, there are issues with the website as I found errors when I checked the console log. See screenshot below:Embedded Form: Form is not showing on the website Image 1 Screenshot 20Can you try re-embedding your form to the website? I've cleared your form cache as a precaution. If the issue persists, you might want to consider using the iframe code. We can help you to make the necessary changes to make it work on mobile based on your requirement, as well as remove the second scroll bar.

    Give it a try and let us know if you need any other help.

  • AtlanticCan
    Replied on April 17, 2024 at 2:52 PM

    I removed the embed code, saved the page, and added the code back in. No change.

    The first two errors in the console log are related to our customer login and our search bar. Is the PrivacyCookieEnabled error something that would affect the embedded form?

    Even so, it's unlikely that there would be any conflict with our source code since our source code has not changed.

    I'm open to using iFrame code only if it can be made to appear just as it would if it were embedded, that is not in a frame that needs to be scrolled, on both desktop and mobile. If you can help me with that I would appreciate it.

  • Shane JotForm Support
    Replied on April 17, 2024 at 3:28 PM

    Hi Jen,

    Thanks for getting back to us. I cloned your form and added the iframe embed code to a local HTML file based off your site, and below are my results:

    Embedded Form: Form is not showing on the website Image 1 Screenshot 30 View on mobile:

    Embedded Form: Form is not showing on the website Image 2 Screenshot 41

    As you see, the form displays properly, and it didn't show an additional scroll bar. So, can you try embedding the following code in your website instead?

    <iframe
          id="JotFormIFrame-73205519865159"
          title="Clone of Upload Artwork - Request Free Quote"
          onload="window.parent.scrollTo(0,0)"
          allowtransparency="true"
          allow="geolocation; microphone; camera; fullscreen"
          src="https://form.jotform.com/73205519865159"
          frameborder="0"
          style="min-width:100%;max-width:100%;height:539px;border:none;"
          scrolling="no"
        >

        </iframe>
        <script src='https://form.jotform.com/s/umd/latest/for-form-embed-handler.js'></script>
        <script>window.jotformEmbedHandler("iframe[id='JotFormIFrame-73205519865159'", "https://form.jotform.com/")</script>

    Give it a try and let us know if you need any other help.

  • AtlanticCan
    Replied on April 17, 2024 at 3:49 PM

    Unfortunately when I use the code, the platform automatically changes the code to this.

    <iframe src="https://form.jotform.com/73205519865159" width="320" height="240" frameborder="0"></iframe>
    <script type="text/javascript" src="https://form.jotform.com/s/umd/latest/for-form-embed-handler.js"></script>
    <script type="text/javascript">// <![CDATA[
    window.jotformEmbedHandler("iframe[id='JotFormIFrame-73205519865159'", "https://form.jotform.com/")
    // ]]></script>

    I can change the width and height but it's still only visible if I'm logged into Jotform:

    Embedded Form: Form is not showing on the website Image 1 Screenshot 30

    If I'm not logged in it shows the Jotform login page:

    Embedded Form: Form is not showing on the website Image 2 Screenshot 41

    Since the embed code no longer works, it appears I'll have to look into a new form solution. Thank you for your help.

  • Jefferson JotForm Support
    Replied on April 17, 2024 at 4:12 PM

    Hi Jen,

    Thanks for getting back to us. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

    In the meantime, let us know if you have any other questions.

  • AtlanticCan
    Replied on April 17, 2024 at 4:20 PM

    Okay, thank you!

  • Jefferson JotForm Support
    Replied on April 17, 2024 at 6:19 PM

    Hi Jen,

    Thanks for patiently waiting. We consulted with the relevant team regarding the concern, and they advised that you need to consult with your web developer since the website is changing the code when we apply the changes to the form.

    Let us know if you have any other questions.

  • AtlanticCan
    Replied on April 18, 2024 at 9:23 AM

    I know. What I was hoping is that someone could explain why my embed code suddenly stopped working when nothing has changed on my end. I'm looking into other solutions, thanks.

  • Jefferson JotForm Support
    Replied on April 18, 2024 at 9:57 AM

    Hi Jen,

    Thanks for the feedback. I cloned your form and used embed to a local HTML file based on your site, and I was able to display the form properly. Check out my screencast below:

    Embedded Form: Form is not showing on the website Image 1 Screenshot 30

    Can you remove these specific codes from your website? This may cause the problem, since you mentioned that it changes the code when using iFrame:

    <p><iframe src="https://form.jotform.com/73205519865159" width="320" height="240" frameborder="0"></iframe>
    <script type="text/javascript" src="https://form.jotform.com/s/umd/latest/for-form-embed-handler.js"></script>
    <script type="text/javascript">// <![CDATA[
    window.jotformEmbedHandler("iframe[id='JotFormIFrame-73205519865159'", "https://form.jotform.com/")
    // ]]></script>
    </p>

    After that, you can go ahead and add your form again using Embed. Also, I checked your form and saw that it was set as private. This could be the reason why it displays the login page when you are not currently logged in. The form must be set public to allow access without requiring to log in. Let me show you how:

    1. In Form Builder, go to Publish and click on the Quick Share tab.
    2. Click the Private Form beside the Share with link, and change it to Public Form.
    3. Go to the Embed tab and click on the Copy code button.
    4. You can then add the code to your website. Embedded Form: Form is not showing on the website Image 2 Screenshot 41

    Give it a try and let us know how it goes.

 
Your Answer