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? Are you wanting to avoid connecting to a big Email Service Provider because your business needs don’t require it? Then Formspree could be a good option for you!

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 Optin guide and also our Custom HTML Integration guide. If you haven’t reviewed those two pieces of documentation, please do that first.
  1. Setup your Formspree Form
  2. Edit Form for OptinMonster
  3. Add FormSpree Form Code to Custom HTML Integration
  4. Test the FormSpree Optin
  5. 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 action="https://formspree.io/your@email.com"
      method="POST">
    <input type="text" name="name">
    <input type="email" name="_replyto">
    <input type="submit" value="Send">
</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 action="https://formspree.io/your@email.com"
      method="POST">
    <input type="text" name="name">
    <input type="email" name="_replyto">
    <input type="submit" class="om-trigger-conversion" value="Send">
</form>
Specify Placeholder Text (recommended)

In all native integrations, OptinMonster uses placeholder text instead of labels to indicate what your website visitors should enter in each input field. FormSpree’s sample code doesn’t account for this, but it is very simple to add.

The following code has had the placeholder attribute added to each input field to demonstrate how this is done:

<form action="https://formspree.io/your@email.com"
      method="POST">
    <input type="text" name="name" placeholder="Enter your name">
    <input type="email" name="_replyto" placeholder="Enter your email address">
    <input type="submit" class="om-trigger-conversion" value="Send">
</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 action="//formspree.io/your@email.com"
      method="POST">
    <input type="hidden" name="_next" value="CUSTOM_REDIRECT_URL" />
    <input type="text" name="name" placeholder="Enter your name">
    <input type="email" name="_replyto" placeholder="Enter your email address">
    <input type="submit" class="om-trigger-conversion" value="Send">
</form>
Don’t want to use a redirect URL? Simply replace CUSTOM_REDIRECT_URL in this example with a hashtag (#) and the form will not redirect on submission.

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

Step 3 – Add FormSpree Form Code to Custom HTML Integration

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

Paste your Formspree form code into the Custom HTML integration field.

Step 4 – Test the FormSpree Optin

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

Formspree optin on site

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

Confirm_Formspree_web-page

If you forget to confirm, you will also receive an email reminding you to confirm.

Confirm_Formspree_via Email

If you display the same form across multiple URLs on your site you will have to confirm the form on each unique URL.

NOTE: On the free set-up, this form must be verified on every page the form shows up. 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.

New Submission from Formspree


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.