Email forms without code? Stripo presents the AMP Form block

Recently, we teased that our new editor would soon feature a Form block that would empower any marketer, regardless of their technical skills, to create forms that would work in the body of an email. And that day has come. The AMP Form block is now available, and this guide will tell you how it works.

What is the AMP Form block?

The AMP Form block is an interactive block that provides a full-fledged form. To offer their feedback on your services, your recipients can fill in this form right in the email itself — they won’t have to visit third-party pages anymore.

How the AMP Form block works

Now, let’s understand the AMP Form block’s full potential by breaking down how it functions and what you can tweak in our editor.

Adding the AMP Form block

First, let’s add the block to the template. It works just like the other blocks – all you need to do is drag and drop the block into any container you need. The block comes with one label, one input field, and a button that sends you the data from the input field.

Applying a Data Service to your block

Data Service is a crucial part of the AMP Form block – if no service is connected, the form won’t work. Data Service holds all the answers, emails, and other data of your recipients once they fill in the form and hit the Send button.

Connecting Data Service to a block is easy, as we provide you with a drop-down list of the created services. Each service you create in Stripo will be on this list.

We’ve made a full-fledged guide on how Data Service works and how to create your own Data Service in Stripo, so you can easily use it to gather data.

Also, you always have the option to connect a third-party Data Service of your choice by simply adding a link to it in the corresponding field.

Tweaking Form Element

When you add an AMP Form block, there is already one Form Element inside it. Each Form Element is a part of your future form that shapes the look and its features.

When you click the Add Form Element button, a list of possible options appears. Only one option is available at present, but we will offer more options in the future.

Also, you can only add input fields now, and after choosing it in the list, the field will appear right under the first one.

For example, we don’t need two input fields, so we need to delete one. Click on the three dots button, and a menu with the Delete option will appear. There’s also a duplicate option that creates a copy of the current input field right below it.

The Options button is where all the changes to the input field are made. Let’s go over each option and what they allow you to do.

Type

This field allows you to choose different types of input field:

• Text; 
• Email; 
• Number; 
• Phone; 
• Text area;
• Hidden.

Each option determines how the input field will work and the type of information the recipient can input. For example, the Phone field will allow recipients to input only numbers. You can thus tweak the field according to your needs.

For our form, the Text field will do the job.

Required

The name of this option is self-explanatory — it prevents recipients from sending a blank form back to you.

Once the recipient clicks the Send button with an empty form, the corresponding message will appear.

Important note: This message is non-tweakable and is shown by the browser.

Show Label

Label is your pre-form text where you can ask a question or add a feedback request message. It can also be turned off.

Placeholder

Using the Placeholder control, you can add a placeholder message that can give your recipients a hint about what you want them to write. When adding an AMP Form block to your template, it automatically has a placeholder message, but you can delete it.

Variable

This field is required for form functionality and holds the variable to pass the data to your backend. Keep in mind that this variable must be unique and valid.

Margins

These controls allow you to tweak the margins of your form both on desktop and mobile (the Margins on Desktop are shown by default, so you need to tweak to mobile view in the editor to change the Margins for Mobile).

Styles tab

This tab allows you to change the look of your AMP Form block. There are several controls for detailed customization:

1. Label Color — changes the font color of your form label.
2. Label Font Family — changes the font of your form label.
3. Label Font Size — changes the font size of your form label.
4. Input Height — changes the height of the input field.
5. Input Border Radius — makes input field borders more rounded or square, depending on the value of your choice.
6. Input Text Color — changes the text color of the input your recipients will see once they start typing their feedback.
7. Input Font Family — changes the font style of the input text.
8. Input Font Size — changes the font size of the text your recipients input.
9. Show Shadow — changes whether you see input border shadows or not.
10. Input Border — changes the thickness of the input field borders.
11. Input Border Color — changes the color of the input field borders.

Success tab

This tab is the message your recipients will see once they send the form to you. There are not many options, as you tweak this message within the template and not a special field.

