Collect form data and send to webhook

7 min

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.

// Example formState structure

{  
  "Name": "John Doe",  
  "Email": "[email protected]",  
  "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.

// 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

Data collection – Form elements update formState as users interact with them.

Data validation – Each element can have validators (required, format, and so on).

Data submission – Submit sends the complete formState to the configured endpoint.

Response handling – Success or error feedback is provided to the user.

// 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:

// 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:

{  
  "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:

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