A form builder plugin for Sanity Studio
npm install @hatchd/sanity-plugin-form-builderWith the plugin, you can create forms in Sanity while remaining frontend-agnostic. Utilize GROQ to query the forms and showcase them on the frontend with your favorite frameworks and UI kits.
Currently the fields supported are:
- Text
- Textarea
- Dropdown
- Email
- Telephone
- Hidden
- Number
- Date
- Time
- Checkbox
- Checkboxes group
- Radio buttons
- Form Group, a group of various inputs
Each field contains a label among other options such as being required or set a default value.
``sh
// NPM
npm install @hatchd/sanity-plugin-form-builder
// Yarn
yarn add @hatchd/sanity-plugin-form-builder
`
Add it as a plugin in sanity.config.ts (or .js):
`ts
import {defineConfig} from 'sanity'
import {FormBuilderPlugin} from '@hatchd/sanity-plugin-form-builder'
export default defineConfig({
// ...
plugins: [FormBuilderPlugin()],
})
`
You can customize the plugin by passing an options object:
`ts`
FormBuilderPlugin({
override: {
// Override field schemas by logical name (see below)
input: {
disableFields: ['fieldLabel'],
addFields: [/ ...additional field definitions... /],
},
textarea: { / ... / },
// select, checkbox, checkboxGroup, radioButtonGroup also supported
},
schemas: [
// List of schema keys to include
// If provided, only these schemas will be included
],
disableSchemas: [
// List of logical names to exclude (e.g. 'select', 'input', 'textarea', 'checkbox', 'checkboxGroup', 'radioButtonGroup')
],
})
- override: An object where each key is a logical field name (select, input, textarea, checkbox, checkboxGroup, radioButtonGroup). Each value is an object with:disableFields
- : (optional) Array of field names to remove from the schema.addFields
- : (optional) Array of additional field definitions to add.schemas
- : (optional) Array of schema keys to include. If set, only these schemas are included.disableSchemas
- : (optional) Array of logical names or schema keys to exclude from the plugin.
If no options are provided, all schemas and fields are included by default.
`js``
{
formTitle: 'string',
description: 'string',
emailTo: 'string',
emailSubject: 'string',
customFormFields: 'array' // Where the fields you have added
}
MIT © Hatchd Team
This is a Sanity Studio v3 plugin, the plugin will not work versions 2 and lower.