Amp Forms Featured Image
timer ~ 6 min read
24188 views
rate it
17 July 2020

How to Easily Build AMP Forms for Emails

Stripo / Blog / How to Easily Build AMP Forms for Emails

Leaving comments and submitting feedback in emails is now possible. 

We’ll show how to collect 5X times more users’ reviews and feedback via email marketing. With absolutely no coding skills.

Watch our short video tutorial or keep reading the post:

Add AMP forms in emails to better communicate with your customers

Building AMP Forms for emails

Adding AMP forms to emails will take you just four simple steps:

Step 1. Creating a new Data Service

Data Service, aka data storage, is the place where you store users’ feedback and reviews.

To connect one to your emails, you need to:

  • go to Data;

  • enter the “Service” tab;

  • give it a name. We recommend that your service name is inherited from the campaign’s name;

  • then choose Data Storage — Stripo.

Important to note:

If you use the external one,  you will have to paste a link to it.

Choosing Data Storage

In one of our previous posts, we showed how to connect your Data Service to Google Sheets via Zapier. This means that all users’ feedback will be delivered and stored either on Zapier, or Google Sheets, or any other data storage that you connect to emails via Zapier.

Step 2. Adding AMP forms to emails

As we said above, building and adding AMP forms to emails with Stripo is easy as 1-2-3 for our new Drag-n-Drop AMP block.

Important to note:

This form will render only for those users whose email clients support AMP — you’ll find the list below.

Others will see a traditional form.

To add AMP form to emails with Stripo, you need to:

  • drag the AMP block into your HTML email;

The AMP Form AMP Block

  • click the “AMP HTML” icon in this template to start working on its settings;

AMP HTML Form in Emails

  • in the settings panel, select your data service. Mine for this campaign is “Forms in Emails”;

Choosing Data Service_ENG

  • now please click “Add form element” and select “Text input”;

Adding Elements to Forms

  • click “Label name” in the form to start editing it;

  • in the settings panel, in the “Show label” field enter your CTA text that starts the form;

  • enter “Placeholder” name;

  • and enter your Variable name — which will actually just help you find users’ feedback in a report;

Editing Show Label in the Form

Important to note:

Now if you want to know who of your users left this comment, you need to:

  • click the “AMP HTML” icon in your template;

  • then add a form element;

  • then choose a “Hidden Form”;

Adding Hidden Field

  • click “input_hidden” in your form;

  • then in the settings panel, enter Default Value and variable, where the “Default value” is the merge tag that retrieves the respondent’s email address. To get one, contact your ESP, or find one with Stripo.

Entering Default Value

This field will be hidden in users’ inboxes.

Getting a merge tag with Stripo:
  • highlight a piece of text in your template;

  • in the toolbar, go to “Merge tags”;

  • choose your ESP;

  • then pick “Email”;

  • copy this merge tag.

Getting Merge Tags with Stripo

Designing your form

To design this form you need to:

a) form itself
  • to design the form itself, click on the “AMP HTML” icon in your template;

  • in the settings panel, set background color, and border.

Setting Background Color and Border

b) button
  • to design button in the form, click on the button in the template;

  • in the settings panel, set button label, font type, font size, and color, text color, border-radius, and alignment.

Setting Buttons

c) notification section
  • click the “Success notification message” in your template;

  • edit text right there;

  • color for each section — by default they are green and red — and text color should be set in the settings panel.  

The Success Notification Field

Done!

Step 3. Previewing and testing

To preview your AMP form, please:

  • enter the Preview mode to check out your email’s design;

The Preview Button

  • be sure to check out both AMP HTML and traditional HTML versions.

AMP HTML and HTML Versions of Emails

To test this form, please:

  1. send a test email to 1 or a few email addresses, click the “Test” button above the template;

  2. enter your email addresses (if there are more than one, separate them with commas);

  1. in the email, leave some a comment, or even a few of them;

  2. then go to “Data Service” in your Stripo account;

  3. find a necessary service;

  4. download it as CSV file;

Downloading Reports as CSV

  1. check if your answers are recorded in the report.

Checking Out Results in CSV File

Important to note:

To send a test AMP email, please add Stripo as a trusted sender in your Gmail account.

Step 4. Building a fallback

Now that we know our AMP form works great, we may proceed to build a fallback for those users who can’t see dynamic content yet:

  • pull the Text block in your template right above or right below the AMP form;

  • enter your CTA text to encourage users to go to the external form to leave a comment on your services;

  • pull the Button block in your template;

  • design it;

  • paste the URL to your Google Form;

  • to include this structure in the HTML version of your template only, please click the “Structure” button;

  • in the settings panel, click the “Include in HTML” button.

