How to Send OptinMonster Leads to Your Email Using Formspree

Learn how to send leads to your email inbox using FormSpree and OptinMonster’s Custom HTML Integration option.

Before You Start

Here are some things to know before you begin:

  • At the time of publishing this article, FormSpree is free for 50 submissions / form / month. If you need more, they offer a paid plan starting at $10 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.
  • This guide assumes that you’ve created your first campaign guide and are familiar with our Custom HTML Integration guide.
  • FormSpree is not the only solution to send leads to your email, but one example we’ll provide in this guide.

Integrate FormSpree

To get started sending leads to your email using FormSpree, follow these steps:

  1. Navigate to FormSpree.io and set up your form following their instructions.
  2. Next, you’ll need to modify the form code provided by FormSpree 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/YOUR_EMAIL_ADDRESS">
     <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>
      
  3. Once you’re done editing, add your custom FormSpree code to your campaign using the Custom HTML Integration option.FormSpree Code
  4. (Optional, recommended) Be sure to test-submit the campaign before launching it on your site to be sure the leads are correctly processed by FormSpree and arrive in your email inbox.
    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 paid plan.
    Formspree Confirmation Instructions

Troubleshooting

What about privacy or advanced options?

Refer to FormSpree’s official website for the latest version of their privacy policy or available advanced options.

Are you affiliated with FormSpree?

No, we have no affiliation with FormSpree.