Page with contact form freezing and uneditable

Hello, I’m trying to edit my contact page in Pro, but as soon as I open the Pro builder, it freezes while and just displays the “spinning circles”:

I get the message:
“Loading the preview took longer than expected. There may be script conflicts on this page.”

I am using Dashlane in Chrome, which I know is incompatible with X Pro, so I have ensured that the Chrome extension has been turned off (I’ve been able to build the site up until now so I know this isn’t the issue). I’m also using Ninja Forms, but was able to customize the form to its current state (Which was a LOT of tweaking, and it was fine until now).

When I go to the little (“squares within a square”–not sure what it’s called?) button on the bottom left:

I’m able to edit the section, but when I click ‘Save’, the green “success” status bar at the top does not fully reach the end (in essence not saving the change):

Could you tell me what the problem is? Thanks in advance.

Hi there,

There might be a custom code you have in the Contact page which is causing the issue.

I suggest that you install the plugin below and clone your contact page:

After that go to the cloned page and remove the elements one by one and save and reload the page to see which element is causing the problem.

Hope i helps.

Thanks @christopher.amirian, I followed your recommendation and have isolated the problem, which is coming from Google Maps embed code. I’ve had this site up for the last 2 months and it was displaying fine, so I’m not sure why it’s causing the issue now… do you or your team have any idea / suggestions?

Hi there,

I am not sure why embed code is not working on your case. I suggest that you avoid using that element and use the Google Mao element instead which is using the Javascript API of the map instead of iFrames and is a more robust way of adding Google Maps:

Hope it helps.

Thank you, that does help. I created an API key through the Google API Console, as well a key created by the “Google Maps API” plugin. The site is displaying the map on the front end, but in Pro, it gives me the “Oops something went wrong” message, and that the page “didn’t load Google Maps correctly”. Do you know why this error message is showing?

Hi there,

Your API key is required to have valid referrer, with the error below.

In your API Key setting, you should add your URL as one of your allowed referrers, or if you don’t like to have restrictions then disable it under Key restriction section, and set it to None.

Hope this helps.

Oh, I didn’t realize that the HTTP referrer had to be the exact page’s URL (and not the general website address). I’ve updated the referrer to the exact page’s URL as you suggested, as I definitely want to have an HTTP referrer for security reasons, but it’s still showing the same msg in the Pro builder:

Hi there,

Maybe it doesn’t take effect immediately when you changed and test it because it’s okay now. The map is displaying and no google map error, please check it again this time.

Thanks!

Yes @Rad, that is what I mean, the Pro builder is unable to capture the scripts loaded by the map. Just think that this should be fixed, because it’s confusing. Glad to hear that your team is working on it.

Hi there,

You mean you can’t load the builder? I just tried it and it loads and I can edit the page. But yes, the map isn’t loading and it’s known issue since the builder is unable to capture the scripts loaded by the map. Our developers are still into it, but that shouldn’t hinder the capability of the builder.

I tried it for the 3rd time and I’m really able to load and edit your contact page.

Thanks.