---
title: Collect form data and send to webhook
slug: cms-saas/docs/collect-form-data-and-send-to-webhook
docTags: 
createdAt: 2026-07-30T20:18:08.000Z
---

The form system uses a shared `formState` object to collect and manage form data from multiple form elements. Each form element updates this shared state when users interact with it, and the submit element sends this data to external endpoints.

## FormState structure

The `formState` is a plain JavaScript object that serves as the central data store for all form inputs. Each form element stores its value using the element's label as the key.

```json
// Example formState structure

{  
  "Name": "John Doe",  
  "Email": "john@example.com",  
  "Message": "Hello world!",  
  "Country": "USA"  
}
```

## Form elements and data handling

From `TextboxElementComponent.tsx`, the `textbox` element handles single-line text input and stores its value in the `formState` object.

```json
// From TextboxElementComponent.tsx  
<Input  
    type='text'  
    autoComplete={node.AutoComplete ? 'on' : 'off'}  
    placeholder={node.Placeholder ?? ''}  
    onChange={(e) => props.formState[node.Label!] = e.target.value }  
/>
```

Key points:

- Uses the element's Label as the key in `formState`.
- Updates `formState` on every `onChange` event.
- Supports autocomplete and placeholder features.

## Form submission data flow

From `SubmitElementComponent.tsx`, the `submit` element handles form submission and sends data to external endpoints.

Data flow

1. **Data collection** – Form elements update `formState` as users interact with them.
2. **Data validation** – Each element can have validators (required, format, and so on).
3. **Data submission** – **Submit** sends the complete `formState` to the configured endpoint.
4. **Response handling** – Success or error feedback is provided to the user.

```json
// From SubmitElementComponent.tsx  
<Button onClick={(e) => {  
    console.log(props.formState)  
    axios.post((window as any).submitUrl, props.formState)  
    .then(response => {  
        alert('Form submitted successfully!');  
    })  
    .catch(error => {  
        console.error('Error submitting form:', error);  
    });  
}}>  
    {node.Label}  
</Button>
```

Key points:

- Logs the complete `formState` for debugging.
- Sends data through `HTTP POST` to the configured endpoint.
- Provides user feedback on success or failure.

## Integrate with external systems through webhooks

The submission endpoint is configured through the `submitUrl` property on the window object:

```json
// The submitUrl is accessed from the global window object  
axios.post((window as any).submitUrl, props.formState)
```

Form data is sent as a JSON object with the following structure:

```json
{  
  "field_label_1": "field_value_1",  
  "field_label_2": "field_value_2",  
  "field_label_n": "field_value_n"  
}
```

## External storage options

The system can integrate with various external storage solutions:

- **REST APIs** – Any HTTP endpoint that accepts JSON POST requests.
- **Webhooks** – Third-party services that can receive form data.
- **Database APIs** – Direct integration with database services.
- **Email services** – Form data can be sent through email notifications.

## Error handling

The implementation includes basic error handling:

```json
.catch(error => {  
    console.error('Error submitting form:', error);  
});
```