How to Send OptinMonster Leads to Your Email Using Formspree

Do you want to have a form that sends the information straight to your email address? It’s simple using our Custom HTML integration. Here we’ll show you how to use Formspree to create a custom form for your campaigns that sends your lead data directly to your email instead of an Email Service Provider.

Important: At the time of this writing, Formspree is free for 1,000 submissions per email each month. If you need more, they offer a “Gold Plan” for $9.99 per month, which also gives you additional features. Note: with the free plan, you will need to confirm each URL where your form will show up.

Note: This guide presumes that you have already read and understood our Creating Your First Campaign guide and also our Custom HTML Integration guide. If you haven’t reviewed those two pieces of documentation, please do that first.

Setup your Formspree Form
Edit Form for OptinMonster
Add FormSpree Form Code to Custom HTML Integration
Test the FormSpree Campaign

FAQs

Step 1 – Setup your FormSpree Form

To begin, head over to FormSpree.io and setup your form following their instructions.

Step 2 – Edit Form for OptinMonster

Next, there are a few changes to be made to the FormSpree form so it can work seamlessly with OptinMonster. This includes setting cookies on submission and tracking conversions.

The base form should resemble something like the following:


<form method="POST" action="https://formspree.io/YOUREMAILHERE">
 <input type="email" name="email" placeholder="Your email">
 <textarea name="message" placeholder="Your message"></textarea>
 <button type="submit">Send</button>
</form>

Change the Message Field to a Name Field (recommended)

By default, the form gives an email field and a message area field. Since you are adding subscribers, most likely you will want to get their name as opposed to a message. You can do this by replacing the textarea line with a copy of the email input line. Then change the type to “text” and the name to “lead_name”. It should resemble the following:


<form method="POST" action="https://formspree.io/YOUREMAILHERE">
 <input type="text" name="lead_name" placeholder="Your name">
 <input type="email" name="email" placeholder="Your email">
 <button type="submit">Send</button>
</form>

Set Cookies and Track Conversions (recommended)

To ensure the form can properly set cookies and track conversions when submitted, the class om-trigger-conversion must be added to the submit button field. This change will appear as follows:


<form method="POST" action="https://formspree.io/YOUREMAILHERE">
 <input type="text" name="lead_name" placeholder="Your name">
 <input type="email" name="email" placeholder="Your email">
 <button type="submit" class="om-trigger-conversion">Send</button>
</form>

Set a Custom Redirect URL (optional)

When using a Custom HTML Integration in OptinMonster, the Success Message and Redirect URL options are not applied to your custom form. This because OptinMonster cannot override the default behavior of your custom form.

However, FormSpree allows you to quickly set a custom redirect URL by adding a hidden input field that specifies the redirect URL. This looks like the following, replacing CUSTOM_REDIRECT_URL with the URL you wish to use:

<input type="hidden" name="_next" value="CUSTOM_REDIRECT_URL"/>

Implemented into the FormSpree form code, this change will appear similar to the following example:

<form method="POST" action="https://formspree.io/YOUREMAILHERE">
 <input type="hidden" name="_next" value="CUSTOM_REDIRECT_URL"/>
 <input type="text" name="lead_name" placeholder="Your name">
 <input type="email" name="email" placeholder="Your email">
 <button type="submit" class="om-trigger-conversion">Send</button>
</form>

TIP: Don’t want to use a redirect URL?

Simply replace CUSTOM_REDIRECT_URL in this example with a hashtag as shown below and the form will not redirect on submission.

<input type="hidden" name="_next" value="#" />

However, in this scenario, you should close your campaign then when the button is clicked. Therefore add the om-trigger-close close to your submit button. It should look like this:

 <button type="submit" class="om-trigger-conversion om-trigger-close">Send</button>

Step 3 – Add FormSpree Form Code to Custom HTML Integration

Next, add your custom FormSpree code to your campaign using the Custom HTML Integration option.

Add FormSpree Code

Step 4 – Test the FormSpree Campaign

CRITICAL: Before FormSpree will submit the form to you, be sure to test-submit the campaign. If you haven’t already, be sure to embed the campaign on your site, then visit the front-end of your site and test-submit the campaign.

Test Campaign

FormSpree will send you an email asking to confirm your email address. This is how Formspree is enabled to work for that specific URL.

Formspree Confirmation Instructions

If you forget to confirm, you will also receive an email reminding you to confirm. In the email, click Confirm Form.

Click Confirm Form

NOTE: On the free set-up, this form must be verified on every page the form shows up. This means if you display the same form across multiple URLs on your site you will have to confirm the form on each unique URL. If you want a site-wide embed, then you will need the “Gold Plan“.

From now on, when someone submits that form, Formspree will forward you the data as email.

Sample Submission

Want an easy way to keep track of all your lead data? Check out our guide on how to add subscribers to a Google Spreadsheet with Zapier.

FAQs

Q: What about privacy or advanced options?

A: Please refer to FormSpree’s official website for the latest version of their privacy policy or available advanced options: FormSpree.io.