Design Structure Templates How-to AMP
~ 12 min read
8443 views
rate it
04 June

Stripo Data Service, or How to Build AMP Forms Easier

Stripo / Blog / Stripo Data Service, or How to Build AMP Forms Easier

Today Stripo released its Data service. We’ll show now what it is for, how to use it to take your email marketing to a whole new level.

Introduction or what’s the use of AMP emails

Quite often we ask users to rate us, leave feedback, and comments, we ask them to share their contact information, age, gender, etc. Forms and questionnaires are an integral part of email marketing.

Why AMP in the first place? Our tests showed that the conversion of AMP emails was 5 times higher against the conversion of traditional HTML emails.

We rushed to share these results with you.

Submitting AMP Forms

Stripo Data Service: What is it for and how to use it?

By using revolutionary AMP forms, you can collect email addresses, phone numbers, use checkboxes, and even measure your NPS  in emails — all done in emails.

Checkboxes in Emails

That’s right… But to be able to measure and process these results, you need to set CORS on your side, build endpoints on your servers to connect your emails to data service. It all takes a lot of time, requires programming skills or programmers’ aid.

We, at Stripo, do it for you: we let you build data services with just a few clicks (no coding skills required), where you store all users’ responses. You have access to it at any time!

Now let’s create a Data Service and use it in our email with AMP form.

Ready to give it a try? Let’s do it together…

Step 1. Creating a new service

Please be advised that you can use our Data Service, or embed any external endpoint, even the ones you built with Zapier. 

Option 1. Choosing Stripo Data Storage

If you want to store users’ responses on our side, as it’s way easier than building a new server for every email campaign, then you are supposed to use our Data Service. You will have access to this data service at any time. 

So, to build a new Service with Stripo, you need to:

  • in your Stripo account, click the “Data” tab which is located on the left side of the screen;

  • in a new window, choose the “Services” tab;

Building a New Data Service_UPD

  • click the “+ Create service” button.

Starting a New Data Service

  • the “Service configuration window” will appear. Here you need to just give a name to your Data Service and enter a short description, the former is mandatory, the latter is optional;

  • all other fields are filled out automatically;

  • copy URL address for the future campaign.

Configuration of Data Service

Important to note:

We recommend that you name this service after the name of your email campaign. We believe this will make it easier for you to find and analyze the necessary data in your Stripo account after the email campaign’s been finished.

  • in the section, below toggle the “Stripo storage” button.

Choosing Stripo As Storage

Option 2. Choosing Zapier as Data Storage

To use Zapier as your Data Storage, you need to do all the steps described above, but instead of choosing Stripo as your data storage, you should:

  • choose “External storage resources”;

  • paste link to your Zapier Webhook — we’ll build it now.

Zapier as Data Storage

Creating Zapier Webhook

Zapier offers a wide range of zaps (connections). 

As I want to store all users’ responses in Google Sheets, I need to connect Stripo to Zapier, and Zapier to my Google Drive.

Let’s do it:

  • in your Zapier account in the upper left-hand corner, click the “Make a Zap button”;

The Make a Zap Button

  • give it a name;

  • in the “1. When this happens” section choose “Webhooks by Zapier”;

Creating Webhooks by Zapiet

  • as a trigger you choose “Catch hook”;

Choosing Webhooks as a Trigger

  • you click continue;

  • in the new window, you click the Webhook URL that Zapier has just generated for you;

Webhook URL

  • then you get back to Stripo and insert this link into respective field;

Pasting Zapier Webhook URL

  • now please copy our Data Service URL address;

  • paste it in the Form — you have to replace existing link with the Data Service URL;

Replacing-default-end-point-with-Necessary-One

  • now let’s go back to Zapier;

  • here we “Skip” tests and click “Continue” as we have nothing to test yet; 

Skipping Zapier Test

  • now, in the “2. Do this” section, we choose “Google Sheets” — to find them, you need to enter Google or Sheets in the search field;

Choosing Google Sheets

  • now we need to choose the right Action event — for our purpose, we need the “Create Spreadsheet Row” option;

Choosing the Create Spreadsheet as Action

  • click “Continue”;

  • enter your credentials for your Google account;

  • give Zapier access to your Google Drive;

Giving Zapier Access to Your Google Drive

  • Zapier automatically adds your Google Drive account on the list. You do not even need to choose anything;

Zapier Chooses Goole Drive as Your Account

  • previously you’ve built a Google Sheet with all necessary columns. My goal is to collect rates and feedback. Of course, I also need to know which recipient rated us. So, this is what my spreadsheet looks like:

My Spreadsheet

  • customize your spreadsheet: You need to select “Drive”, “Spreadsheet”, which is the Google Sheet you’ve created, and worksheet. I choose “Sheet 1” as I want to store all data on one single page.

Customizing Spreadsheet

  • Zapier pulls names of the fields from your spreadsheet;

  • Zapier pulls in data from your AMP Form (as we said, we will collect email addresses, rates, and feedback);

  • we need to choose necessary “values” for respective fields;

  • click “Continue”;

Customizing Google Sheets in Zapier

  • run this test, please to check if the connection was established correctly;

  • if your test was successful, click “Done Editing” and turn your Zapp On.

Successful Test

Important:

We showed how to store data on our Service and store data on external service (Zapier). But you can choose both if you like. Just toggle these both options:

Using Two Data Services

Step 2. Working on your AMP forms

Now that we have our endpoint, let’s proceed to build these AMP forms.

Important to note:

