How to Add a Feedback Form to Your Email

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:

• Customer feedback. NPS scores, star ratings, free-text comments
• Event RSVPs, name, email, number of guests
• Surveys & polls, multiple-choice questions, preference selectors
• Lead capture, email, phone, company name
• Order actions, confirm, modify, or cancel an order
• Appointment scheduling, date selection, time preferences

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:

• One text input field with label "Label Name 1" and placeholder "Placeholder"
• A blue "Send" submit button (background #4a90d9, white text, 15px border radius)
• Success template: "Thank you! We saved {{input_1}}"
• Error template: "Error! Please try again."

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:

• Form settings, action URL, field management, success/error templates, visibility
• Input settings, per-field configuration (click on a specific field to see these)
• Button settings, submit button text, icon, alignment, styling

3 Configuring Form Fields

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

Field Types

Per-Field Settings

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

• Type, select from the types above
• Variable name, the form field name attribute (e.g., input_1, email, rating). This becomes the key in your stored response data.
• Show label, toggle on/off, with label text input
• Placeholder, toggle on/off, with placeholder text
• Required, marks the field as mandatory (adds required attribute and shows an asterisk after the label)
• Margins, directional padding (top, right, bottom, left) with a lock toggle for uniform spacing

Per-Field Styling

Each field's appearance can be customized individually:

• Label color, font size, font family, weight, and style
• Input background color, text color, font settings
• Input border width, color, style, and radius
• Input shadow toggle
• Input height and padding

4 Styling the Submit Button

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

Button Settings

• Button text, default "Send", change to "Submit", "RSVP", "Vote", etc.
• Alignment, left, center, or right within the form
• Icon, optionally add an icon image:
  • Upload via drag-and-drop or enter a URL
  • Position: left or right of the text
  • Width: 8–200px
  • Indent (gap between icon and text): 0–100px
• Fit to container, stretch to 100% width of the form
• Margins, directional with lock toggle

Button Styles

• Background color, default #4a90d9
• Text color, default #ffffff
• Font family, size, bold/italic
• Border radius, uniform (0–100px) or individual corners for asymmetric shapes
• Border, width (0–20px), color (uniform or per-side), and style (solid, dotted, dashed, double)

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:

• Accept POST requests with application/x-www-form-urlencoded body
• Return a JSON response (for the success/error template to render)
• Set the required AMP CORS headers:
  • Access-Control-Allow-Origin matching the email client origin
  • AMP-Access-Control-Allow-Source-Origin matching the sender email
  • Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin

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:

• Custom HTML content for the success message
• A "Start again" button to let users resubmit

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

• Background color, default transparent (inherits from container)
• Padding, directional (top, right, bottom, left)
• Border, width, color, style, and radius

Default Field Appearance

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

• Label defaults, color (#333333), font size (12px), weight (normal), family, style
• Input defaults, background (#ffffff), border color (#cccccc), border radius (0), font size (14px), shadow (off)
• Field spacing, vertical gap between fields (default 10px)

Visibility Controls

• Include In, "Both" (HTML + AMP), "HTML only", or "AMP only". Set to "AMP only" if you have a separate HTML fallback.
• Hide on Desktop / Hide on Mobile, responsive visibility toggles

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:

• amp-form-0.1.js, form handling
• amp-mustache-0.2.js, template rendering for success/error messages

9 Next Steps

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

• What are Data Storages?, where form submissions are stored, with CSV/JSON export and webhook forwarding
• How to Test and Export AMP Emails, test your form in Gmail before sending to your list
• AMP Email Whitelisting Guide, get approved by Gmail to send AMP emails with forms
• What are Data Sources?, serve dynamic data into your emails (the reverse of form collection)

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