Building AMP Questionnaires_Featured Image
timer ~ 9 min read
rate it
15 June 2020

Building AMP Questionnaires with Stripo by Using Pre-Built Modules

Stripo / Blog / Building AMP Questionnaires with Stripo by Using Pre-Built Modules

Hello, everyone.

Today we start our tutorial series where we'll show how to build AMP emails sooner than you write a paragraph of promo text.

Short introduction

As you probably know, last month we ran our Stripo AMP Quiz series. It consisted of 3 emails, each contained elements of gamification. The goal of this campaign was to demonstrate some capabilities of AMP technology to our recipients. 

As a result, we received literally thousands of requests, like "How do I build such emails for my campaigns?".

This is why we decided to make these tutorials.

Let's start with the AMP questionnaire as it was the first email from our Quiz series...

Watch our short video or keep reading the post to learn to build questionnaires fast.

How to build AMP questionnaires with Stripo

Normally, to build this email element, you would have to cope with AMP code, embed multiple amp-components in your emails, connect them to your servers with the help of your developers to enable AMP in emails. With us, it's become much easier...

Just follow our step-by-step guide, and you'll design this email for your campaigns by yourself.

Step 1. Pulling a prebuilt AMP module in your template

For your convenience, I've built a ready-to-use "AMP Questionnaire" module. It consists of three questions. In fact, as a base, we used our email 1 from the series, removed all the Stripo identity, and our intro. That's it.

So your module will have three sections for questions.

Screen of Entire AMP Module

You pull this module in your template. It is included in the AMP HTML version by default. 

To pull the module into a template, please:

  • drag a 1-container template in your email;
  • go to the "Modules" section;
  • enter the "Pre-built" tab;
  • enter "Questionnaire";
  • just drag this module into your template.

Here, you can edit colors; colors for the "Question" word and its background, and colors for the fields with answers.

To do so, click the "Structure" icon, then open code editor as shown below:

Editing Colors for the Module

Editing the "Question word" section

You need to replace existing colors with the colors you need by pasting colors' numbers from our palette.

Editing the Answer Section

To get color's number, start editing text/designing buttons, and in the color palette just copy the necessary color number.

Editing the "Answers" fields design

In the "Answers" fields, you show if the answer was correct or incorrect.

To find them in your code, scroll down:

Replacing Colors for Answer Option Section

  • where "a1" is meant for the correct answer;
  • "a0" is meant for an incorrect answer.

Here you can replace a background color and a border color.

By default, when users give an incorrect answer, the "Answer field" gets red, when users give a correct answer — it gets green.

What about other elements, like questions themselves, and images, and a number of sections? You edit them in your JSON file.

BTW, this module is already connected with the JSON file. You do not need to change anything in it. We'll work on the JSON file only.

Step 2. Working on questions/Editing a JSON file

Yes, you need a JSON file for creating your Data Source — the questionnaire itself.

This file will pull information/questions from your servers into emails.

