Design Templates How-to AMP
~ 9 min read
3 comments
6526 views
rate it
15 June

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

Running-Quizzes_AMP-Emails

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.

Adding a Prebuilt Module with AMP Questionnaire into Email

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": "https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/29111588071244597.jpeg",
      "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": "https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/83411588071269619.jpeg",
      "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": "https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/64191588071296283.jpeg",
      "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.

Creating New Data Source

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.

Building a New Data Storage by Using Stripo Data Service

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

Important:

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.

Getting Shareable Link

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 Mail.ru 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 Mail.ru. Other users will see your survey fallback.

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

Andre Luiz Daleffi 4 months 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 4 months ago

Ps.: tried with Gmail

Hanna Kuznietsova commented to Andre Luiz Daleffi 4 months 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 info@stripo-test.email email address as a trusted sender as shown in the screenshot https://prnt.sc/tazlyj . Find more details here https://stripo.email/blog/preview-and-send-test-email-in-stripo/#amp-html-emails 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. https://stripo.email/blog/how-to-get-whitelisted-with-google-to-send-amp-emails-our-personal-experience/ Thank you for your interest in our blog and in the AMP functionality.

You might be interested in

← previous next →
04 November · 17 min read
Christmas Email Marketing 2020-2021: Guide with Ideas and Examples

Christmas is the best time of the year. People are full of expectations and hopes for miracles and happiness to come or stay. And marketers are full of hopes to break their selling record ;)  (Source: Email template by Stripo) How can you make your Christmas marketing emails stand out among thousands of offers provided by other brands? It’s not that difficult. The key to success in Christmas email marketing is simple — do not sell your products, put a...

Design Marketing Templates How-to
How to Build Labyrinth_Featured Image
30 October · 14 min read
Mazes and Puzzles for Emails in Under an Hour

What do you think when looking at this email sample? I’m pretty sure it’s something like “The game element is complex, it must take marketers hours or even days to implement this”. Even my team, that deals with AMP every day, thought so... But what if I tell you that you can build a similar one in like 30 minutes? In this post, I will show you two ways to build a similar email:  without the notification message at the...

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