Create Custom Forms Using Payload CMS Form Builder Plugin

One of the most essential features of any web app is the ability to quickly create and manage custom forms, like contact forms, surveys, opt-ins or sign-ups. The Payload CMS Form Builder plugin provides a powerful solution that lets you easily create and manage forms directly from the admin panel.

In this post, I'll walk through how to install and use the Form Builder plugin to start creating and collecting form data in a few easy steps.

I'll be covering the following:

• What is the Payload Form Builder plugin?
• How to install the Form Builder plugin
• How to build any type of form
• How to customize form fields
• Validating fields
• Submitting and viewing form data
• Adding forms to pages

Mastering this plugin can be game changing and it provides so much potential for business and marketing benefits to be able to reach customers in very creative ways.

So, let's start building forms like a pro.

What is the Payload Form Builder plugin?

The Form Builder plugin is one of the key Payload CMS plugins and is quite useful once you learn how it functions.

The plugin creates two new Collections, the forms and forms-submissions. These two Collections provide a way to efficiently define, submit and collect form data.

• forms: Defines forms and the fields that are needed.
• form-submissions: Collects and receives submitted form field data and sends any success confirmation emails defined in a given form.

Both of these Collections can be customized as needed in the plugin config settings.

Installing the Form Builder plugin

There's only one dependency that's really needed but I'm also going to use the react-hook-form package for its awesome form validation.

1pnpm add @payloadcms/plugin-form-builder react-hook-form

You can also use the Payload generator which will install everything you need with some working examples.

1npx create-payload-app

In this post, I'll take a step by step approach and build the components needed to better explain how the plugin actually works.

Configuring the Form Builder plugin

The plugin provides the following options to enhance the default settings:

• beforeEmail: A function callback to modify email content before they're sent.
• defaultToEmail: The default To: email address if none is specified in the form instance.
• fields: Indicates which block input fields are selectable and available to use in forms.
• formOverrides: form Collection overrides.
• formSubmissionOverrides: form-submission Collection overrides.
• handlePayment: A function handler for payment processing.
• redirectRelationships: An array of redirect string.

This post will only focus on building forms and won't be covering any payment processing flows.

I may do a follow-up post to cover the handlePayment flow since there is a great deal of benefits and use cases.

I'll hide the option for paymnents by setting it to false in the config.