Error messages in AMP pages when using a Form

[dominointernet]

Hello,

The Form at the bottom of our web pages briefly displays a “Form sent successfully” message and then redirects users to a “Thanks” page. The form uses ContactForm7.

Unfortunately, the AMP version of these same pages doesn’t do either one thing or the other: no succesful message and no redirection.
We noticed we don't get in the AMP pages the usual message on mandatory fields that are left empty by the user.

And we found 2 error messages in our code (when we check the page in Developer mode in Chrome). See below.

The problem is that users don’t have any verification that their form was sent to us so they insist clicking on the Submission button several times, creating fustration on them and filling up our email foder with dozens of copies of the same forms.

Original URL (CF7 works great here): https://dragutierrez.com/tratamientos/medicina-estetica/dermapen/
AMP URL (where CF7 doesn't work): https://dragutierrez-com.cdn.ampproject.org/c/s/dragutierrez.com/tratamientos/medicina-estetica/dermapen/?amp

These are the error messages we get:

---

Powered by AMP zap HTML – Version 1534444305877 https://dragutierrez-com.cdn.ampproject.org/c/s/dragutierrez.com/tratamientos/cirugia-plastica/ginecomastia/precio-de-la-ginecomastia/?amp
dragutierrez-com.cdn.ampproject.org/:1 Failed to load https://dragutierrez.com/wp-admin/admin-ajax.php?action=ampcf7_submit_form&_wp_amp_action_xhr_converted=1&__amp_source_origin=https%3A%2F%2Fdragutierrez.com: The 'Access-Control-Allow-Origin' header contains the invalid value '*.ampproject.org'. Origin 'https://dragutierrez-com.cdn.ampproject.org' is therefore not allowed access. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
log.js:187 Form submission failed: Error: XHR Failed fetching (https://dragutierrez.com/...): Failed to fetch ... log.js:187

---

That js.187 line says:
fn.apply(this.win.console, messages);

I'm not sure but I wonder if there could be an issue with the way your plugin deals with Ajax.
Any help appreciated.

NOTE: we've also tested a simpler scenario using WP default theme (twenty seventeen and deactivating CF7 Redirection plugin.

Thanks in advance,

Jose Delgado

[westonruter]

I'm seeing the same.

Access to fetch at 'https://dragutierrez.com/wp-admin/admin-ajax.php?action=ampcf7_submit_form&_wp_amp_action_xhr_converted=1&__amp_source_origin=https%3A%2F%2Fdragutierrez.com' from origin 'https://dragutierrez-com.cdn.ampproject.org' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains the invalid value '*.ampproject.org'. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

The response headers from the request are:

access-control-allow-credentials: true
access-control-allow-origin: *.ampproject.org

From looking at the MDN docs on Access-Control-Allow-Origin, it doesn't seem that *.ampproject.org is not a valid header. Wildcards cannot be used for subdomains.

If you remove that header, does it work?

[westonruter]

I can see that the plugin isn't properly handling form requests form the AMP cache. The AMP-Access-Control-Allow-Source-Origin response header is not getting set.

[dominointernet]

Do you mean our website header, I mean the one used by Wordpress?
I just deleted what we had (a Facebook Pixel and Google Recaptcha) and added this instead:

So refresh and test now please.
(Make sure the page has loaded that new and almost empty header before you test it of course)

[dominointernet]

I've also made a tiny change on the wepage.
It's now called:
¿Cuál es el precio de la ginecomastia ?
instead of (notice the extra space before the closing "?" character):
¿Cuál es el precio de la ginecomastia?

I made it so you can make sure you're using the new version of the website with no header content.

Unfortunately my test indicated the same errors.
:(
Any other suggestion?

Jose

[westonruter]

Website header? No. I'm talking about this HTTP response header:

access-control-allow-origin: *.ampproject.org

Where is that coming from? You have some theme or plugin code that is sending that.

[westonruter]

The full response headers coming from your ajax handler at https://dragutierrez.com/wp-admin/admin-ajax.php are:

HTTP/1.1 200 OK
Date: Thu, 30 Aug 2018 00:16:29 GMT
Content-Type: application/json
Content-Length: 104
Connection: keep-alive
Set-Cookie: __cfduid=[redacted]; expires=Fri, 30-Aug-19 00:16:27 GMT; path=/; domain=.dragutierrez.com; HttpOnly
X-Robots-Tag: noindex
X-Content-Type-Options: nosniff
Expires: Wed, 11 Jan 1984 05:00:00 GMT
Cache-Control: no-cache, must-revalidate, max-age=0
X-Frame-Options: SAMEORIGIN
Referrer-Policy: strict-origin-when-cross-origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *.ampproject.org
AMP-Access-Control-Allow-Source-Origin: https://dragutierrez.com
Vary: Accept-Encoding
Content-Encoding: gzip
Expect-CT: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
Server: cloudflare
CF-RAY: [redacted]

The Access-Control-Allow-Origin line there is the one I'm inquiring about.

[westonruter]

@dominointernet I've created a fix for the issue that I've been able to reproduce using Jetpack Contact Form module. See #1382 (comment) for a new plugin build of 1.0-beta2.

However, I can see that Contact Form 7 is not going to work currently with AMP because when a submission is received it does not do a redirect to the success page. All AMP form submissions are done via XHR/Ajax, and AMP requires an AMP-Redirect-To header to be sent in response to the Ajax request to cause that redirect behavior. The AMP plugin does this automatically when a plugin (like Jetpack) does a regular wp_redirect() call. However, CF7 is not doing this, so it won't currently be compatible.

It's on our list to look at improving Contact Form 7 support for AMP. But in the mean time, it's not going to work. See also #1378.

[dominointernet]

I see.
What if we add CF7 Redirect to it?
https://wordpress.org/plugins/wpcf7-redirect/

[dominointernet]

We could also use DIVI's Theme Form Module (our site uses DIVI Theme already).
The reason we don't want to use Jetpack is because it's a bit heavy.
We'd rather prefer to use less plugins to improve the web speed and make maintenance easier (by removing CF7 and CF7 Redirect) and use just Divi Form Module.

Would that be better you think?

[westonruter]

What if we add CF7 Redirect to it?

That looks like it could solve the problem. I see it does a wp_redirect() which is what is required. I haven't tested however.

[dominointernet]

Unfortunately the plugin CF7 Redirect doesn't seem to work: the AMP page doesn't redirect me to the "thanks" page.

AMP Page: https://dragutierrez-com.cdn.ampproject.org/c/s/dragutierrez.com/tratamientos/medicina-estetica/dermapen/?amp

Thanks page is: https://dragutierrez.com/gracias/

I keep on getting the same errors:

Powered by AMP ⚡ HTML – Version 1535566825959 https://dragutierrez-com.cdn.ampproject.org/c/s/dragutierrez.com/tratamientos/medicina-estetica/dermapen/?amp
dragutierrez-com.cdn.ampproject.org/:1 Failed to load https://dragutierrez.com/wp-admin/admin-ajax.php?action=ampcf7_submit_form&_wp_amp_action_xhr_converted=1&__amp_source_origin=https%3A%2F%2Fdragutierrez.com: The 'Access-Control-Allow-Origin' header contains the invalid value '*.ampproject.org'. Origin 'https://dragutierrez-com.cdn.ampproject.org' is therefore not allowed access. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
log.js:187 Form submission failed: Error: XHR Failed fetching (https://dragutierrez.com/...): Failed to fetch​​​
va @ log.js:187
f.Ja @ log.js:242
f.error @ log.js:257
(anonymous) @ amp-form.js:651
Promise.then (async)
qb @ amp-form.js:643
(anonymous) @ amp-form.js:478
Promise.then (async)
jb @ amp-form.js:470
db @ amp-form.js:416
(anonymous) @ amp-form.js:345
Promise.then (async)
push.f.l.ba @ amp-form.js:235
qh @ v0.js:181
f.execute @ xhr-utils.js:524
vj @ crypto-impl.js:85
custom-element.js:1084 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://dragutierrez.com/wp-admin/admin-ajax.php?action=ampcf7_submit_form&_wp_amp_action_xhr_converted=1&__amp_source_origin=https%3A%2F%2Fdragutierrez.com with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

See attached screen capture.

[westonruter]

@dominointernet Please try with the plugin build ZIP I linked to at #1382 (comment). That has the fix for the CORS issue.

[dominointernet]

I did get an improvement now: we get to the Thanks Page if we fill up all the mandatory fields.
But we don't get any warning message if one mandatory field is left empty.
We get a error message in the code though.
This is it:

Failed to parse response JSON: SyntaxError: Unexpected token < in JSON at position 0
va	@	log.js:187
f.Ja	@	log.js:242
f.error	@	log.js:257
(anonymous)	@	amp-form.js:626
Promise.then (async)		
mb	@	amp-form.js:620
pb	@	amp-form.js:607
(anonymous)	@	amp-form.js:475
Promise.then (async)		
jb	@	amp-form.js:470
db	@	amp-form.js:416
(anonymous)	@	amp-form.js:345
Promise.then (async)		
push.f.l.ba	@	amp-form.js:235
qh	@	v0.js:181
f.execute	@	xhr-utils.js:524
vj	@	crypto-impl.js:85

Thanks a lot for your help!

Jose

[westonruter]

You can bypass that issue that by ensuring that you use HTML5 form validation attributes on your form fields. So required inputs should have the required HTML attribute.

[westonruter]

You also need to make sure that the novalidate attribute is removed from the form element via:

add_filter( 'wpcf7_form_novalidate', '__return_false' );

[westonruter]

And a quick way to ensure that required attribute is used:

add_filter( 'wpcf7_form_elements', function( $elements ) {
	return str_replace( 'aria-required="true"', 'required', $elements );
} );

[Prashanthspokesly]

Hi,
As im also facing the same issue as metioned by dominointernet its not fetching the url in ampcontact form7 what is the solution for this issue

[westonruter]

@Prashanthspokesly Here is an extension to the AMP plugin which adds basic support for Contact Form 7: https://gist.github.com/westonruter/3501016b0d44af45d878067b1856e023

[maharrx]

@westonruter the plugin does not work for me. I get following error:

xhr-impl.js:87 POST https://minklashbarny.com/passages/contact/?_wp_amp_action_xhr_converted=1&__amp_source_origin=https%3A%2F%2Fminklashbarny.com

[amp-form] Form submission failed: Error: HTTP error 406​​​ at bb (https://cdn.ampproject.org/v0.js:29:169) at Ya.f.createError (https://cdn.ampproject.org/v0.js:24:149) at https://cdn.ampproject.org/v0.js:143:399 at new Promise (<anonymous>) at sg (https://cdn.ampproject.org/v0.js:143:334) at https://cdn.ampproject.org/v0.js:145:267

[westonruter]

@rajmdtu Try navigating to https://minklashbarny.com/passages/contact/?_wp_amp_action_xhr_converted=1&__amp_source_origin=https%3A%2F%2Fminklashbarny.com

Notice the error message:

Not Acceptable!
An appropriate representation of the requested resource could not be found on this server. This error was generated by Mod_Security.

You need to adjust the ModSecurity rules to allow the __amp_source_origin query parameter. This has come up before:

• https://wordpress.org/support/topic/your-submission-failed-the-server-responded-with-code-2/
• https://wordpress.org/support/topic/your-submission-failed-the-server-responded-with-code/

[maharrx]

Thank you for the quick response.
And Sorry for the duplicate (which I deleted now).