Wordpress embedded forms require refresh to show up

Recently I've noticed that our embedded forms don't show up on the page the first time the page loads. It often requires at least one refresh (if not more) to get the form to finally appear. And it's different for each person -- sometimes I can see a form, but my coworker can't; sometimes I only have to refresh once, but another person has to refresh 4 times.

It doesn't give a message or anything, so it just looks like there's nothing there. It doesn't always happen, and it seems to be on all the forms. 

I included the link below to one of the pages where this keeps happening (our donation page), but it seems to be happening on any page where we've embedded a form. Any help would be greatly appreciated.

Thanks!

I checked your website and I was able to see the form without needing to refresh. I do understand that the issue appears to some while others can see it immediately. I suggest you use the iFrame embed code instead to prevent any issues occurring with the form. Here's how you can get the iFrame embed code: Getting the Form iFrame Code. Do let us know if the issue persists.

The iframe embed code doesn't seem to work correctly on our website. The default height tends to cut off our forms so then I have to go in and manually adjust the height so the entire form is seen. There are also gray boxes on the top and bottom of our forms. This page is an example of one I did with the iframe code: http://sjcc.org/kids-adults-families/adults-seniors/hamentashen-cooking-class/

The word press embed looks much cleaner, but the problem is persisting where the forms don't always load.

You can inject this css code to remove the gray bars on the top and bottom of the form.

.form-all{

margin-top: 0px!important;

margin-bottom: 0px!important;

}

Here's a guide how: How to Inject Custom CSS Codes

This is how it would look after injecting the css.

Then use this iFrame to adjust the height of the form correctly.

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/60347447524962" frameborder="0" style="width:100%; height:1042px; border:none;" scrolling="no"> </iframe>

So I've tried inserting the custom css on this form here: http://sjcc.org/donate-to-the-j/circle-of-friends-luncheon/ and it still has the gray bars at the bottom. Did I do the custom css wrong? I just added it to what was already in there.

Also, is there no way for the iFrame code to know the height of my form without me manually trying to adjust it for each different form?

The iFrame automatically sets the height of the form. But some forms have elements that are included in the calculation of the height or some div elements from the webpage make it appear longer. You can fix the gray bar at the bottom by setting the height to 865px instead.

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/60347447524962" frameborder="0" style="width:100%; height:865px; border:none;" scrolling="no"> </iframe>

Thanks. A height of 865px works great for that particular form. Is there a way to see the height of any given form in JotForm before I try to embed with the iFrame, or do I just have to do some trial and error until I happen to guess the right number?

It would just be great if there was a solution to my original problem, which is that the Wordpress embed doesn't always show up. Any idea what causes that?

The form's height adjusts depending on the fields added to the form. You can check the height of the form by clicking preview on a new tab.

Preview > Open in New Tab

Then on a new tab, Right click on the form and select Inspect.

With the web inspector, you can see the height of the form at its current state and its width.

As for your concern about the wordpress embed, there might be some conflicting script between the webpage and the form that is causing the form to not show up. However, using the iFrame embed should prevent any conflicts from happening again.

OK, so I've been relatively successful at adjusting the iFrame heights, but it appears to only work on desktops. If I get the form to a place where I can see it in its entirety on my desktop monitor, the bottom of the form is still cut off on mobile. If I adjust the height enough so that I see the full form on mobile, I have a huge gray box at the bottom of the desktop version. I injected the custom css from above, but it made no difference. Am I missing a step to make the form display correctly on mobile?

Is there a way to figure out what conflicting script may be messing with using the wordpress embed? Besides the fact that the forms didn't always show up, they looked much better than the iFrame. 

Thanks!

You may try enabling the the mobile responsive features: https://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive 

Let us know if you need more help.