Custom form modeling in dashboard

Model custom forms with ButterCMS Collections and references so your app can render and submit them.

When to use custom forms

Choose custom forms if you want to:

• Control the validations
• Apply custom frontend styling
• Choose where form submission data is sent
• Perform A/B testing on the positioning of form fields
• Avoid vendor contracts and subscriptions

---

Custom forms vs form builders

Advantages of custom forms

Benefit	Description
Full Control	Control the design, functionality, and validation logic. Custom forms are tailored to fit your brand and specific needs.
Advanced Validation	Custom forms allow for complex validation rules and error handling, giving you more flexibility than third-party tools.
Data Ownership	You decide where the data is stored, ensuring compliance with your internal policies and privacy regulations like GDPR.
No Vendor Lock-In	You aren’t tied to third-party vendors or contracts, and you have full control over the form’s availability and performance.
Scalability	You can easily scale and modify your forms as your business grows, without being limited by external platforms.
Custom Integrations	You can connect forms directly to your systems, CRMs, or APIs without paying for extra integrations.

Considerations

Consideration	Description
Development Time	Custom forms require developer resources, which can slow down the process of building and updating forms.
Maintenance	You’re responsible for maintaining, updating, and securing the forms.
Analytics	You need to implement your own tracking for submissions and user behavior.
Security	You’ll need to handle security features like CAPTCHA and ensure compliance with regulations.

---

Building custom forms with Collections

You can use ButterCMS Collections to build custom forms. Using the Reference field in a Component, a user can position the form to render on a webpage with the rest of the Components and content they’re using.

Step 1: Create a form Collection

Create a Collection to define the overall form structure:

Recommended fields for the Form Collection:

Field Name	Field Type	Purpose
form_name	Short Text	Internal identifier
form_title	Short Text	Display title
submit_button_text	Short Text	Button label (e.g., “Submit”, “Send”)
success_message	Long Text	Message shown after successful submission
submission_endpoint	Short Text	API endpoint for form submissions
fields	Reference	Links to Form Field Collection

Step 2: Create a form field Collection

Create a Form Field Collection to define individual form fields:

Schema Field Name	Schema Field Type	What it is used for
field_label	Short Text	The label for the input field
field_name	Short Text	Used in code accessibility and handling input data
input_type	Dropdown	Changes the input type (email, password, text, etc.)
required	Checkbox	Makes the field required for form submission
validation_error_message	Short Text	Customizes the error message
allow_numbers	Checkbox	Allows or disallows numbers
allow_special_symbols	Checkbox	Allows or disallows special characters
placeholder	Short Text	Placeholder text for the input
options	Repeater	For dropdowns/select fields, list of options

---