# Component: Data Capture Form

**Purpose:** To collect additional customer information and send it to Salesforce via a platform event.

## Key Features

* **Salesforce Integration:** Automatically sends data via Platform Events when SFv3 plugin is enabled
* **Flexible Data Collection:** Supports all standard form field types through subcomponents
* **Built-in Validation:** Includes field validation with error highlighting and messaging
* **Recaptcha Protection:** Integrated Google Recaptcha v3 support for security

## Props

| **id**                            | **label**                        | **type** | **default**                                                                         | **Purpose**                                       |
| --------------------------------- | -------------------------------- | -------- | ----------------------------------------------------------------------------------- | ------------------------------------------------- |
| requiredLabel                     | Required field label             | string   | Required                                                                            | Text displayed next to required form fields       |
| optionalLabel                     | Optional field label             | string   | (empty)                                                                             | Text displayed next to optional form fields       |
| submitLabel                       | Submit button label              | string   | Submit                                                                              | Text displayed on the submit button               |
| successFormMessage                | Success message                  | richtext | Thank you for submitting your information.                                          | Message shown when form is successfully submitted |
| successFormMessageFontColor       | Success message font color       | color    | `#155724`                                                                           | Font color for success message                    |
| successFormMessageBackgroundColor | Success message background color | color    | `#d4edda`                                                                           | Background color for success message              |
| invalidFormMessage                | Invalid form message             | richtext | We are sorry, but there was an error processing your order. Please try again later. | Message shown when form submission fails          |
| invalidFormMessageFontColor       | Invalid message font color       | color    | `#856404`                                                                           | Font color for error message                      |
| invalidFormMessageBackgroundColor | Invalid message background color | color    | `#fff3cd`                                                                           | Background color for error message                |

## Available Subcomponents

The Data Capture Form supports the following subcomponents:

* **Field** - Standard form field (all types: text, email, phone, dropdown, checkbox, etc.)
* **Display Text** - Static text or HTML content within the form

## Functional Behavior

### Success Flow

1. Customer fills out the form with valid data
2. Clicks submit button
3. Fields become disabled (greyed out)
4. Success message displays in green
5. A `data_capture` event is triggered containing all form data

### Validation Flow

1. Customer submits form with invalid data
2. Invalid fields are highlighted
3. Form scrolls to first invalid field
4. Error message displays
5. No event is triggered
6. Fields remain editable for correction

### Error Handling

1. If submission fails due to system error:
   * Invalid form message displays
   * Fields remain editable
   * Error is logged to Sentry
   * Event may or may not be triggered depending on error type

## Integration with Salesforce

When the Salesforce v3 (SFv3) plugin is enabled, the Data Capture Form automatically integrates with Salesforce Platform Events:

1. **Event Creation:** Form submission creates an order with `order_type: "data_capture"`
2. **Data Transmission:** The form data is sent as a JSON stringified payload in the `LimioOrder` field
3. **Platform Event Structure:**

   ```json
   {
     "Type": "DATA_CAPTURE",
     "LimioOrder": "{...stringified form data...}",
     "AccountId": "[salesforce_account_id]",
     "ContactId": "[salesforce_contact_id]"
   }
   ```

   Note: The `LimioOrder` field contains a JSON string of the form field values submitted by the customer (e.g., `{"firstName": "John", "companySize": "50-100"}`). The AccountId and ContactId are automatically populated from the customer's Salesforce identity if they're logged in or have previously made a purchase.

## Plugin Support

The following plugins handle the `data_capture` order type:

* **SalesforceV3:** Sends data as Platform Event

## Common Use Cases

### Post-Order Data Collection

Place on Order Complete page to collect additional information after purchase:

* Customer information
* Marketing preferences

### Quote Requests

Create standalone forms for B2B customers to request:

* Company information
* Volume requirements
* Change request
* Cancel request

## Configuration Example

```yaml
Component: Data Capture Form
Props:
  requiredLabel: "* Required"
  optionalLabel: "(Optional)"
  submitLabel: "Send Information"
  successFormMessage: "Thank you! We've received your information."
  invalidFormMessage: "Please check your responses and try again."
Subcomponents:
  - Display Text: "Please provide additional information"
  - Field (Company Name) - type: "text", required: true
  - Field (Number of Employees) - type: dropdown
  - Field (Additional Notes) - type: textarea
```

## Technical Notes

* **Session Management:** Uses existing customer session for attribution
* **Recaptcha:** Automatically includes Google Recaptcha v3 token if configured
* **Error Logging:** All errors are logged to Sentry with full context
* **Form State:** Form becomes disabled after successful submission
* **No Redirect:** Does not redirect users after submission (stays on same page)

## Best Practices

1. **Field Validation:** Always mark required fields appropriately to ensure data quality
2. **Success Messages:** Provide clear confirmation to users that their data was received
3. **Error Messages:** Use helpful error messages that guide users to fix issues
4. **Salesforce Mapping:** Coordinate with Salesforce admins to ensure Platform Events are properly configured
5. **Testing:** Test form submission with SFv3 plugin both enabled and disabled

## Related Documentation

* [Form Subcomponents Guide](/components/component-library/modular-checkout-components/modular-checkout-subcomponents-in-form.md)
* [Salesforce Platform Events](https://docs.limio.com/integrations/populating-salesforce-data/platform-events-flexible)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.limio.com/components/component-library/standard-components/component-data-capture-form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.