A number of myths prevail in the world of email marketing and design. One of them is that forms don’t work in professional email templates. The fact is that most of the popular email clients like Apple Mail, Yahoo!, Gmail, and iOS Mail support interactive forms. If you want to collect more details or feedback from the subscribers, these forms can work wonders for you.
To start with, let’s understand the applications of using interactive forms in emails.
Pros of Using Interactive Forms
Interactive forms are extremely useful in that they eliminate the additional steps that the subscribers would have to take, that can add to friction in completing the action. As a result, these forms shorten the path to conversion and help in driving business growth.
- With the help of interactive forms, you can send out surveys while eliminating the need to redirect the subscribers to a landing page. This will increase the likelihood of getting responses as they will be able to share their responses in the email itself.
- The subscribers will be able to update their user profiles or email preferences without them having to go to their account settings.
- Interactive forms will allow you to send out product review emails to the customers and collect the feedback without sending them to the landing page.
- Through these forms, you can embed lead generation forms within your campaigns itself.
Cons of Using Interactive Forms
Despite the advantages and applications of interactive forms, some marketers avoid using this element in the emails because of the limited compatibility in email clients. Moreover, every email developer might not be well versed with this element and how to include it.
Adding an Interactive Form in Email
- First things first, you must define the landing page or destination on which you want to send the form data.
This is possible by including two attributes as mentioned below:
<form action=”[www.uplers.com/landing-page]” method=”get”>
<!– Form content –>
You can retrieve the data by using a GET request or POST request. The former is more compatible with email but remember that if you are getting data with the help of that method, it will attach the data to a URL and the submitted form data will be displayed in the page address field.
- Next step is to build your form fields. In other words, you have to determine the information that you would want to get from the subscribers.
Add a label to each form field. It works as the information that lets the recipient know its purpose. If the form field is asking the reader for the first name, it would look something like this:
<input type=”text” id=”fullname”>
This code is interpreted as follows:
The user must enter text input in this field. The id and label for are connecting each other.
Bear in mind that some webmail clients might change the code as they do not support the for and id attributes. These clients use their own prefixes to the class and ID names, as a result of which your ID would change. Consequently, your label and ID do not match and your form becomes invalid.
So, what is its workaround?
A simple solution to this problem is to use your label like this:
First Name: <input type=”text”>
The different types of text inputs you can use are:
Specifying this can ensure validation to a certain extent and alter the keyboard style to be in sync with the required input.
You might want to add a checkbox or radio button to the form.
In the case of checkboxes, it is optional to add the values. If you do not define a value for the checkbox, it will work as “on” or “off”.
Let’s say you want to add a checkbox that returns the value “agree”.
You can do so by using the code as follows:
<input type=”checkbox” name=”t-c” value=”agree” >
This will submit the value “agree” as soon as the subscriber checks the box to agree to your terms and conditions.
Additionally, if you want to include radio buttons in the form, you should provide values and name elements to group the radio buttons together.
- Often, marketers would want to pass on hidden information through the form that the user does not have to input manually in the form. Some of the examples of such details are names, customer ID, or email address. Just use the input type “hidden” and you will be able to send hidden information across the backend of your platform without the user being able to see it.
<input type=”hidden” name=”user-id” value=”CUSTOMERID”>
The code given above will pass the user ID in a way that the user cannot see or modify.
- The final step is to submit the form once it is built. You can do this by using either of the codes given below:
I. <input type=”submit” value=”Submit your form” >
II. <button type=”submit”>
Submit your form
Both these codes have minor variation in how they work. While you have to set the text as the value in the former case, you must add the submission copy exactly before the button closing tag.
Fallback for interactive forms
Using a fallback will ensure a smooth customer experience even when the email clients do not render the interactivity in the form. The code will display the interactive form in Apple Mail and desktop versions of Gmail and Yahoo!, while all Outlook, Windows Mail and email clients on mobile devices will show the fallback.
Example of interactive feedback form
The Indian Pacers sent out an interactive feedback form that incentivizes the recipients who share their opinion within the email.
You can take help of Mailchimp templates and then add an interactive form element therein to make things easy for the HTML email developer working for you.
Whether you want to collect feedback for the products of your ecommerce store or your services or your webinar, using interactive forms in your business email template is a great idea. As more and more email service providers are supporting this element with better email client compatibility, you can surely contemplate thinking of applying it in your emails considering your business, email clients used by your subscriber base, and how they resonate to such innovations.