AMP stands for 'Accelerated Mobile Pages', a framework initially launched by 'Google LLC' in 2016 as an open-sourced library to help publishers quickly load webpages and enhance user experience on smartphones and tablets. 

AMP for email allows marketers to embed interactive AMP elements like carousels, accordions, forms, purchase buttons etc. within emails and thus obviate the need to redirect recipients to a new tab or a website. That is to say, AMP powered emails enable businesses to incorporate dynamic, interactive, real-time and fast-loading content within campaigns to provide a much more engaging user interface than traditional mails which in turn increases both the conversion rate and the time spent within mails.

Customers can interact and act inside an email that leverages the AMP technology. They can perform important actions (directly within mails rather than going off to a landing page) such as RSVP to events, take part in surveys, fill in confirmation forms, verify email addresses, browse online catalogs of products and much more. In order to streamline the process of creating dynamic and personalized AMP powered emails, we devised a novel feature that allows organizations to effortlessly insert previously created signup forms within their campaigns. 

In this article, you will learn how to include a signup form by means of its URL, within your AMP email campaign through the NotifyVisitors AMP HTML Code Editor. You'll also learn how to map user attributes within the same editor, so that the software can successfully capture the data entered by users in the form, upon receiving the campaign.

Prerequisites

You will have to fulfill the undermentioned prerequisites in order to successfully insert a signup form within your AMP email campaign:

1. Firstly, you will need to create and design a signup form. Kindly check the undermentioned articles in case you do not already know how to build one.

How to design a signup form

Guide to create an on-site signup form

2. Secondly, you will have to create an AMP email campaign. Kindly check the undermentioned article in case you do not already know how to create one.

How to create an AMP Email Campaign

How to insert AMP form URLs via the AMP HTML Code Editor

Kindly follow the undermentioned step-by-step procedure:

1. Access the AMP HTML code of your campaign using the NotifyVisitors AMP HTML Code Editor.

• Navigate to Dashboard > Campaigns and in the 'Search' bar, enter your campaign’s name or ID. By doing so, your previously saved AMP email will get displayed on-screen.

• From the 'Actions' dropdown, select the 'Edit' option to modify your campaign. Then, click on the 'Continue To Content' button so as to proceed to the next stage i.e., the 'Content' section.
• Within the 'Content' section of the campaign builder, click on the 'AMP HTML' preview tab. Next, click on the dropdown present next to the tab and select the 'Edit Content' option as illustrated in the GIF provided below.

• The aforementioned procedure will take you to the 'AMP HTML Code Editor', through which you can insert a previously created/saved signup form within your AMP email campaign.

2. Next, within the code editor, locate the <form> element i.e. the section of code which defines the structure and layout of the AMP form.

Within that section of code, precisely position your cursor to the 'value' of the 'action' attribute of the <form> element. In simple words, use your mouse cursor to select the entire 'value' (enclosed within double quotes) of the 'action' attribute of the <form> element.

3. Next, click on the button titled 'AMP Form URL'. Upon doing so, a dropdown list of all the signup forms previously saved within your account's database will appear on-screen. Simply select the signup form you wish to include within the email campaign from the dropdown list.

4. Once you do so, the URL of the form you selected will automatically get inserted within the editor at the exact position where you had placed the cursor (i.e. the signup form's URL will get inserted within the 'value' quotes of the 'action-xhr' attribute of the <form> element).

How to map user attributes via the AMP HTML Code Editor

Inserting the signup form's URL in the campaign is only half the job done.

You will also need to map user attributes (which represent the customer information you seek to procure) such as name, email ID, product preferences, phone number, residential address etc.

Mapping user attributes will actually enable the signup form (whose URL you inserted) to successfully capture data entered by users in the AMP form of the campaign, and save the same within the database maintained at the server.

Kindly follow the undermentioned step-by-step procedure to map user attributes:

1. Within the <form> element’s code, you would notice that there exist various types of 'form controls' (such as text, radio buttons, dropdowns, checkboxes etc.) each created via the <input> element.

Attributes (of an element) have their own unique values enclosed within double quotes. You would notice that for an attribute, either there already exists a value within the quotes or there exists no value at all (i.e., the quotes are empty).

Whichever be the scenario, to begin mapping a user attribute, simply select the 'value' of the 'name' attribute of the <input> element, in the same manner as you did for the <form> element's 'action' attribute, and if there isn't any 'value' present, then simply position your cursor within the quotes.

2. Next, click on the button titled 'Map User Attribute'. Upon doing so, a dropdown list mentioning all the predefined user attribute values available for mapping, will appear on-screen. Simply choose an appropriate attribute value that you wish to map with the selection made within the code.

For instance, to help the server identify a 'text type form control', you may select the default 'value' i.e., name of the 'name' attribute and replace it with the one that can be recognized by the server i.e., first_name (check the screenshot provided below for illustration).

3. Once you do so, the attribute value you selected from the dropdown list will automatically get inserted in place of the selection or at the exact position where you had placed the cursor.

Form Illustration

How to view and verify user data submitted through embedded forms

While creating a signup form, you specify certain 'Form Details' one of which is the distinct 'Segment' in which the software shall systematically collect different kinds of information inputted by users within the form. Since a signup form is merely embedded in an AMP email campaign, all the data entered in it, by the users, also gets stored in a predetermined segment.

In essence, the information provided by users gets consolidated in one place or section of the software i.e. it can be accessed, viewed and verified through the panel’s 'User List' module. 

The process of viewing and checking user data obtained through embedded forms, recorded within the software’s database, is identical for both newly and previously registered users.

For instance, let’s say you dispatch an AMP email campaign, having a signup form embedded within it, to a pre-existing user (registered in the software’s database) in order to procure an additional piece of information from that user such as his/her current country of residence via the embedded form.

Now, if that user provides the requested piece of information, then the same will get updated within the panel or in other words, will get mapped against his/her NotifyVisitors user ID. Whether that new bit of data, retrieved from the form, got successfully recorded within the software’s database, can be verified from the panel's 'User List' section.

To check any specific user’s information, simply:

1. Navigate to Dashboard > Segments > User List.
2. Enter a previously known identification detail such as NVUID, name, email ID etc. of the user, in the 'Search' bar so as to filter him/her out.
3. Next, click on the User's Name.
4. Upon doing so, a new frame would appear on-screen containing detailed information about that specific user. Click on the 'Attributes' tab to ascertain whether the data submitted through the embedded form has been successfully recorded or updated in your NotifyVisitors account's database.

Once you complete the aforementioned step-by-step procedure, then your email campaign can be deployed with a fully functional AMP signup form included within it.