![](/_next/image?url=https%3A%2F%2Fvercel.com%2Fapi%2Fv1%2Fintegrations%2Fassets%2Foac_SOUPsixV2TP6CkvfaB91Jhri%2Fimages%2F84364b3e829bdc3d351c6a3cb32d6dcf74394424.png&w=3840&q=75)
![](/_next/image?url=https%3A%2F%2Fvercel.com%2Fapi%2Fv1%2Fintegrations%2Fassets%2Foac_SOUPsixV2TP6CkvfaB91Jhri%2Fimages%2Fea6c377463e96da62f8bcdedaadc5380cf874386.png&w=3840&q=75)
![](/_next/image?url=https%3A%2F%2Fvercel.com%2Fapi%2Fv1%2Fintegrations%2Fassets%2Foac_SOUPsixV2TP6CkvfaB91Jhri%2Fimages%2Fc4f858d04617f4a143954a2836aa82b33b7c6ce0.png&w=3840&q=75)
Overview
Formspree is the fastest way to collect form submissions for your Vercel site. Formspree provides:
- Easy form setup with just a few clicks
- Multi-layered spam protection
- Plugins that send form data directly to 3rd party apps
- First class support for Next.js and React
This integration lets you connect Formspree to your Vercel projects, and add forms. It automatically sets up appropriate environment variables to use in your form code.
Instructions
After you have followed the prompts to connect Formspree with one or more Vercel projects, you'll find environment variables that correspond to your new Formspree project type.
For dashboard projects
You'll find the following Environment Variable:
NEXT_PUBLIC_FORM
This environment variable can be used along with the useForm
hook from the @formspree/react library to initialize your form like so:
const [formState, submit] = useForm(process.env.NEXT_PUBLIC_FORM)
For more information see the Formspree guide for Next.js.
For CLI projects
You'll find the following Environment Variables:
NEXT_PUBLIC_FORMSPREE_PROJECT
FORMSPREE_DEPLOY_KEY
For more information about using the CLI see our help guide.