Custom form submissions require enabling server-side features. See this guide for unlocking these capabilities.

When a form is filled out by one of your users, the data is posted to a serverless function. The path to this function is defined by each form instance.

Form Action URL

By default, this value is /.netlify/functions/submission_created. This maps to a file at .netlify/functions/submission_created.js in your code. This file is deployed as a Netlify function.

Here's how we recommend customizing the form submission function.

Add API Route

Add a new API route for your custom form submission. For example, let's say we want the API route to be /api/custom-form-submission. You'd create a file at src/pages/api/custom-form-submission.js.

The file only needs a single handler export.

export default function handler(req, res) {
  // Do form submission things ...

Learn more about Next.js API routes.

Test It!

At this point, you could begin testing your form submission logic in Stackbit. Change the form submission URL to match your new API route and begin building your solution.

(Optional) Set Default Form Submission URL

If you want your custom function to be the default form submission behavior, you can change the default value for new form block components.

Go to .stackbit/models/FormBlock.yaml. Look for the action field and set its default value to your new API route.

type: object
name: FormBlock
label: Form
# ...
  # ...
  - type: string
    name: action
    group: settings
    label: Action (form submission URL)
    # Set the next line to your API route
    default: /api/custom-form-submission

Preset Values

These values may also be getting set in your content presets. Learn more about presets.

Consider Existing Content

You may also want to do a find and replace for any forms using the Stackbit default form submission function.