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 🚀
At Arengu, we understand building this kind of forms can be time consuming, so we support AMP with our forms API. To use it you have to create first a form with all needed fields.
Specify user friendly field IDs as they will be used in your HTML code. In this example our field IDs are name and email.
Once you create and publish your form, you can point your AMP form to our Submission API replacing :id by your form ID which you can find in your form settings or your Embed tab.
Our endpoint will automatically handle all the logic and validations you visually builded in our platform, so it avoids you coding another backend for a simple form.
You can also create custom integrations with our integration flows that will be executed once someone submits a form.
In this example, we have built a simple integration flow that sends a Slack message and subscribes the user to a MailChimp list.
If you don't find the integration you need, you can always use the HTTP request flow action that supports anything that has an API.
Try Arengu for free and avoid wasting developing resources for a simple AMP form.