How to Include Forms in AMP (amp-form)

The amp-form extension allows you to create forms <form> to submit input fields in an AMP document.

Required Scripts

Before creating a form, you must include the required script.

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

For AMP Mustache to render success or error responses in the form:

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

Attributes

target

It indicates where to display the form response after submitting the form. The value must be _blank or _top.

action

It specifies a server endpoint to handle the form input. The value must be an https URL (absolute or relative) and must not be a link to a CDN.

The target and action attributes are only used for non-xhr GET requests. When action-xhr is not provided, AMP makes a GET request to the action endpoint and uses target to open a new window (if _blank).

action-xhr

It specifies a server endpoint to handle the form input and submit the form via XMLHttpRequest (XHR). An XHR request (sometimes called an AJAX request) is where the browser would make the request without a full load of the page or opening a new page.

This attribute is required for method=POST, and is optional for method=GET. The value for action-xhr can be the same or a different endpoint than action.

enctype (optional)

The enctype attribute specifies how form-data should be encoded before sending it to the server via the method=POST submission. The default encoding is set to multipart/form-data.

Not Allowed in AMP

• <input type=button>, <input type=image>
• Most of the form-related attributes on inputs including: form, formaction, formtarget, formmethod and others.

Example

<form method="post" action-xhr="https://example.com/subscribe.php" target="_top">
 <fieldset> 
 <label>
  <span>Name:</span>
  <input type="text" name="name" required>
 </label><br>
 <label>
  <span>Email:</span>
  <input type="email" name="email" required>
 </label><br>
 <input type="submit" value="Subscribe">
 </fieldset>
</form>

Success and Error Response

You can render success or error responses in your form by using amp-mustache, or success responses through data binding with amp-bind.

submit-success

It can be used to display a success message if the response is successful (has a status of 2XX).

submit-error

It can be used to display a submission error if the response is unsuccessful (does not have a status of 2XX).

submitting

It can be used to display a message when the form is submitting. The template for this attribute has access to the form's input fields for any display purposes.

<form ...>
 <fieldset>
  <input type="text" name="firstName" />
  ...
 </fieldset>
<div submitting>
 <template type="amp-mustache">
 Form submitting... Thank you for waiting {{name}}.
 </template>
</div>
<div submit-success>
 <template type="amp-mustache">
 Success! Thanks {{name}} for subscribing! Please check your email {{email}} to confirm!.
</template>
</div>
<div submit-error>
 <template type="amp-mustache">
  Oops! {{name}}, {{message}}.
 </template>
</div>
</form>

You need to provide a valid JSON object for responses to submit-success and submit-error. Both success and error responses should have a Content-Type: application/json header.

Redirecting after a submission

You can redirect users to a new page after a successful form submission by setting the AMP-Redirect-To response header and specifying a redirect URL. The redirect URL must be a HTTPS URL, otherwise AMP will throw an error and redirection won't occur.

AMP-Redirect-To: https://example.com/forms/thank-you
Access-Control-Expose-Headers: AMP-Redirect-To

PHP Script for Handling AMP Form

When the form is submitted successfully it should return a JSON response.

subscribe.php File

<?php

if (!empty($_POST))
{
$name = $_POST['name'];
$email = $_POST['email'];

// Send email or save in database

$domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]";

header("Content-type: application/json");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: ". str_replace('.', '-','https://example.com') .".cdn.ampproject.org");
header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
// For Redirection
// header("AMP-Redirect-To: https://example.com");
// header("Access-Control-Expose-Headers: AMP-Redirect-To, AMP-Access-Control-Allow-Source-Origin");

$amp_json = json_encode($_POST);
echo $amp_json;
exit;
}
?>