Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.Sign up
Error messages in AMP pages when using a Form #1356
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.
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/
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
That js.187 line says:
I'm not sure but I wonder if there could be an issue with the way your plugin deals with Ajax.
NOTE: we've also tested a simpler scenario using WP default theme (twenty seventeen and deactivating CF7 Redirection plugin.
Thanks in advance,
I'm seeing the same.
The response headers from the request are:
From looking at the MDN docs on
If you remove that header, does it work?
Do you mean our website header, I mean the one used by Wordpress?
So refresh and test now please.
I've also made a tiny change on the wepage.
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.
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]
referenced this issue
Aug 30, 2018
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
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.
We could also use DIVI's Theme Form Module (our site uses DIVI Theme already).
Would that be better you think?
Unfortunately the plugin CF7 Redirect doesn't seem to work: the AMP page doesn't redirect me to the "thanks" page.
Thanks page is: https://dragutierrez.com/gracias/
I keep on getting the same errors:
I did get an improvement now: we get to the Thanks Page if we fill up all the mandatory fields.
Thanks a lot for your help!