BEE Pro and forms
Support for Pages was added to BEE Pro in the spring of 2021.
When you create a Page in BEE Pro, you can add a form to it, configure which fields it contains, and change the way it looks.
For example, we were recently working on the Web version of one of our newsletters: a landing page version of the same content that can be shared on social media channels, linked to in other web pages, etc. Spreading the word about your latest product news, for example, is much easier if you have a landing page version of the email newsletter.
We design our emails in BEE Pro, of course. Since turning an email into a page only takes a few clicks in BEE Pro, we took advantage of that feature to create our page and edit it.
Now that the email newsletter had become a Web page, we decided to add a sign up form to it, so that people reading the product news could sign up to receive the actual newsletter.
We dragged the Form content block to a section of the page, and quickly styled it to match the look & feel of the rest of the document. For details on building and styling a form, see Pages > Working with forms.
What happens when a form is submitted
What happens when someone fills out the signup form we just added to our page?
It depends on where the page is hosted.
- If the page is hosted by BEE Pro, you can have BEE Pro handle form submissions, as described in the sections below.
- If the page is hosted elsewhere (e.g. on your Web site), you will need to edit the HTML document and add an action to the form when you download the page from BEE Pro. The action specifies what happens to the form data when the form is submitted.
Sending form data to an email address
For the rest of this page, we will assume that you are hosting the page on BEE Pro.
By default, form submissions in BEE Pro are handled by sending the data to up to 5 email addresses. BEE Pro takes the data submitted by a visitor to the page, creates an email, and sends it to those inboxes.
If that's all you need:
- Select the form
- Click on Set up your form
- Add one or more valid emails, and you're done!
When the form is submitted, you will receive the form field data to your inbox.
NOTE: if you are using multiple forms in your design, these settings will apply to all forms.
Now, let's go back to our example: as you remember, we were working on a Web version of one of our newsletters, to which we added a signup form for new subscribers. Simply receiving the submitted form as an email was not going to be enough. Which brings us to the next section: how do we save that data somewhere else?
Passing form data to another application
We're collecting newsletter subscribers. You could be gathering signups for an event, or interest in a product that we are about to launch, etc.
In all of these cases, having the data submitted with the form sent to your email would not be that helpful. Instead, you may want that data to be saved in a spreadsheet like Google Sheet, a database like Airtable, or one or the many email marketing systems that exist today.
In our specific case, we use MailUp - a sister company - as our email marketing platform, so we wanted people that signed up for the newsletter to be added to a list in MailUp.
You can do so by using an email parser. If it sounds complicated, don't worry. It's not.
Let's go through it step by step.
Leveraging an email parser
What an email parser does
There are same handy tools out there that can...
- receive an email
- parse its content
- extract data from it
- let you "do things" with the extracted data
A Google search for "email parser" will return many of these helpful products.
In our case, we decided to use the email parser provided by Zapier, an application that we use elsewhere in our business to help us move data from point A to point B.
Zapier has a free plan, so you can try their Email Parser for free. Other email parsers do as well.
All of these parsers are quite easy to use. Typically:
- they give you a unique email address
- you send an email to it
- they let you highlight portions of that email
- that highlighted content is the data that is extracted for you
- they provide a way for you to save that data or use it elsewhere
Using the unique email address in a BEE Pro form
In our case, Email Parser by Zapier provided a unique email address that we used in BEE Pro as the email that form submissions will be sent to.
To configure the parser, we filled out the form, so that BEE Pro sent an email to that special email address.
On the Zapier side, there is a tool that helped us highlight portions of that email, i.e. the content that we wanted to extract so that it could be saved elsewhere.
It looked like this:
The content highlighted in yellow is what the parser will extract from the email when a new message is received by the system. As long as the new messages have the same, predictable structure, the parser will do its magic and extract the data you highlighted.
Other email parsers work very similarly.
Saving the data elsewhere
Now that the parser has been set up to extract the right data from the email, you can decide what to do with it. Different applications will handle this differently.
With Zapier, you create a "zap": a series of steps to instruct the system what to do when a new email arrives to that special email address, and the data is extracted by the parser.
In our case, we wanted to add the newsletter subscriber data to MailUp, our email marketing system. So we created a zap that does that.
As you can see in the screenshot below, the zap takes data extracted from the email, and uses it to add the new subscriber to a list in our MailUp account. It also assigns the new subscriber to a special group, which helps us identify which signup form was used.
We could have instead decided to:
- Save the data to a spreadsheet like Google Sheet, Smartsheet or Zoho Sheet
- Create a contact in a CRM like HubSpot, Insigthly, Nutshell or Freshsales
- Store it into a database like Airtable, Knack or MongoDB
- Send a message to Slack, Discord or Microsoft Teams
- ... you name it.
Applications like Zapier make this sort of thing pretty easy.
Thank You and Error messages
When the form is submitted, two things can happen:
- Everything goes well and a Thank You message is displayed.
- For some reason a problem occurs, and an Error message is shown.
BEE Pro allows you to add a custom Thank You and Error message. In our case, for example, we used:
- "Thanks! Check your inbox to confirm your subscription" as the Thank You message.
- "Oops! Something's not right. Please try again." as the Error message
When people fill out our newsletter signup form, they see:
A working example
The example we described above is a fully working landing page that we created with our own BEE Pro account. You can see the page here. To recap what we did:
- We designed a newsletter for one of our products.
- We turned it into a page to share it on social channels, link to it from other Web pages, etc.
- We added a signup form so that visitors to the page could subscribe to receive the newsletter.
- We configured the form to send an email to a special address created with Email Parser by Zapier: data from the form is extracted by the email parser, and then passed by Zapier to MailUp, our email marketing system.
Please let us know in the comments below if any of the information provided here is not clear enough. Thank you!