Engineering
September 3, 2020
May 4, 2020
Engineering
September 3, 2020
May 4, 2020
As a developer, you probably have better things to do than developing a backend for a simple form, and specially, when we talk about AMP, because something that looks as a simple task, can be tricky and time consuming to make it AMP compliance and ending suffering the typical "it worked on my machine" but, in this case, "it worked on my machine, but not on Google's cache".
To start using forms in your AMP pages, you have to add first the amp-form extension with the following script:
This script must be placed between your <head></head> tags, otherwise it won't pass the AMP document validation.
This component provides polyfills for some missing behaviors in browsers, like allowing you to submit your form without reloading the website nor opening a new tab.
This part is very similar to a normal form but, instead of having an action attribute, we have to use action-xhr for a POST request, this makes the browser to send the data using Fetch API when available, and fallback to XMLHttpRequest API for older browsers.
Notice there are two sections with submit-success and submit-error attributes. By default, this sections are hidden, they will be shown based on your form response status code so, if we receive a success status code (2XX), it will show the success section, otherwise it will show the error section.
You can also render success or error messages with values from your form response using extended templates like amp-mustache, for example, if we are receiving a form response with a message attribute either as success or error response:
We can add template sections to our HTML with a {{message}} variable:
This will replace those variables with the value in our response.
Now that we already have our frontend ready, it's time to some backend coding. In this example, we will code a small PHP script that receives a POST request and only validates that name and email properties are required, after this, it returns a JSON response with success or non-success status code based on our validation.
And now comes the tricky part, by default, if your form backend is hosted in the same domain as your form, let's say www.example.com, your form will perfectly work but, when using AMP, your page can be served by different domains like https://<your-domain>.cdn.ampproject.org, https://<your-domain>.amp.cloudflare.com, etc. This means that your server endpoint needs to implement CORS security headers, otherwise, when users try to submit your form in Google's AMP cache, it will dramatically fail and you will suffer a "it worked on my machine".
Now that we know the critical points of developing a form endpoint that works for AMP, let's see some code:
This code example authorizes any domain that makes a request to our endpoint but, based on your business needs, you maybe would like to add some security adding authorized domains on your headers.
You can also redirect the user on your form response including AMP-Redirect-To header, if you do, remember to include it on your allowed headers:
And that's it, now you can use your form in your AMP pages 🚀