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		Font color for success message
successFormMessageBackgroundColor	Success message background color	color		Background color for success message
invalidFormMessage	Invalid form message	richtext	Your information could not be submitted. Please check your answers and try again.	Message shown when form submission fails
invalidFormMessageFontColor	Invalid message font color	color		Font color for error message
invalidFormMessageBackgroundColor	Invalid message background color	color		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:

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

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

• Salesforce Integration

• Order Types Reference