Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error messages in AMP pages when using a Form #1356

Closed
dominointernet opened this Issue Aug 25, 2018 · 16 comments

Comments

Projects
None yet
2 participants
@dominointernet
Copy link

dominointernet commented Aug 25, 2018

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

This comment has been minimized.

Copy link
Member

westonruter commented Aug 29, 2018

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

This comment has been minimized.

Copy link
Member

westonruter commented Aug 29, 2018

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

This comment has been minimized.

Copy link
Author

dominointernet commented Aug 29, 2018

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

This comment has been minimized.

Copy link
Author

dominointernet commented Aug 29, 2018

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

This comment has been minimized.

Copy link
Member

westonruter commented Aug 29, 2018

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

This comment has been minimized.

Copy link
Member

westonruter commented Aug 30, 2018

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

This comment has been minimized.

Copy link
Member

westonruter commented Aug 30, 2018

@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

This comment has been minimized.

Copy link
Author

dominointernet commented Aug 30, 2018

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

@dominointernet

This comment has been minimized.

Copy link
Author

dominointernet commented Aug 30, 2018

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

This comment has been minimized.

Copy link
Member

westonruter commented Aug 30, 2018

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

This comment has been minimized.

Copy link
Author

dominointernet commented Aug 30, 2018

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.
captura de pantalla 2018-08-30 a las 23 41 48

@westonruter

This comment has been minimized.

Copy link
Member

westonruter commented Aug 30, 2018

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

@dominointernet

This comment has been minimized.

Copy link
Author

dominointernet commented Aug 30, 2018

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

This comment has been minimized.

Copy link
Member

westonruter commented Aug 31, 2018

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

This comment has been minimized.

Copy link
Member

westonruter commented Aug 31, 2018

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

This comment has been minimized.

Copy link
Member

westonruter commented Aug 31, 2018

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 );
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.