<? esc($page_title);?>

Before You Begin

Before you can send your first AMP email, make sure you have:

A verified sending domain with properly configured SPF, DKIM, and DMARC.
An Email Service Provider (ESP) that supports sending AMP content.
Approval for AMP sending from major email providers like Gmail (you must apply to Gmail’s AMP sender program).
Streamlined User Experience: Reduces friction by minimizing the need to open new browser tabs or navigate websites.
Fallback email versions: AMP emails must always include a traditional HTML and a plain-text alternative.

For users, it means less friction — and more action — all without leaving their inbox.

Building Your First AMP Email

1. Set up a multi-part

You must include three versions inside your email:

Plain-text version
HTML version
AMP HTML version (Content-Type: text/x-amp-html)

Most ESPs that support AMP will help you configure this properly. Or you could create your own email handler to send AMP emails like I did.

2. Write a basic AMP HTML body

Here is a very simple example that you can use as a boilerplate for your project.

						<!doctype html>
<html ⚡4email  data-css-strict>
  <head>
    <meta charset="utf-8">
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"><script>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
    <style amp4email-boilerplate>body{visibility:hidden}</style>
  </head>
  <body>
    <h1>Subscribe to Our Newsletter</h1>
    <form method="post" action-xhr="https://yourdomain.com/subscribe">
      <input type="email" name="email" required>
      <input type="submit" value="Subscribe">
      <div submit-success>
        <template type="amp-mustache">
          Success! Thanks for subscribing.
        </template>
      </div>
      <div submit-error>
        <template type="amp-mustache">
          Oops! Something went wrong.
        </template>
    </div>
    </form>
  </body>
</html>

✅ Notice:

It starts with <!doctype html>.
The <html> tag includes ⚡4email.
External AMP scripts are loaded.
Standard form submission replaced with action-xhr.
You may only require an AMP components such as amp-form if it is in use.

3. Test your AMP email

Use Gmail AMP for Email Playground or send test emails to Gmail accounts. There are two that you can use:

playground.amp.dev allows you to send tests to your gmail account
amp.gmail.dev/playground has an improved UX and gives detailed feedback

Gmail will only render AMP emails if you are an approved sender and the email passes all validations.

Better yet, use one of my publicly available examples to test out on your own!

Apply for AMP Approval

Before Gmail will render your AMP content, you must:

Have your domain authenticated (SPF, DKIM, DMARC fully passing).
Follow email best practices (low complaint rates, verified reputation).
Submit an application via Google's AMP for Email Sender Registration.

Best Practices for First AMP Emails

Always include fallback HTML and text versions.
Start simple — forms, accordions, image carousels are good beginner projects.
Avoid anything that looks spammy (no unexpected auto-loading content).
Watch your engagement rates carefully — AMP emails should improve (not harm) your sender reputation.
Keep accessibility (screen readers) in mind.

Getting started with AMP for Email may feel like a big leap, but once you send your first successful dynamic email, you'll immediately see the difference it can make in engagement and user satisfaction.

Start small, stay compliant — and get ready to rethink what email can do.

Next Topics

See which email clients and services support AMP
Explore real examples of AMP in action

Getting Started with AMP for Email