Create a Contact Form Block

In this article, we cover setting up your Contact Form block with Formspree.io

You can use any contact form service (Mailchimp, FormKeep, etc.); however, in this article we’ll discuss how to set up your form with Formspree.

Add the Contact Form Block to Your Theme

  1. In Site Designer, click the blue plus sign to add a block to your page.
  2. In the left-hand menu, select Misc.
  3. Find "Contact Form” and click Add Block.
  4. Click anywhere on the block to edit it.

Create Your Account in Formspree

  1. Visit https://formspree.io/ and click Get Started or Sign Up.
  2. Enter a valid email address and password and click Register.
  3. Verify your account from your email address.

Create a New Form After Logging in to Formspree

  1. In the Form box, click + New Form.
  2. Enter a Form Name (i.e. Contact Form).
  3. Enter your email address in the "Send emails to:” field.
  4. Click Create Form.

Configure Your reCAPTCHA

  1. Click Settings, then click the toggle next to reCAPTCHA to enable it.
  2. Login to the reCAPTCHA admin console at https://www.google.com/recaptcha/admin. 
  3. If you already have a reCAPTCHA set up for your site, click the + icon to add a new one. Otherwise, skip to Step 7.
  4. Select reCAPTCHA v2 and "I'm not a robot" Checkbox.
  5. Add your domain (example: your-site.myvolusion.com).
  6. Fill out any other required fields and click Submit.
  7. Copy the “SITE KEY” from Formspree into the "reCAPTCHA site key” field in Site Designer’s block settings.
  8. Copy the "SECRET KEY” into the "Custom reCAPTCHA Key” field in your Formspree form settings and Save.

Configure Your Endpoint in Site Designer

  1. On the Integration page in Formspree, copy your form’s endpoint (it should look similar to “https://formspree.io/abcdefgh”) into the "Form action” field in Site Designer’s block settings.
  2. Click Done at the bottom of the block settings panel to save.