Saving form data to a spreadsheet, a database, an email list, or other apps

BEE Pro and Forms

When you create a Page in BEE Pro, you can add a form, configure which fields it contains, and change how it looks. But designing a great form is just the first step. How do you manage the information submitted through your form?

This article shares our use case and other potential ways to manage your forms. This article describes forms when the associated page is hosted in BEE Pro only. If you're hosting your page elsewhere on the web, the host site manages submissions.

Our Use Case

We were recently working on the Web version of one of our newsletters. In other words, we created a landing page version of the same content. Unlike emails, the web version can be shared on social media channels and linked to in other web pages. This makes spreading the word about your latest product news more efficient.

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 used that feature to create and edit our page.

After converting our email to a page, we realized the content didn't need to be identical. We decided to add a sign-up form to the landing page version of our newsletter. This enabled our audience to sign up to receive the email newsletter.

We dragged the Form content block to the page and quickly styled it to match the rest of the document. For details on building and styling a form, see our article, Creating forms. 

What happens when someone fills out the sign-up form we just added to our page? Since we're hosting the page on BEE Pro, we'll use the Set up your form button to collect our form submissions. 

Sending form data to an email address

By default, BEE Pro manages form submissions 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!

You can also use this modal to create confirmation and error messages for your form.

You will receive the form field data in your inbox when the form is submitted. Note that if you use multiple forms in your design, these settings apply to all forms.

Now, let's go back to our example. We were working on a web version of one of our newsletters, to which we added a sign-up form for new subscribers. In this case, simply receiving the submitted form as an email was not enough. How do we save that data somewhere else?

Passing form data to another application

We're collecting newsletter subscribers. You might be recording sign-ups for an event or interest in a product you're launching. 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
• an email marketing system 

In our case, we use MailUp - a sister company - as our email marketing platform. We wanted people that signed up for the newsletter to be added directly to a list in MailUp.

So how did we do it? We used an external email parser. Let's go through it step by step.

Leveraging an email parser

What an email parser does

Email parsers are tools out there that can:

1. receive an email
2. parse its content
3. extract data from it
4. let you act on the extracted data

A Google search for "email parser" will return many helpful products. We chose the email parser provided by Zapier, an application we use elsewhere in our business.

Zapier has a free plan so that 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. We used it in BEE Pro as the email that form submissions will be sent.

On the Zapier side, there is a tool that helped us highlight portions of that email to be saved elsewhere. Our Zapier configuration looked like this:

As you can see, the email sent by BEE Pro contained the name of our form fields. This includes First Name, Email, and Privacy Policy. We also receive the data that we entered when we filled it out.

The highlighted content is what the parser extracts from the email. The parser will extract the data for each new email if the emails have the same structure. Other email parsers work similarly.

Saving the data elsewhere

Now that we've set up the parser to extract the correct data, you can decide what to do with it. Different applications will handle this differently.

With Zapier, you create a "zap." This is a series of steps to instruct the system on what to do when a new email arrives.

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. It then uses the data to add the new subscriber to a list in our MailUp account. It also assigns the new subscriber to a specific group so we can identify which sign-up form was used.

We could have instead decided to:

• Save the data to a spreadsheet like Google Sheets, Smartsheet, or Zoho Sheet
• Create a contact in a CRM like HubSpot, Insigthly, Nutshell or Freshsales
• Store it in a database like Airtable, Knack, or MongoDB
• Send a message to Slack, Discord, or Microsoft Teams

Applications like Zapier make this sort of thing 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 sign-up form, they see the following:

A working example

The example described above is a fully working landing page we created with our own BEE Pro account. You can see the page here. To recap what we did:

1. We designed a newsletter for one of our products.
2. We turned it into a page to share on social channels, link to it from other Web pages, etc.
3. We added a sign-up form so that visitors to the page could subscribe to receive the newsletter.
4. 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.