Handling forms and form submissions in Stackbit.

Most developers take one of two methods in integrating forms with the Stackbit editing experience:

Third-Party Form Providers

The more common approach for working with forms is to use a third-party service to design and build forms, store submissions, and deliver notifications.

The process typically works like this:

  1. Design/build a form within the provider's application.
  2. Get unique ID for the form from the provider. (Sometimes this is an embed code.)
  3. Add the ID value to the appropriate component field in Stackbit

Developers can then use that value and work with the provider's API (or embed code) to render forms and handle submissions.

Content Modeling for Third-Party Forms

Since most of the work in building the form is usually handled by the form provider, a Form model in Stackbit usually only needs a single field (usually a string) to store a reference to the form.

Custom Form Builder

Some developers choose to build their own form implementation method. This is usually done to have more fine-grained control over some aspect of the process — design, validation, feedback, submissions, or notifications.

Content Modeling for Custom Forms

Custom forms are typically handled with a series of models. One model handles the primary information for the form, including fields for attributes such as heading, description, button label, feedback messages, and submission URL.

Each field is then represented as its own documented with a specific model. Fields tend to have varying requirements based on their type, and those field types have one-to-one parity with a component on the front end.

For example, string-like fields might be handled in their own model, separate from a model for select fields or radio buttons.

Custom Form Submissions

Bringing a custom form builder doesn't necessarily mean having a custom submission provider, too.

Sites that handle their own form submissions do so in a server-side (API) route that may or may not be coupled with the website project code.

Other sites bring a custom form building, but still rely on a third-party service to handle the submissions. In these cases, there may still be an internal API route used to interact with the form provider's API. This is most common when working with a system in which the data must be stored, but that doesn't offer comprehensive form-building capabilities.