Creating Comment Form on AMP pages in WordPress

In this post, I am going to show how we can create a working comments form for Google AMP pages in WordPress. You can extend this form demo to anything including contact forms, subscribe boxes etc, as long as they do not contain any banned input fields. You can read more on AMP forms here:
https://www.ampproject.org/docs/reference/components/dynamic/amp-form

Note: Integrate forms on your AMP pages if and only if your pages are served over https:// and not http:// http:// form actions are treated as invalid and won’t be cached by Google

Step #1: Create an AMP valid HTML form

There are certain things that need to be considered to create the form markup.
1- If the method is POST you cannot have “action” attribute. Instead, need to use “action-xhr”
2- If the form method is GET, action attribute works fine.
3- target attribute is mandatory and can have only “_top” or “_blank” as valid values

As you can see, I have removed the action attribute and turned it into “action-xhr”. Also, added the target=”_top” to form tag. So far, we haven’t really done anything different to default comment form accept these two attribute changes.
The important thing here is the value for the action-xhr attribute. I have changed the default URL from wp-comments-post.php to a custom ajax handler URL. You can name the action as per your preference.

Step #2: Adding the Ajax Handler

Let’s create an ajax handler function to handle the form submission.

Firstly, amp-form make an ajax request for POST method and expects a JSON in response. So make sure you ajax handler return proper JSON data with proper response headers. This response JSON data is used by the template to render success or error message after request completion.

Handling Error:

The first line of the function makes an actual save of comment and return a WP_Error instance on failure. The function returns the JSON response with error message and other data.

amp-form will treat the response as error, if the response header status is anything different then 2XX. Here, I have kept it 500. So, if the comment submit fails, the server will respond with status code 500 and the response data.

Handling Success:

Ideally, once the comment is submitted, the user sees the comment immediately above the form. This is not directly possible in AMP. So, as an alternative to this, what if we just reload the same page and navigate to form. So, when the page reloads, the user can see his/her comment. To achieve this, amp-form has a special way. The request response should return a special header in response headers. Here are the two headers needed to perform the redirection

Here, AMP-Redirect-To points to the page we want to redirect to. In our case, it’s the same page. I have added ‘#respond’ to url so the user will be navigated to bottom on page and they can see their comment.

‘AMP-Access-Control-Allow-Source-Origin’ is used to prevent CORS issues. $_REQUEST[‘__amp_source_origin’] is sent by AMP on form submission.

That’s it. You should have a fully working demo of AMP forms and WordPress comments.

Leave a Reply