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 · 21 comments
Closed

Error messages in AMP pages when using a Form #1356

dominointernet opened this issue Aug 25, 2018 · 21 comments
Milestone

Comments

@dominointernet
Copy link

@dominointernet 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
Copy link
Member

@westonruter 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
Copy link
Member

@westonruter 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
Copy link
Author

@dominointernet 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
Copy link
Author

@dominointernet 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
Copy link
Member

@westonruter 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
Copy link
Member

@westonruter 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
Copy link
Member

@westonruter 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
Copy link
Author

@dominointernet dominointernet commented Aug 30, 2018

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

@dominointernet
Copy link
Author

@dominointernet 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
Copy link
Member

@westonruter 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
Copy link
Author

@dominointernet 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
Copy link
Member

@westonruter 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
Copy link
Author

@dominointernet 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
Copy link
Member

@westonruter 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
Copy link
Member

@westonruter 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
Copy link
Member

@westonruter 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 );
} );

@Prashanthspokesly
Copy link

@Prashanthspokesly Prashanthspokesly commented Sep 11, 2019

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
Copy link
Member

@westonruter westonruter commented Sep 18, 2019

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

@maharrx
Copy link

@maharrx maharrx commented Jun 3, 2020

@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
Copy link
Member

@westonruter westonruter commented Jun 3, 2020

@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:

@maharrx
Copy link

@maharrx maharrx commented Jun 3, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants