Streaming live at 10am (PST)

JotForm embed Not Working In Chrome or Firefox

I have created a modal which has a jotform inside so when someone wants to upload a file to us, they need to enter an access code that I give them. It’s working great on Safari but the modal shows a blank white box in Chrome & Firefox. My site is www.pdqlitho.com, then go to customer portal, upload a file button.

Here is my share link:
https://preview.webflow.com/preview/pdq-litho-website?utm_medium=preview_link&utm_source=dashboard&utm_content=pdq-litho-website&preview=64d5b4d016a29236560b2c0667cfd846&mode=preview

Any detailed help anyone can give would be appreciated. I am very new to these so, details please!

Sincerely,

Annette

Hey Annette! Hope you’re well.

I tried out what you suggested (Customer Portal > Upload a File button), and this is what I’m seeing:

Is this expected behavior, or is this the issue that you’re referring to? Let me know!

Yes, that’s what it is supposed to look like. What browser are you using? Looks like a windows computer?

Chrome on Windows! FWIW, it works on Firefox for me as well.

Can you try accessing the website in Incognito mode in both browsers?

Ok, I just tried it in Chrome and I got the blank white box. I’m using a Mac. I’ll try firefox also

Now I tried Firefox incognito and got the blank white box also.

Can you share a screenshot of your console in Chrome? Instructions below:

I must be doing something wrong

Hmm… definitely odd behavior. @WebDev_Brandon – any thoughts/suggestions?

This might have to do with the custom script within the embed itself. Can you see if this issue persists if you just have the iframe in there, and set the height to 90%?

So, your embed code would just be:

<iframe
      id="JotFormIFrame-90566097608972"
      title="Customer Login"
      onload="window.parent.scrollTo(0,0)"
      allowtransparency="true"
      allowfullscreen="true"
      allow="geolocation; microphone; camera"
      src="https://form.jotform.com/90566097608972"
      frameborder="0"
      style="width: 1px;
      min-width: 100%;
      height:90%;
      border:none;"
      scrolling="no"
    >
</iframe>

So you’re saying to take out the code I have in there now and replace it with the one you sent?

Yes, just to try, but be sure to save the code that’s currently in your embed so we can revert back to it if need be!

Ok, well before I tried that, you gave me an idea.

Jotform provides several different code snippets, I usually just do iframe because it’s what I’m most familiar with. So I tried their embed code and that works. I only got it into the first box, the customer login area, which uses the same form as the upload a file button but it works!

I didn’t think there would be a difference in the types of code so this was a great lesson.

I sure appreciate your quick response and all your help!

Annette

1 Like

Well, shoot, now it doesn’t work again! How can that be??

Bummer! It’s not working on my end either. Can you try pasting in just the snippet I shared with you and see if it works?

Ok, I pasted in the code you gave me.

So that works in both Firefox and Chrome for me.

Cool! I’m not sure what the Javascript snippet was doing, but if this resolved your issue, it must have been the script itself causing your browser issues. I would test out the iframe functionality to make sure it works as you’d like, and if it does, you may not need your script snippet.

So which one should I use? I’m not familiar with java script or script snippet

Sorry, I should’ve been clearer.

The original code that you had in there contained both an iframe element (what I posted about above) and a Javascript snippet (same thing as a script snippet.) The Javascript snippet was the piece of code that is surrounded by <script> tags.

That snippet may have been the one causing issues for you in the browser, but you may not need to add it back in. That’s why I was suggesting you test the iframe to ensure it works as you desire, and if it does, there’s no need for the <script> snippet of code!