Including Sections in HTML

Now please test this HTML form — send a test email to those colleagues whose email clients do not support AMP yet.

Coming soon

Very soon, we will show how to build forms with multiple choices.

You will enable users to choose dates, and time slots in emails, to rate you, and many more.

Word of advice

Here's just a friendly reminder. To be able to send AMP content, you need to:

  • get whitelisted with Google;

  • fix all the bugs if any occurs. You will see them in the Preview mode (otherwise users will see HTML email);

  • make sure that your ESP/CRM is capable of sending AMP emails;

  • keep in mind that currently only Gmail (both web and mobile apps on all OSs) and Mail.ru are capable of rendering AMP emails. Yahoo will join the list soon;

  • AMP emails lose their AMP components if you forward them.

Important

We created our AMP Academy with courses for newbies and geeks. There you'll find lots of useful information on how to design custom AMP emails, from carousels to real games.

Final thoughts

Now you know how to build AMP forms that help collect 5X more feedback from customers compared to external forms on your site or Google forms. 

If you have any questions, please leave a comment below. We will be happy to assist.

Add AMP forms to emails to find out what your customers really want

Nga Pham 3 months ago

Do you have ETA for this? "Very soon, we will show how to build forms with multiple choices. You will enable users to choose dates, and time slots in emails, to rate you, and many more."

Hanna Kuznietsova commented to Nga Pham 2 months ago

Nga Pham, Hello. Thank you for your question and sorry for the late reply. We're about to release multiple choices by the end of the year 2022. Once we do it, we will announce this on our blog.

Denis Giffeler 2 years ago

Can you say something more about deliverability in terms of possible spam scores and compatibility of email clients?

Hanna Kuznietsova commented to Denis Giffeler 2 years ago

Hello, Denis Giffeler. Thank you for your question. As for compatibility, currently only Gmail and Mail.ru support AMP. Very soon, Outlook com and Yahoo will join them. Regarding spam scores, as far as we know, AMP does not affect spam score at all. Our emails get delivered to users' incoming messages. And the spam score for AMP emails is the same as it was for the traditional HTML emails. Also, please familiarize yourself with the "Word of advice" section from the current blog post: It says what steps marketers need to take prior to sending out AMP emails to their contact base. Thank you

Isaac Kim 2 years ago

Great work Stripo team!

Hanna Kuznietsova commented to Isaac Kim 2 years ago

Isaac, Thank you ))) We're happy to hear it.

You might be interested in

previous next
banner9
06 June · 15 min read
10 Best Email Template Builders for 2022

Do all email template builders seem alike? You are now confused about which one to choose for your email campaigns, aren’t you? No wonder, as there are so many of them.  We will survey the most popular builders to find their distinguishing features to help you find the best HTML email builder for your current needs. I will try to create one template in all these editors with the same media files to see if the builders differ. The best...

Design Marketing Templates
24 May · 18 min read
Best Fonts for Email: Usage Tips and Tricks

One of the most striking concerns in the email production process is choosing the right font. Weight, height, width, color, shape, spacing… Does everything matter? Yes, it does, but also one of the most crucial things is to choose legible typography. In this post, we're going to show you how to choose the best professional font for email. Design beautiful emails with Stripo by using prebuilt templates Browse   HTML email fonts: General rules to follow There are three ground...

Design Templates
Greatest Examples of GIF animations in Emails_Cover Image
27 October 2021 · 10 min read
16 Great Examples of Animated GIFs in Emails

GIFs in emails will be of great use if you want to showcase your product, draw users’ attention to certain elements, or just slightly decorate your text. In this article, we have provided some of the best email gif animation examples. Examples of animated GIFs in emails Here’s a compilation of the best examples with GIFs in emails. Each GIF fulfills its mission. 1. Adidas (Source: Email from Adidas) Adidas used email animations to show what color options they have....

Design Marketing
08 April 2021 · 17 min read
14 Best Email Signature Design Examples

Good email signatures help us build our business and make a lasting impression on potential clients. Since email signature is the last thing people see in emails, we should make them creative and memorable. Let's examine useful tips and real-life examples of email signatures from famous companies and their appropriate use in personal emails and newsletters. Please be advised that all types of businesses require different professional email signatures with detailed contact information, job title, and much more. Use this...

Design Marketing Templates
Be always wide awake in recent email marketing news, guides, articles and how-to’s