How to develop & implement AMP forms on AMP pages



Table of contents

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".

Add the amp-form extension

To start using forms in your AMP pages, you have to add first the amp-form extension with the following script:

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></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.

Creating your AMP form HTML

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.

<form action-xhr="https://www.example.com/endpoint">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <input type="submit" value="Submit">
  <div submit-success>Your form was successfully submitted</div>
  <div submit-error>There was an error sending your form. Please try it again.</div>
</form>

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

{
  "message": "Thank you! We have received your form successfully."
}

‍We can add template sections to our HTML with a {{message}} variable:

<form method="post" action-xhr="https://www.example.com/endpoint">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <input type="submit" value="Submit">
  <div submit-success>
    <template type="amp-mustache">
      {{message}}
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      {{message}}
    </template>
  </div>
</form>

‍This will replace those variables with the value in our response.

Developing a form endpoint

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:

<?php
const SUCCESS_CODE = 200;
const SUCCESS_MESSAGE = 'Thank you! We have received your form successfully.';
const ERROR_CODE = 400;
const ERROR_MESSAGE = 'There are some missing values, please review your form.';

$host = isset($_SERVER['HTTP_X_FORWARDED_HOST'])
  ? $_SERVER['HTTP_X_FORWARDED_HOST']
  : $_SERVER['HTTP_HOST'];
header('Content-Type: application/json');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
header('Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin');
header('AMP-Access-Control-Allow-Source-Origin: https://' . $host);

if (!isset($_POST['name']) || empty($_POST['name'])) {
  $error = [
    'message' => ERROR_MESSAGE;
  ];

  $json = json_encode($error);
  http_response_code(ERROR_CODE);
  die($json);
}

$success = [
    'message' => SUCCESS_MESSAGE;
];

$json = json_encode($success);
http_response_code(SUCCESS_CODE);
die($json);

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

<?php
header('Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin, AMP-Redirect-To');
header('AMP-Redirect-To: https://www.example.com/thank-you');

‍And that's it, now you can use your form in your AMP pages 🚀

Save time and use a form builder that supports AMP

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.

<form method="post" action-xhr="https://api.arengu.com/forms/:id/submissions/">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
</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.

How to develop & implement AMP forms on AMP pages

Jacobo Vidal

Add the amp-form extension

Creating your AMP form HTML

Developing a form endpoint

Save time and use a form builder that supports AMP

You might like to read

Conditional logic in forms: Interactive and smart forms for a dynamic behavior

Product Update - January, 2021

Analyzing CARTO's user onboarding, with Florence Broderick

Subscribe to our newsletter

Product

Company

Help