As your JSON file use the code sample given below (the one we used for our campaign):

  "items": [
      "id": 1,
      "img": "",
      "question": "How to pronounce our service’s name?",
      "text": "Fun fact. Initially, our service's name was Stripe, but when we found out that this name had been already taken, we quickly changed it. And yes, it happened on the first day at an international exhibition.",
      "wrongtext": "Oops. The correct answer is |strɪpe-oh| (|straɪp-oʊ|). Fun fact. Initially, our service's name was Stripe, but when we found out that this name had been already taken, we quickly changed it. And yes, it happened on the first day at an international exhibition.",
      "c": "1",
      "answers": [
          "ida": 1,
          "answer": "|strɪpe-oh| ( |straɪp-oʊ| )"
          "ida": 2,
          "answer": "|strɪp-oh| ( |strɪp-oʊ| )"
      "id": 2,
      "img": "",
      "question": "What is the most popular email client in the world?",
      "text": "According to studies conducted by Litmus in April 2020, Gmail is the most popular email client. Please find the detailed results of the studies here.",
      "wrongtext": "Oops. The correct answer is “Gmail”. According to studies conducted by Litmus in April 2020, Gmail is the most popular email client. Please find the detailed results of the study here.",
      "c": "2",
      "answers": [
          "ida": 1,
          "answer": "Outlook"
          "ida": 2,
          "answer": "Gmail"
          "ida": 3,
          "answer": "Apple iPhone"
          "ida": 4,
          "answer": "Apple Mail"
      "id": 3,
      "img": "",
      "question": "How to update a header or a footer in a hundred emails with Stripo at once?",
      "text": "Indeed, with Stripo, you can update any number of emails at once with a few clicks by using synchronized modules. Find more details on the feature in our article. P.S. You can always email our support team. We’re there for you ;)",
      "wrongtext": "Oops. The correct answer is “Use synchronized modules”. Indeed, with Stripo, you can update any number of emails at once with a few clicks by using synchronized modules. Find more details on the feature in our article. P.S.: You can always email our support team. We’re there for you ;)",
      "c": "3",
      "answers": [
          "ida": 1,
          "answer": "Email our support team, they’ll do it for you"
          "ida": 2,
          "answer": "Use smart elements"
          "ida": 3,
          "answer": "Use synchronized modules"
          "ida": 4,
          "answer": "Hire a team of 100 people"

Where “id” is the section with questions:

  • “id1” — is the section with question 1. All elements from “id1” to “id2” belong to question 1;

  • “img” — link to the image you are about to use in the questionnaire;

  • “question” — is the question itself;

  • ”wrongtext” — is the text your users will see if they give an incorrect answer;

  • “ida1-4” — is answer options given to users.

Edit this info manually:

  • “img": “link to your image”,

  • "question": "Your question?",

  • "text": "text that appears once any answer has been given by a user",

  • "wrongtext": "this is what users see when they give an incorrect answer",

  •  “ida": 1,
    "answer": "answer option 1"

  •   "ida": 2,
    "answer": "answer option 2"

Do the same to each section.

Our code contains three question sections. If you want just two, please remove the highlighted text from your JSON file.

Removing Sections from JSON

If you want your all questions to include 4 answer options, then in the JSON code please remove section 1, and duplicate section 2. 

Step 3. Connecting emails to a data source

This step is required for pulling data from JSON file into our questionnaires; also for showing users if their answers were correct or incorrect (users' submit responses, and our Data Source shows if the answer was correct, and gives users the correct answer)

  • open the “Data” tab;
  • go to the “Data Sources” section;

  • create a new data source;

  • enter the name of this campaign (it can be, in fact, anything);

  • in a new section below, paste your JSON file;

  • copy URL address.

Step 4. Working on data storage/Choosing where to deliver users' responses to

We need to create a data service — a place for storing users' responses.

If you want to put data on Stripo servers, please toggle the “Stripo storage” button.

If you plan on storing data in Google Drive (Spread Sheets), please follow the steps given in our “Stripo Data Service” blog post.

Step 5. Inserting endpoints in emails

Now to connect our survey to servers and data storage — to actually enable AMP questionnaire in our emails, we need to insert the endpoints that we've just built:

  • click the ⚡ HTML "Structure" icon;
  • open code editor;

Editing Colors for the Module

  • replace the link that goes after "action-xhr" in the <form id...> line with the URL address you generated in Step 4;
  • replace the source link that goes after "src=" in the <amp-list...> line with the URL address you generated in Step 3;

Inserting URL Links

  • that's it.

Step 6. Building a fallback/HTML version of a questionnaire

We need to build a fallback/HTML version of the survey for those whose email clients do not support AMP yet.

Recently we published a post where showed 10 survey invitation emails. We hope you’ll find some inspiration there.

Normally, in such emails, marketers include links to Google Forms or questionnaires on sites, where users can take the survey…

Email Invitation to Participate in Survey

(Email survey invitation from Litmus)

To add this link in your survey emails, please:

  • drag the 1-container structure right under/above the structure that contains your AMP HTML quiz;

  • fill it in with necessary content;

  • drag the “Button” basic block into this structure;

  • design it the way you like;

  • paste your URL;

  • include this structure in the HTML version of this survey email.

Including Structures in HTML Email


All other elements of this email, like logo, footer, contact information, will be included in both versions of this campaign.

If you want your users to see the Survey we’ve just created in Step 5, you may just include the link to the web version of our AMP email instead of the link to Google Forms.

To get this link, please:
  • enter the Preview mode;

  • click “AMP HTML” in the top right-hand corner;

  • click the “Copy” icon.

Word of advice

We talked a lot about AMP emails and how to use it.

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);
  • add the fallback — HTML version — in this email. We talked about it above;
  • 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 are capable of rendering AMP emails. Yahoo will join the list soon;
  • AMP emails lose their AMP components if you forward them.

Final thoughts

We've just built a questionnaire email. It works, like all AMP elements, in Gmail and Other users will see your survey fallback.

If you liked our AMP questionnaire, design a similar one for yourself

Sarah Balli 4 months ago

Does this work with Outlook?

Andre Luiz Daleffi 2 years ago

Hey! Nice post, thanks for sharing the content. Took the steps, everything went well in the construction. The preview function shows everything correct too. But, the test function sends a blank email. Exporting to gmail or embedding the amphtml code also generates a blank email. What could it be? Thanks!

Andre Luiz Daleffi commented to Andre Luiz Daleffi 2 years ago

Ps.: tried with Gmail

Hanna Kuznietsova commented to Andre Luiz Daleffi 2 years ago

Andre, Thank you so much for your comment. We are sorry it did not work well for you. If your email was not blank and worked well in the preview mode, it means that you have not been whitelisted with Google as a sender. To test your AMP emails, please add our email address as a trusted sender as shown in the screenshot . Find more details here To be allowed to send AMP emails to other recipients, you need to get whitelisted with Google. In this post, we share a step-by-step guide. Thank you for your interest in our blog and in the AMP functionality.

You might be interested in

previous next
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 Marketing
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 had....

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