MiN8T All Insights
Guide 12 min read

How to Add a Feedback Form to Your Email

M
MiN8T Team
Email Engineering
April 12, 2026

1 What is the AMP Form Block?

The AMP Form block lets recipients submit data directly inside their email — no browser redirect, no landing page. They fill out a form, hit submit, and see a confirmation message, all without leaving their inbox.

This is powered by AMP for Email's <amp-form> component. The form submits via XHR (background HTTP request), so the email client handles everything inline. It works in Gmail, Yahoo Mail, Mail.ru, FairEmail, and AOL.

Use cases:

i

In email clients that don't support AMP, the form block is hidden by default and the standard HTML fallback is shown. You can control this with the "Include In" setting: both, HTML only, or AMP only.

2 Adding a Form to Your Email

Step 1: Drag the AMP Form Block

In the editor's block palette (left sidebar), find the AMP Form block under the AMP section. Drag it into a container in your email template.

Step 2: Default Form Appears

A form is created with sensible defaults:

Step 3: Select the Form

Click on the form in the canvas to select it. The property panel switches to show three sections organized by category:

3 Configuring Form Fields

Each form can have multiple fields. Add, remove, duplicate, and reorder fields from the form's property panel.

Field Types

Type HTML Element Use Case
Text <input type="text"> Names, short answers, general text
Email <input type="email"> Email addresses (browser-validated format)
Tel <input type="tel"> Phone numbers (mobile keyboard on phones)
Number <input type="number"> Quantities, ratings, numeric values
URL <input type="url"> Website addresses
Date <input type="date"> Date selection with native picker
Textarea <textarea> Long-form feedback, comments (min-height: 80px)
Select <select> Dropdown choices (configure options list)
Hidden <input type="hidden"> Campaign ID, template version, tracking data

Per-Field Settings

Click on any field in the form to open its properties:

Per-Field Styling

Each field's appearance can be customized individually:

✓

Use hidden fields to pass metadata with every submission — like a campaign ID or template version. The recipient never sees them, but they appear in your stored responses.

4 Styling the Submit Button

The submit button has its own dedicated property panel with settings and styles tabs.

Button Settings

Button Styles

5 Setting the Action URL

The action URL is where form submissions are sent. You have two options:

Option A: MiN8T Data Storage

Select a Data Storage from the dropdown. MiN8T automatically sets the action URL to the storage's public endpoint. This is the easiest path — submissions are stored in MiN8T's dashboard, exportable as CSV/JSON, and optionally forwarded via webhook.

Option B: Custom URL

Enter any HTTPS URL. The form will POST to that endpoint. Your server must:

!

AMP forms require action-xhr (not action). MiN8T handles this automatically at export time — you just enter the URL, and the serializer generates the correct attribute.

6 Success & Error Messages

After the user submits the form, AMP displays a response message inside the email. MiN8T generates three states:

Submitting State

A "Submitting..." text appears while the XHR request is in flight. This is automatic and not editable.

Success Template

Shown when the endpoint returns a 2xx response. The default is:

Thank you! We saved {{input_1}}

You can customize this in the Success tab of the form properties. The template uses amp-mustache syntax, so you can reference submitted field values with {{fieldName}}. For example, Thanks {{name}}, we'll contact you at {{email}}.

The success message is styled with green text (#28a745) by default. You can configure:

Error Template

Shown when the endpoint returns a non-2xx response or the request fails. The default is:

Error! Please try again.

Styled with red text (#dc3545) by default.

Hide After Submission

By default, the form hides itself after successful submission (via AMP's on="submit-success:form-{id}.hide" action). The success message replaces the form fields, giving a clean confirmation experience.

7 Form-Level Styling

Beyond individual field and button styling, the form block itself has global style options:

Form Background & Borders

Default Field Appearance

Set defaults that apply to all fields (individual field styles override these):

Visibility Controls

8 How It Exports

When you export or send a test email, MiN8T generates proper AMP form markup:

<form id="form-abc123"
      method="post"
      action-xhr="https://api.min8t.com/emailformdata/v1/storage/{hash}/{name}"
      on="submit-success:form-abc123.hide">

  <!-- Fields -->
  <div style="padding: 0 0 10px 0;">
    <label style="color: #333; font-size: 12px;">
      Your Name*
    </label>
    <input type="text" name="input_1"
           placeholder="Enter your name"
           required
           style="width: 100%; padding: 8px 12px;
                  border: 1px solid #ccc; font-size: 14px;" />
  </div>

  <div style="padding: 0 0 10px 0;">
    <label style="color: #333; font-size: 12px;">
      Your Feedback
    </label>
    <textarea name="feedback"
              placeholder="Tell us what you think"
              style="width: 100%; min-height: 80px;
                     padding: 8px 12px; border: 1px solid #ccc;">
    </textarea>
  </div>

  <!-- Submit Button -->
  <div style="text-align: center; padding: 10px 0 0 0;">
    <button type="submit"
            style="background: #4a90d9; color: #fff;
                   padding: 10px 20px; border-radius: 15px;
                   font-size: 14px; border: 1px solid #3a7bc8;
                   cursor: pointer;">
      Send
    </button>
  </div>

  <!-- Response States -->
  <div submitting>
    <template type="amp-mustache">
      <p style="color: #6b7280;">Submitting...</p>
    </template>
  </div>
  <div submit-success>
    <template type="amp-mustache">
      <div style="color: #28a745; margin-top: 12px;">
        Thank you! We saved {{input_1}}
      </div>
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      <p style="color: #dc3545; margin-top: 12px;">
        Error! Please try again.
      </p>
    </template>
  </div>
</form>

MiN8T automatically includes the required AMP scripts in the document head:

i

The action-xhr attribute ensures the form submits via XHR (not a page navigation). The on="submit-success:..." attribute triggers form hiding after success. Both are set automatically by MiN8T's serializer.

9 Next Steps

Now that you know how to build AMP forms, explore these related guides:

Last updated: April 2026. All details verified against MiN8T's actual codebase implementation.