I solved this problem.
The solution requires quite a bit of elaboration for full understanding and justification.
The problem of the embedded iframe Mautic form on my WordPress website home page not showing up, and the hanging “please wait” Mautic form submission problem on my WordPress website, were all caused by the X-Frame-Options header setting in the configuration file of my Mautic Apache webserver.
The X-Frame-Options header, when delivered by your webserver to a web browser, indicates to the web browser which domains or websites should be allowed to embed the contents of your webserver.
For example, if you set the X-Frame-Options header setting to deny or sameorigin, in your webserver configuration file, other websites will not be able to embed the contents of your webserver in their web pages, because web browsers will block out the contents of your website that are embedded in the web pages of other websites.
Moreover, for whatever reason, if you set the X-Frame-Options header setting to deny or sameorigin, in your Mautic webserver configuration file, your Mautic form embedded on another website, such as your WordPress website, will hang when the submit button is pressed, and will keep displaying “Please wait” message. This probably happens because the X-Frame-Options set in your Mautic webserver blocks your WordPress website from getting the Mautic form message to display when the submit button of the embedded Mautic form is pressed.
The ALLOW-FROM option of the X-Frame-Options header can be used to selectively indicate which domains or websites should be allowed to embed and access the contents of your website on their web pages, but this option, as indicated in https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options and https://stackoverflow.com/questions/10658435/x-frame-options-allow-from-in-firefox-and-chrome, is not supported by Google Chrome (as of yet in September, AD 2019).
I have performed a number of tests on my Mautic webserver, and tried several variations of the X-Frame-Options header settings with the ALLOW-FROM option: it all confirmed that ALLOW-FROM option is not supported by Google Chrome.
Since Google Chrome has the biggest web browser market share, using the ALLOW-FROM option of the X-Frame-Options header is completely pointless, since it is not supported by the currently most popular web browser.
The best option to enable iframe Mautic form embedding, and resolve the hanging “Please wait” Mautic form submission problem, is to simply comment out the X-Frame-Options header settings in your Mautic webserver configuration file, such as in the following for the Apache webserver configuration file.
<IfModule headers_module>
<IfVersion >= 2.4.7 >
#Header always setifempty X-Frame-Options SAMEORIGIN
</IfVersion>
<IfVersion < 2.4.7 >
#Header always merge X-Frame-Options SAMEORIGIN
</IfVersion>
RequestHeader unset Proxy
</IfModule>
The intention of the X-Frame-Options header is good: it is for restricting what domains or websites should be allowed to use the contents or resources of your web server. However, since it is not correctly and broadly implemented by all the current web browsers, it is not an option that you can use, unless you want to block all the other websites from embedding the contents of your website. Since your Mautic contents must be embedded on another website, for your Mautic instance to be useful, your Mautic webserver must not be configured to send the X-Frame-Options header to web browsers (for the maximum web-browser compability).
There is another type of header that is related to X-Frame-Options: Content-Security-Policy. The Content-Security-Policy header tells web browsers which domains or websites should be allowed to display their contents on the web pages of your website.
That is, while the X-Frame-Options header controls which domains or websites can display the contents of your website, the Content-Security-Policy header controls which domains or websites can display their contents on the web pages of your website.
For example, if you add a Content-Security-Policy header in your WordPress Apache webserver configuration file, web browsers will display the embedded contents on your WordPress website’s web pages, only if those contents are from the white-listed domains in your website’s Content-Security-Policy header.
Properly implementing one’s website for the Content-Security-Policy header usage, and properly setting the Content-Security-Policy header in your webserver’s configuration file, can be complicated if your website uses contents from a lot of third-party domains or websites (such as embedded images from another website).
The following are some references on the Content-Security-Policy header.
https://www.w3.org/TR/CSP2/
https://content-security-policy.com/
If there are any technical inaccuracy in any of the above, let me know; I’ll correct it.