Smart Forms

Create dynamic data collection forms with intelligent integrations

Smart Forms are dynamic data collection interfaces that seamlessly connect to AI agents and workflows.

What are Smart Forms?

Smart Forms in ArcanFlows go beyond traditional forms. They:

  • Adapt Dynamically: Show/hide fields based on user input
  • Validate Intelligently: Apply complex validation rules
  • Connect Seamlessly: Trigger workflows and agent conversations
  • Embed Anywhere: Deploy as standalone pages, iframes, or widgets

Form Components

Field Types

ArcanFlows supports a comprehensive set of field types:

CategoryField Types
TextShort text, Long text, Email, Phone, URL
NumbersNumber, Currency, Percentage, Slider
SelectionDropdown, Radio, Checkbox, Multi-select
Date/TimeDate, Time, Date range, Scheduler
MediaFile upload, Image, Signature
LayoutSection, Divider, Rich text block
AdvancedRating, NPS, Address, Lookup

Field Properties

Each field can be configured with:

  • Label: Display text for the field
  • Placeholder: Hint text inside the field
  • Help Text: Additional instructions below the field
  • Required: Whether the field must be filled
  • Default Value: Pre-populated value

Building Forms

Step 1: Create a Form

  1. Navigate to Forms in the sidebar
  2. Click Create Form
  3. Enter a name and description
  4. Choose a starting template or blank form

Step 2: Add Fields

Drag fields from the sidebar onto the form canvas:

┌─────────────────────────────────────────┐
│  Contact Information                     │
├─────────────────────────────────────────┤
│  Full Name*        [________________]   │
│  Email Address*    [________________]   │
│  Phone             [________________]   │
│                                         │
│  Company Details                         │
├─────────────────────────────────────────┤
│  Company Name      [________________]   │
│  Company Size      [Select one     ▼]   │
│                                         │
│  Message                                 │
├─────────────────────────────────────────┤
│  How can we help?* [                ]   │
│                    [                ]   │
│                    [                ]   │
│                                         │
│              [Submit Request]           │
└─────────────────────────────────────────┘

Step 3: Configure Logic

Add conditional logic to make forms dynamic:

javascript
// Show "Enterprise Details" section when company_size > 500
{
  "condition": {
    "field": "company_size",
    "operator": "greater_than",
    "value": 500
  },
  "action": "show",
  "target": "enterprise_details_section"
}

Step 4: Set Validation

Define validation rules for data quality:

ValidationExample
RequiredField must have a value
Email FormatMust be valid email
Min/Max LengthBetween 10-500 characters
Pattern (Regex)Matches phone format
Custom FunctionComplex business logic

Step 5: Connect Integration

Choose what happens on form submission:

  • Trigger Workflow: Start an automation workflow
  • Start Agent Chat: Begin a conversation with an AI agent
  • Send Webhook: POST data to an external URL
  • Store Only: Save to database without action

Conditional Logic

Make forms respond to user input:

Show/Hide Fields

javascript
// If "contact_method" is "phone", show "phone_number" field
{
  "rules": [
    {
      "when": {
        "field": "contact_method",
        "equals": "phone"
      },
      "then": {
        "show": ["phone_number", "best_time_to_call"]
      }
    }
  ]
}

Required Conditionally

javascript
// Make "company_name" required if "is_business" is checked
{
  "rules": [
    {
      "when": {
        "field": "is_business",
        "equals": true
      },
      "then": {
        "require": ["company_name", "company_size"]
      }
    }
  ]
}

Calculated Fields

javascript
// Calculate total price
{
  "field": "total_price",
  "formula": "quantity * unit_price * (1 + tax_rate)"
}

Multi-Step Forms

Break long forms into digestible steps:

Step 1: Contact Info    Step 2: Details    Step 3: Review
    [●]─────────────────────[○]────────────────[○]

┌─────────────────────────────────────────┐
│  Step 1 of 3: Contact Information       │
├─────────────────────────────────────────┤
│                                         │
│  Name     [________________]            │
│  Email    [________________]            │
│  Phone    [________________]            │
│                                         │
│           [Back]     [Next →]           │
└─────────────────────────────────────────┘

Step Configuration

  • Progress Indicator: Show completion status
  • Validation Per Step: Validate before advancing
  • Save Progress: Allow users to continue later
  • Step Titles: Descriptive labels for each step

Form Styling

Customize the appearance of your forms:

Theme Options

  • Colors: Primary, secondary, background
  • Typography: Font family, sizes, weights
  • Borders: Radius, width, color
  • Spacing: Padding, margins, gaps

Custom CSS

Apply custom styles:

css
.arcanflows-form {
  --primary-color: #4AB6FF;
  --font-family: 'Inter', sans-serif;
  --border-radius: 8px;
}

.arcanflows-form .field-label {
  font-weight: 600;
  color: #1a1a1a;
}

Embedding Forms

Deploy forms anywhere:

Standalone URL

Each form gets a unique public URL:

https://your-domain.arcanflows.io/f/contact-form

iFrame Embed

Embed in any webpage:

html
<iframe
  src="https://your-domain.arcanflows.io/f/contact-form"
  width="100%"
  height="600"
  frameborder="0"
></iframe>

JavaScript Widget

Full control with the JS SDK:

html
<script src="https://cdn.arcanflows.io/forms.js"></script>
<script>
  ArcanFlowsForms.embed('contact-form', {
    container: '#form-container',
    theme: 'light',
    onSubmit: function(data) {
      console.log('Form submitted:', data);
    }
  });
</script>

Submission Handling

Confirmation Options

What users see after submitting:

  • Message: Display a thank you message
  • Redirect: Navigate to another page
  • Agent Chat: Start an AI conversation

Submission Storage

All submissions are stored with:

  • Timestamp
  • IP address (optional)
  • Form version
  • Processing status

Data Export

Export submissions in multiple formats:

  • CSV for spreadsheets
  • JSON for integrations
  • PDF for records

Best Practices

Design

  • Keep forms as short as possible
  • Group related fields logically
  • Use clear, action-oriented labels
  • Provide helpful placeholder text

Validation

  • Validate on blur, not just submit
  • Show errors inline near the field
  • Use positive, helpful error messages
  • Don't over-validate

Accessibility

  • Use proper form labels
  • Ensure keyboard navigation
  • Provide error announcements
  • Test with screen readers

Next Steps