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 |