Form Builder - A form builder plugin for Sanity

With 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.

Installation

``sh
// NPM
npm install @hatchd/sanity-plugin-form-builder

// Yarn
yarn add @hatchd/sanity-plugin-form-builder
`

Usage


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()],
})
`

Plugin Options

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')
],
})
`

$3

- 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.

Schema

$3

`js
{
formTitle: 'string',
description: 'string',
emailTo: 'string',
emailSubject: 'string',
customFormFields: 'array' // Where the fields you have added
}
``

License

MIT © Hatchd Team

Note

This is a Sanity Studio v3 plugin, the plugin will not work versions 2 and lower.