Have you done any of these actions within an email – given a star rating, completed a sign-up, updated your subscription choice, registered for an event, or filled up a survey form? If yes, you have already seen the amazing app-like functionalities of an AMP component called the ‘amp-form’ in action.
Let’s understand how the inclusion of amp-form transforms emails into an engagement platform for users.
1. What are the benefits of the amp-form component?
The amp-form brings interactive forms that instantly get user registrations, sign-ups, ratings, and feedback within an email. Form elements like dropdowns, text field expansion, radio buttons, and more make emails highly engaging. Here’s how you can get the most out of the amp-form component:
1.1. Reduce user drop-offs
Redirections to external web pages cause maximum drop-offs, but you can change that with in-email amp-forms. Interactive forms let users fill up information without leaving their inboxes. You can include various forms like event registrations, sign-ups, feedback, surveys, job applications, etc. The amp-form drives user engagement on the go, which improves conversions.
1.2. Collect zero-party data
Users are generally more comfortable sharing information via forms and applications embedded in emails from trusted senders. The amp-form creates a sense of confidence and security that third-party form submissions lack. You can design attractive forms that collect zero-party data in email without redirecting users to external web pages.
1.3. Improve engagement metrics
A user-friendly and time-saving form is sure to get high traction from users. By including amp-form in emails, brands experience a remarkable increase in survey responses, sign-ups, ratings, etc. AMP emails contribute to rich, engaging content that boosts ROI.
1.4. Collect feedback for customization
Constantly evolving customer behavior demands customized and targeted content. You can use in-email star ratings and feedback forms to gather information for list segmentation and email customization.
2. How to use the amp-form component?
The amp-form extension allows you to create forms (<form>) to submit input fields in an AMP document. The amp-form extension also provides polyfills for some missing behaviors in browsers.
Required scripts: <script async custom-element=”amp-form” src=”https://cdn.ampproject.org/v0/amp-form-0.1.js”></script>
Before creating a <form>, you must include the required script for the <amp-form> extension; otherwise, your document will be invalid. You do not need to load the amp-form extension if you are using input tags for purposes other than submitting their values (e.g., inputs not inside a <form>).
You can render success or error responses in your form by using amp-mustache or success responses through data binding with amp-bind and the following response attributes:
|
|
| submit-success | It is helpful to display a success message if the response is successful (i.e., has a status of 2XX) |
| submit-error | It is helpful to display a submission error if the response is unsuccessful (i.e., does not have a status of 2XX) |
| submitting | It is helpful to display a message when the form is submitting |
To render a successful response with data binding:
- Use the on attribute to bind the form submit-success attribute to AMP.setState().
- Use the event property to capture the response data.
- Add the state attribute to the desired element to bind the form response.
In addition to following the details in the AMP CORS spec, please pay attention to the section on “Processing state-changing requests” to protect against XSRF attacks where an attacker can execute unauthorized commands using the current user session without the user’s knowledge.
In general, keep in mind the following points when accepting input from the user:
- Only use POST for state-changing requests.
- Use non-XHR GET for navigational purposes only (example: search).
- Non-XHR GET requests will not receive accurate origin/headers, and backends won’t be able to protect against XSRF with the above mechanism.
Generally, use XHR/non-XHR GET requests only for navigational or information retrieval.
Non-XHR POST requests are not allowed in AMP documents due to inconsistencies in setting the Origin header on these requests across browsers and the complications supporting it would introduce in protecting against XSRF.
If you wish to learn more about the amp-form component for email, visit amp.dev.
3. Variations of the amp-form component
Unlike static forms, interactive forms offer several creative possibilities. You can combine the amp-form component with other components/attributes and build different email variants. Let’s look at some of them:
3.1. Inputs and fields
You can explore various form-related elements to include functionalities like selection menus with dropdowns, acceptable input criteria, etc. The allowed elements include <textarea>, <select>, <option>, <fieldset>, <label>, <input type=text>, <input type=submit>, etc. You can also couple it with another AMP component like an amp-selector.
There are a few elements, however, that are not allowed like <input type=button>, <input type=image>, <input type=password>, and <input type=file>. The restriction extends to most form-related attributes on inputs, including form, formaction, formtarget, formmethod, and others.
3.2. Auto-expand
AMP Form provides an auto-expand attribute to <textarea> elements. The text area expands and shrinks to accommodate the user’s input rows up to the field’s maximum size. The users experience adaptive text fields while filling out forms.
3.3. Clear text field
The amp-form element exposes a ‘clear’ action that empties the values from each input in the form. The users can quickly fill out forms a second time as a single click clears out the filled sections.
amp-form is frequently combined with the amp-list and amp-selector components to make the emails even more effective.
4. How can Netcore help you?
Netcore Cloud empowers you to create AMP interactive emails coupled with the world’s most advanced AI-powered email delivery. It sends 18 billion emails/month on behalf of businesses across 12 countries.
Netcore Cloud offers an enterprise-ready AMP editor that makes AMP email creation quick and easy. You can use the no-code drag-and-drop editor to build engaging AMP emails quickly. To customize further, you can connect with the in-house team of AMP experts to design AMP emails for specific use cases.
At Netcore, we help you set up and integrate AMP for email with the shortest TAT. You will find instant support for domain whitelisting, custom AMP design creation, and email delivery optimization that maximize the ROI of your email marketing campaigns.
Netcore Cloud works as an extension of your team to provide quick solutions. With Netcore’s help, 50+ global brands have rolled out interactive emails powered by AMP and achieved their goals.
Netcore’s team partners with your marketing team to help you leverage the power of AMP emails and drive business revenues.
Here is how YourStory used amp-form in their AMP emails to improve customer engagement and drive conversions.
Connect with us to understand how you can benefit from our expertise and experience.
