Integrating external data sources with Sanity
Learn the 2 most common patterns for integrating external data sources with Sanity
Go to Integrating external data sources with SanityHow to manage forms for your front-end with Sanity
Integrating a form service is no different than integrating any external system with Sanity. That being said, integrating an external form service with Sanity most commonly falls into two buckets, you either want to:
There are other form use cases Sanity can cover, you could even use Sanity to collect form submissions and manage user generated content (like we do on this site and https://www.sanity.io/learn), but this guide will cover the above two most common use cases.
The plugin @sanity/sanity-plugin-form-toolkit offers pre-built tooling for both types of form integrations if youâre looking to have something âout of the boxâ. This guide will dive into a more general look at how form-toolkit goes about creating these integrations.
form-toolkit currently has integrations for these services:
form-toolkit also exposes the formSchema
plugin and FormRendering
React component, which provides a pre-built form schema for your Studio and a component to render those forms respectively.
Syncing external forms with Sanity typically assumes that the service youâre syncing has some way to embed forms on your front-end that expects an ID to know which form to render. In such cases @sanity/sanity-plugin-async-list allows you to add a string field to your Sanity documents that fetches data from a remote source. Our guide on syncing external data sources includes a section outlining this approach in detail.
For basic form authoring, it may be preferred to author the form structure and fields in Sanity, pass that data to a component to render the form, and then use a âcatch-allâ service for form submissions like Formspree or Netlify forms.
@sanity/form-toolkit includes a package, formSchema
for building and rendering forms from your Sanity Studio
If youâd prefer to build your own implementation instead of using form-toolkit, the process is the following:
form
type containing an array of formField
objectsformField
type with various props for the HTML input
element like type
, placeholder
, name
, required
, label
and others based on your needsform
or formField
based on your needs, perhaps your forms need multiple sections or you want to control the form action from the CMS, all can be built into your schemaform
from a GROQ query, render a <form>
element, passing the relevant props from your datafields
array, and return an appropriate input for each provided field and its type
<form>
elementaction
attribute on your formSanity Composable Content Cloud is the headless CMS that gives you (and your team) a content backend to drive websites and applications with modern tooling. It offers a real-time editing environment for content creators thatâs easy to configure but designed to be customized with JavaScript and React when needed. With the hosted document store, you query content freely and easily integrate with any framework or data source to distribute and enrich content.
Sanity scales from weekend projects to enterprise needs and is used by companies like Puma, AT&T, Burger King, Tata, and Figma.
Learn the 2 most common patterns for integrating external data sources with Sanity
Go to Integrating external data sources with SanityHow to use Sanity to control redirects in your JavaScript framework of choice.
Go to Managing redirects with SanityA complete guide to setting up your blog using Astro and Sanity
Go to Build your blog with Astro and Sanity