The aforementioned form will work only for those recipients whose email clients already support AMP — Gmail and Mail.ru, both desktop and mobile screens. Other users will see the fallback that we will build together later.

Currently, there are three ways of building AMP forms in Stripo:

Way 1. Building AMP Forms by using drag-n-drop blocks

This is probably the easiest way.

6 min read

5051 views 5

How to Easily Build AMP Forms for Emails Read on

Way 2. Embedding amp-components from Google AMP dev

Google provides us all with embed AMP components. You follow the instructions on the respective page and embed your form into our template.

But it’s a bit complicated for me, so I prefer not using this way.

Way 3. Using Stripo modules

Well, now this is much easier.

Once your template is finished, you should:

  • go to the Modules section;

  • enter “Form” in the search console;

  • drop the chosen module into your template;

  • redesign it if you like;

Caution: do not make any changes to the ⚡HTML part of this module as it may affect the performance of your AMP form.

  • click on the ⚡HTML part of this module to open its code;

Editing AMP Modules in Stripo

  • paste the URL address you copied when building your Data Service in Step 1;

  • insert it as shown in the GIF below;

Inserting URL Address Into AMP Form

  • now this form will collect rates and feedback. But we need to know who submitted them. So in order to receive email addresses, we need to embed this code sample into our form:

<input type="hidden" name="email" hidden value="%EMAIL|%">

Pasting Embed Code into Template

It goes after </label>.  

This field is hidden and is filled in automatically. Users do not need to enter their email addresses manually.

Important:

Contact your ESP for the merge tag that is meant for displaying email addresses. We use eSputnik, so in our case, this tag is  %EMAIL|%. Please do not make any changes to the rest of this embed code. 

  • your email is ready to collect feedback and rates from your users :)

Important:

You can test these forms even in the editor Preview mode. If done right, your Google sheet will fill out the following information:

Merge Tages in Google Sheets

It shows the merge tag since we tested email in the preview mode.

When we collect real feedback from real users (colleagues if you like to test this form once again) will show real addresses.

Testing AMP Forms_Google Sheets

Way 4. Using our prebuilt templates 

I believe this is the easiest way to use AMP forms in emails. Today! In the near future, we will release our AMP form Drag-n-Drop block — we’ll tell more about it later.

So, to use our templates, you need to:

Stripo Template with Embedded AMP Forms

Important to note:

Previously we said you would need to build a fallback/HTML version of this survey. Well, you do not need it for this template as it already contains the HTML survey invitation.

  • in the template, click on the ⚡HTML form;

  • open code editor;

  • replace the existing URL with the URL address that you copied in Data Service.

Pasting-End-Point-in-Email

  • if you want to collect email addresses as well, please paste the embed code as shown in the “Way 2” section. But in this case, it will go after the and before the

Pasting Embed Code into Template

Step 3. Building a Fallback

We published a long-read where we showed 10 best survey invitation emails and showed how to build them with Stripo.

Here we’ll show three best, in my opinion, fallbacks. They all are totally websafe:

Fallback 1: Collecting rates

As we said, users can rate our service directly in emails:

  • drag a 4-container structure into your dynamic template — if you want to get rated 1-5;

  • include this structure in the HTML version only;

  • add one more container to this structure;

  • equalize these containers;

Adding Structures with 5 Containers

  • upload images with Digits — “1”, “2”, “3”, “4”, “5” into each container;

  •  add one more structure with the respective number of containers and enter respective “grades” to each image — if you like;

Fallback Rating

  • apply respective URLs to each image.

Your ESP will provide you with the total number of clicks on each “rate”.

Fallback 2. Rating service

You can just ask users if they are satisfied with your products by choosing from “Bad”, “Okay”, and “Great” options.

Rating Products_Fallback with Three Option

You do it the way described in the Fallback 1 option with only 1 difference — you insert a 3-container structure. That’s it.

Fallback 3. Providing a link to an external source

If you are going to ask users a few questions, as a fallback you might want to ask them to take a multi-question survey.

You build a form either on your website, or by using Google Forms.

Once you have done it and you have a link to this survey, you:

  • add a 1-container structure into your template;

  • drop a “Button” basic block in it;

  • design your button;

  • add your URL to this button;

  • add a clear CTA copy above this button;

  • include this Structure in HTML email only.

Fallback Forms

Important to note:

Both versions of your emails — AMP and HTML will contain all parts of your template, like header, banner, footer, and contact information.

And only AMP HTML forms and HTML fallbacks will appear in respective versions of your emails.

Step 4. Previewing your emails

Prior to sending emails with AMP forms to users, please preview them to make sure they have no errors and send test emails to your colleagues to see how AMP forms really work.

To check out AMP tests in Gmail, please add our email address — info@stripo-test.email  — as a trusted sender.

Adding-Stripo-As-Trusted-Sender

For more details on how to preview emails with Stripo, please refer to our “Preview and Test Emails with Stripo” blog post.

Step 5. Checking out your results

To see the results of this campaign, you need to enter the “Data” section again.

Find the service you’ve previously built.

List of Services

As you can see, it shows how many requests each service had, and the time when the last request was made.

Click the “Download CSV-File” button.

Downloading CSV Files

That’s it.

Coming soon

In the short run, you will be able to:

Use checkboxes in emails

Dreams come true :)

Adding checkboxes, and rates in emails with no coding skills? Very soon you will be able to do it!

Forms with Checkboxes

Stay tuned ;)

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);
  • 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

Data Service today helps you get the most out of AMP emails, helps you easily connect your email campaigns to data services without external servers, without the necessity to set CORS, and with instant access to a campaign’s results.

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