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.
- Setup your Formspree Form
- Edit Form for OptinMonster
- Add FormSpree Form Code to Custom HTML Integration
- Test the FormSpree Campaign
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>
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.
Step 4 – Test the FormSpree 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.
If you forget to confirm, you will also receive an email reminding you to confirm. In the email, click Confirm Form.
From now on, when someone submits that form, Formspree will forward you the data as email.
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.