The formspree.json
file is where you can create and configure forms for a website. For example, you can create opt-in forms for a Mailchimp list, or contact forms that email you when submitted. The formspree.json
file is used by the Formspree CLI when deploying your forms to the Formspree servers.
Form Configuration
Forms accept the following config parameters:
Property | Type | Default | Description |
---|---|---|---|
name |
String | The name of the form (required) | |
actions |
Array | [] |
An Array of actions to perform after submission |
fields |
Object | {} |
Optional metadata about form fields |
allowExtraFields |
Boolean | TRUE | Whether to accept fields not defined under fields |
Example Here's an example formspree.json
file:
{
"forms": {
"contact": {
"name": "Contact Form",
"fields": {
"email": { "type": "email", "required": true },
"message": { "type": "text", "required": true }
},
"actions": [
{ "type": "email", "to": "john@example.com" }
],
"allowExtraFields": false
}
}
}
Post-Submit Actions
Forms accept an array of actions to perform after submission. We have a few built-in actions and a growing list of integrations with other apps:
App | Type | Description |
---|---|---|
email |
Sends a notification email. Read more | |
webhook |
Sends a webhook to a given url. Read more | |
mailchimp |
addOrUpdateContact |
Create subscribers in Mailchimp. Read more |
convertkit |
applyTags |
Create subscribers and apply tags in ConvertKit. Read more |
Here's an example of a formspree.json
file with a Mailchimp action:
{
"forms": {
"contact": {
"name": "Contact Form",
"actions": [
{
"app": "mailchimp",
"type": "addOrUpdateContact",
"audience": "8djs8fg8d",
"apiKey": "$MAILCHIMP_APIKEY"
}
]
}
}
}
Field Rules
You can optionally configure which fields are allowed, the type they should be, and various validation rules for them.
Note: By default, Formspree will accept any fields you pass in from the client-side. However, defining your fields here allows you to add validations (such as marking a field as required) and give them human-friendly names.
Field objects can contain the following properties:
Key | Type | Description |
---|---|---|
type |
String | The field type (text, email) |
prettyName |
String | The human-friendly name of the field |
required |
Boolean | Specifies whether the field is required |
Example
{
"forms": {
"contact": {
"name": "Contact Form",
"fields": {
"email": {
"type": "email",
"prettyName": "Email address",
"required": true
}
}
}
}
}