AMP for Email enables powerful interactivity right inside the inbox—but it comes with strict limitations. One of the most important and useful AMP components is the form component, which lets users submit data without leaving the email. In this tutorial, we’ll walk through creating a working AMP form backed by a Google Sheet using Google Apps Script.
In traditional emails, collecting data usually means linking out to a landing page. With AMP for Email, you can collect responses directly inside the email, making actions frictionless and increasing engagement. When leveraging AMP for Email to collect customer feedback, I have seen an increase in response rates as high as 300%.
For this example we'll be using Google Sheets because it is free and fast to set up, requires no backend hosting, and is accessible to anyone with a Google account.
These column headers must match the names used in your AMP form fields.
Google Apps Script is a JavaScript-based cloud scripting language that lets you automate tasks and connect to Google services. In this tutorial, we'll use it to handle form submissions and write incoming data to a Google Sheet.
We'll use this URL to route the AMP form submissions.
⚠️ Known Limitation: Google Apps Script does not currently support the AMP-requiredAccess-Control-Expose-Headersin its response headers. This means that even when the form is successfully submitted, you may not see thesubmit-successmessage render inside a real AMP email. However, the data will still be written to your Google Sheet.
Now let’s build the actual form that will live inside the email. This form submits data to your Apps Script Web App and provides inline success and error feedback using AMP’s built-in support for submit-success and submit-error blocks.
In your email's <head>, you must include the amp-form and amp-mustache components:
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
Here is a fully working AMP form you can plug into the <body> of your email:
<form method="post"
action-xhr="YOUR_WEB_APP_URL">
<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">
Thanks for signing up!
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Something went wrong. Please try again later.
</template>
</div>
</form>
Replace YOUR_WEB_APP_URL with the actual Web App URL from your Apps Script deployment. Get the full code here.
This is the form users will interact with, right inside their email.
In this step, we're going to preview and validate your AMP email using the official AMP Playground. This is a critical part of the process—it ensures your AMP code is valid and lets you send a live preview to your own Gmail inbox. Since AMP emails are only supported in certain environments (like Gmail on desktop), testing this way ensures everything is functioning as expected before you send it to others.
Before sending this to real users, you should test your AMP email.
💡 If the submit-success message does not appear after submission, that’s expected with Google Apps Script due to AMP CORS limitations. The fallback paragraph below the form will still provide confirmation.
Congratulations — if you’ve made it this far, you’ve successfully created and submitted a working AMP for Email form!
You’ve proven that it’s possible to collect user input right from an email message and store it in a Google Sheet—all without needing a landing page or traditional backend.
If you want to take things even further, continue reading to explore the more granular details, optional enhancements, and advanced integrations that build on this solid foundation.
To send AMP emails successfully in a production environment, your email must meet a few technical requirements:
Testing tools like the AMP Playground can help validate your AMP email code.
💡 Note on CORS and Success Display:
When using Google Apps Script as your backend, you'll notice CORS warnings and that submit-success blocks may not render correctly. This is because Google Scripts do not support the Access-Control-Expose-Headers AMP requires for template rendering.
✅ Your form still works and your data is collected. You can:
- View the submissions directly in the Google Sheet
- Use fallback confirmation text as shown above
- Move to a production environment that supports AMP's full CORS requirements later