ContactForm7 在提交时显示 POST & GET 错误 WordPress Woocommerce 站点

Question

I have developed & deployed an website my WordPress woocommerce website recently and a strange error pop-up after I made the website live on its domain. Previously it was working on development sub-domain.

I am facing issue with ContactForm7 submission, I get errors when someone want to submit the contactform7

The Error logged on the console output is:

The resource https://domainhidden/wp-content/themes/Divi/core/admin/fonts/modules.ttf was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
2DevTools failed to parse SourceMap: https://domainhidden/wp-content/themes/Divi/js/custom.unified.js.map
api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2 

POST https://domainhidden/wp-json/contact-form-7/v1/contact-forms/45143/feedback?_locale=user 403 (Forbidden)
F @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
(anonymous) @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
tryCatch @ wp-polyfill.min.js?ver=7.4.4:1
invoke @ wp-polyfill.min.js?ver=7.4.4:1
t.<computed> @ wp-polyfill.min.js?ver=7.4.4:1
n @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
a @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
(anonymous) @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
(anonymous) @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
(anonymous) @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
(anonymous) @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
I @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
(anonymous) @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
f @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
(anonymous) @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
I @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
(anonymous) @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
(anonymous) @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
f @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
(anonymous) @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
(anonymous) @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
t @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
(anonymous) @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
R @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
(anonymous) @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
(anonymous) @ index.js?ver=5.4:1
(anonymous) @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
(anonymous) @ index.js?ver=5.4:1
(anonymous) @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
X @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
f @ index.js?ver=5.4:1
(anonymous) @ index.js?ver=5.4:1
Show 2 more frames
api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2 

GET https://domainhidden/wp-admin/admin-ajax.php?action=rest-nonce 400 (Bad Request)
(anonymous) @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
Promise.catch (async)
X @ api-fetch.min.js?ver=a783d1f442d2abefc7d6dbd156a44561:2
f @ index.js?ver=5.4:1
(anonymous) @ index.js?ver=5.4:1
index.js?ver=5.4:1 
Response {type: "basic", url: "https://domainhidden/wp-admin/admin-ajax.php?action=rest-nonce", redirected: false, status: 400, ok: false, …}

I have already tried some of solutions found like:

1. Clearing Cache files
2. removing the existing .htaccess file and adding the default WordPress's .htaccess
3. Updating Php memory limit did 1024M and 512M
4. Regenerating permalink via settings/permalink (just clicked on save button with existing settings)

I referred a lot of this error but cannot find any solution. My contact form 7 test is working properly. I get Test email from it. But it doesn't work on the website.

Answer 1

I've only seen this happening on one site that I manage. It is apparently due to a conflict with another plugin that has limited access to the WP API by only allowing logged in users to use the REST API.

To disable submission via the REST API, which is what appears to be causing your problem, you can update your wp-config.php with this line:

define( 'WPCF7_LOAD_JS', false );

or add to your functions.php

add_filter( 'wpcf7_load_js', '__return_false' );

This disables the ajax submission. The form will submit via "POST" method and should then work.

Answer 2

Contact Form 7 has some issues since the last update two month ago as you can see here: https://wordpress.org/support/plugin/contact-form-7/reviews/?filter=1

I'm afraid to recommand to not use Contact Form 7 anymore.

Answer 3

As per @flexy's comment, I read that recent update on cf7 is unstable and has caused a lot of issues. That is when I realised that before going live I, too had updated all the plugins.

So the solution was:

Downgrade the contact form 7 to older stable version Use WP Rollback plugin to downgrade the version

The version which is unstable of cf7 is 5.4.0

What worked is downgrading to one version back 5.3.2