Enter the desired text here, and your recipients will see it.

You can also add a Start Again button by turning on the corresponding switch.

Padding settings work in the same way as the previous input field settings. However, there are dedicated style options for this tab that can help you further tweak its look. By clicking on the Styles tab while editing the Success tab, a menu with a few options to change the Success tab’s appearance will appear.

1. Background Color — changes the background color of the entire Success tab.
2. Font Color — changes the color of the success message.
3. Background Image — allows you to add a background image to the Success tab.
4. Border — changes the thickness of the Success tab’s borders.
5. Border Color — changes the color of the Success tab’s borders.
6. Radius — allows you to set the roundings for your success message.

Fallback

A fallback version is vital when you are creating interactive elements for your newsletter. Presently, interactive elements work and are rendered correctly only in Gmail, Yahoo, and FairEmail. Other email clients will not show recipients anything other than nice forms, as such content will be simply cut out of the email.

However, feedback should still be received, so it is worth embedding a fallback of your form in your emails. You can easily create it using our editor.

First, drag and drop the Text block in your template right above or right below your interactive form.

Create a CTA text that encourages your recipients to visit the external form where they can leave their feedback.

Drop the Button block in your template and tweak its design so that it aligns with your overall email design.

Attach the link to your separate page with the form or Google Form, for example.

Finally, include this structure in only the HTML version of your template.

And voilà, your fallback version is done and will also be seen in email clients that do not presently support interactive content. Every recipient who uses anything except Gmail, Yahoo, and Fairmail will see this text fallback with a button link to your separate page. If they open this email in Gmail, for example, they will see a full-fledged interactive form we showed you earlier. That’s how it works and why it’s vital to create both interactive and fallback versions.

You can create any type of fallback design your newsletter requires. Fallback’s main goal is to give recipients the ability to share their opinions even if they use email clients that offer no interactivity support. There must thus always be a link to an external page or form (how you wrap it is, of course, completely up to you).

How can you preview and test your form?

Testing your interactive email elements is not an option — it is a mandatory process that ensures that your AMP Form works as intended and renders properly. To show you how you can test your AMP Form, we’ve created this simple form using the options explained above.

To retrieve the recipients’ email addresses once they fill in the form, we added a hidden field with a merge tag attached to it. This field is visible only in the editor.

We added another input field via the Add Form Element and gave it a Hidden state.

We then pasted a basic merge tag for getting email and gave the whole input field a proper variable.

The most reliable way to ensure that your interactive form is flawless is to test it in a live environment — send it to an inbox! You can do this by clicking the Test button.

Simply add the email addresses to which you want to send the test email in the corresponding field and hit the Send Test button.

Important note: The number of tests is limited depending on your plan. You can check how many email tests are left on the Home page.

Every test email has a Stripo TEST name, and here’s how it looks in the inbox.

A quick test shows that our form functions perfectly.

And the data goes straight to our Data Service.

Another way you can test your email is by using the built-in preview feature — just click the Preview button.

You will be able to see both the desktop and mobile versions of your feedback form and test their functionality.

Upcoming updates to the block

Adding an AMP Form block to your arsenal is only a start — we are constantly improving editor functionality, and this block will not be left aside. The most basic and major innovations will be the addition of new form options. For example, a new form will soon appear where recipients can choose from several options.

We will also soon introduce a form option with a drop-down list to make your emails with forms even more compact, stylish, and convenient for your recipients.

In the long term, we will add an automatically generated fallback for your forms, which will save your time on creating them. Subscribe to our updates and news to try out all the new functionality first.

Wrapping up

Form is a great way of gathering information and feedback that is vital for your business. Back in the old days, you had to create a separate page, to which a link in your email would lead, where your audience could fill in the form. AMP Form block cuts corners and allows you to make your emails interactive with a form your recipients can complete within the email. 

Our editor gives you a straightforward way to create your own interactive form — no coding skills are needed! 

We hope that this article helped you in adding interactive forms to your emails, thereby making your communication with your recipients even more effective.