Creating an AMP Form

You can add a ready block Form to the email template to conduct surveys and collect reviews and feedback straight in the email.

šŸ“˜

Note

To send AMP emails, you need to register with Google as a dynamic sender.

Step 1. Create a new data service.

A data service is where your users' feedback and responses will be stored.

So far, the service can be created in two ways:

As an example, let's see how to create a service in Stripo.

  1. Create an account in Stripo and enter it.
  2. In the toolbar on the left, click Data → Create your service.
Stripo Data tab with a red arrow pointing to the Create your service button
  1. Enter the service name and description.
  2. Identifier and URL address will be filled automatically.
  3. Stripo storage is enabled by default. This means that the data collected will be stored on Stripo servers, and you can download the data as a CSV file.
  4. If you plan to use external resources for data storage, enable External storage resources and add a link to the resource. This will allow you to store the data in Zapier, Google Sheets or any other data storage assigned to emails via Zapier.
Stripo Service configuration AMP form page with General information fields and Data storage toggles for Stripo storage and External storage resources enabled

Step 2. Create an AMP form in the email.

  1. Go to Messages → Messages and click the necessary email or create a new one.
  2. In the settings on the left, click Blocks and drag Form to the necessary place in the template. Click ϟHTML to open the general settings.
Blocks panel listing available email blocks, including Form, next to a Travel-themed email template
  1. In Service for data collection, enter the corresponding URL.
AMP form settings panel with the Service for data collection field filled in, an Add form element button, and a form preview with Submit, Thank you, and Error messages
  1. Click Add form element and select one of the options:
  • text input;
  • hidden field (used to transmit data without user's input, for example, send the email address or name of the respondent which are already in the database and need no new request);
  • switcher;
  • multiple choices;
  • dropdown select.

We select Text input.

AMP form settings panel showing the Add form element button, Hide form after submission toggle, and Background color option above an email template with a highlighted Submit button

Configure general settings of the structure.

Structure settings panel with Hide form after submission, Background color, Padding, and Hide element options highlighted, next to a form preview with a Placeholder_name field and Submit button
  • Hide form after submission;

By default, the form in the email will be hidden after the data is successfully submitted. A notification about successful submission will be displayed instead (for example, Thanks for your answer). You can disable the option.

  • Background color;

Choose the color in the box menu or enter your code.

  • Border;

By default, you configure common settings. Slide a toggle to configure each side separately. You can also choose the type of lines.

  • Padding;

By default, you configure common settings. Slide a toggle to configure each side separately.

  • Hide element.

This feature is disabled by default. You can enable it to hide the structure on desktop or mobile.

Edit block elements.

Input field

Text input field settings panel with Show label, Required input, Placeholder, and Variable options highlighted, next to the form preview showing the label and placeholder fields
  • Click Label name to start editing.
  • In Show label, enter the main form text. Characters are unlimited. If you only need an input line, slide the toggle left.
  • Apply Required input if you use several questions and some of them are required.
  • In Placeholder name, enter an example of the answer.
  • In Variable, enter a variable that will help find this particular data faster, for example, in a CSV file. The field supports Latin characters (uppercase/lowercase), numbers and underscore.
šŸ“˜

Important

To find out which subscriber has submitted a review, go to the structure settings by clicking the ϟHTML:

  • In Add form element, select Hidden field.
  • Enter the value in Default value. We enter %EMAIL% (the responded email address will be inserted).
Hidden field settings with Default value set to percent EMAIL percent and Variable named input_hidden_2, shown above the form preview

This field will be hidden for email recipients.

Button

Button settings panel showing Button label, Text style, and color options, with the Submit button highlighted in the form preview

Click the button and configure its parameters:

  • Label;
  • Text style;
  • Color;
  • Highlighted button color;
  • Text color;
  • Highlighted text color;
  • Background color;
  • Border radius;
  • Alignment;
  • Button with icon;
  • Adjust to width;
  • Border;
  • Padding.

The difference between a regular CTA is that this button doesn’t require a link. When clicked, it will show a notification about successful/unsuccessful submission.

Response to submission

There are two types of response notifications:

  • Green for successful submission;
  • Red for failed submission.

Click each container to configure its settings.

Blocks panel next to the form preview showing the Submit button with green Thank you and red Error response messages

Add an alternative form.

You can add an alternative form so that recipients whose email clients don’t support AMP can also leave feedback.

The easiest way is to create a Google Form or survey in SurveyMonkey. See how to do it.

You can add a link to the created form to any element in the email. As an example, we'll add a link to the button.

  • Drag a Button block to the template;
  • Edit it and add the link.
Blocks panel next to the form preview showing the Submit button with Thank you and Error response messages below it
šŸ“˜

Important

Enable HTML for this block to make sure the button is displayed only if the AMP form is not supported.

Element settings panel with Include in set to HTML, and a red arrow pointing to an HTML block containing a Button below the AMP form preview

Step 3. Test your form.

After all editing is done, click View message to see how the form is displayed on desktop and mobile in both HTML and AMP HTML.

AMP form editor showing the Tell us what you think section with a text input and Send button in the email template

In case of any errors, you will see an error notification. Click it to see the error description and fix it. If there is at least one error in the code, the AMP content will not be displayed.

AMP HTML validation failed dialog listing one error, Missing URL for attribute action-xhr in tag form, with Copy code and Fix in Code Editor buttons

Send a test message to a @gmail address. If you aren’t whitelisted by Gmail as a dynamic sender, allow dynamic emails from your address in the inbox settings.

Gmail Settings dialog Preview dynamic emails with Always allow dynamic emails from amp@gmail.dev checked and a Save button

You can also copy the code and send it as a test via Gmail AMP for Email Playground.

Email editor toolbar menu with Copy AMP HTML to clipboard option highlighted

In the Inbox, the email with AMP content will be marked with a thunder icon at the top.

Gmail inbox view of an AMP email with a lightning bolt icon highlighted next to the timestamp, indicating dynamic AMP content

Step 4. Check whether reviews are recorded.

Once you've sent the test, go to your Stripo account → Data, click the necessary service and see the statistics. You can also download this report as a CSV file.

Stripo Data services list showing the AMP form service with 6 requests and a Download CSV tooltip over the export icon

When you start sending AMP campaigns, you can see separate analytics on AMP in the general report. Go to Campaigns → Reports and click the right email. The report will show how many recipients opened the AMP version. More on AMP campaign reports.


Did this page help you?