Skip to main content
Arcanflows

Your First Form

Create a smart form connected to AI in 10 minutes

Create your first smart form that connects to an AI agent in just 10 minutes!

What We'll Build

A contact form that:

  1. Collects user information
  2. Validates input in real-time
  3. Sends the data to an AI agent for processing
  4. Triggers a workflow notification
[Form Submission] → [AI Agent Processing] → [Workflow Notification]

Prerequisites

Step 1: Create a New Form

  1. Navigate to Forms in the sidebar
  2. Click Create Form
  3. Enter details:
    • Name: "Contact Form"
    • Description: "Customer inquiry form"
  4. Click Create

You'll be taken to the visual form builder.

Step 2: Add Form Fields

Name Field

  1. Drag Text Input from the field palette
  2. Configure:
    • Label: "Full Name"
    • Placeholder: "Enter your name"
    • Required: Yes
    • Field ID: name

Email Field

  1. Drag Email field
  2. Configure:

Subject Field

  1. Drag Dropdown field
  2. Configure:
    • Label: "Subject"
    • Required: Yes
    • Field ID: subject
    • Options:
      • General Inquiry
      • Support Request
      • Sales Question
      • Partnership
      • Other

Message Field

  1. Drag Text Area field
  2. Configure:
    • Label: "Message"
    • Placeholder: "How can we help you?"
    • Required: Yes
    • Field ID: message
    • Min Length: 20
    • Max Length: 2000

Phone Field (Optional)

  1. Drag Phone field
  2. Configure:
    • Label: "Phone Number"
    • Placeholder: "+1 (555) 123-4567"
    • Required: No
    • Field ID: phone

Step 3: Add Field Validation

Email Validation

Click on the Email field and add validation:

json
{
  "validation": {
    "pattern": "email",
    "custom_error": "Please enter a valid email address"
  }
}

Message Length Validation

Click on the Message field:

json
{
  "validation": {
    "min_length": 20,
    "min_length_error": "Please provide more details (at least 20 characters)",
    "max_length": 2000
  }
}

Step 4: Add Conditional Logic

Let's show a follow-up field when "Support Request" is selected.

  1. Drag another Dropdown field

  2. Configure:

    • Label: "Priority"
    • Field ID: priority
    • Options: Low, Medium, High, Critical

  3. Click Conditional Logic tab

  4. Add condition:

json
{
  "show_when": {
    "field": "subject",
    "operator": "equals",
    "value": "Support Request"
  }
}

Now the Priority field only appears when "Support Request" is selected!

Step 5: Configure Form Settings

Submission Settings

Go to Settings tab:

json
{
  "submit_button_text": "Send Message",
  "success_message": "Thank you! We'll get back to you within 24 hours.",
  "redirect_url": null,
  "prevent_duplicates": true,
  "duplicate_window_hours": 1
}

Styling

Customize the look:

json
{
  "theme": "light",
  "primary_color": "#73E0E7",
  "border_radius": "8px",
  "font_family": "Inter, sans-serif"
}

Step 6: Connect to AI Agent

This is where the magic happens! Let's have an AI agent process submissions.

  1. Go to Integrations tab
  2. Click Add Integration
  3. Select AI Agent
  4. Configure:
json
{
  "agent_id": "your-support-agent-id",
  "message_template": "New contact form submission:\n\nName: {{ submission.name }}\nEmail: {{ submission.email }}\nSubject: {{ submission.subject }}\nMessage: {{ submission.message }}\n\nPlease analyze this inquiry and suggest a response category and priority.",
  "include_response_in_submission": true
}

The AI agent will:

  • Analyze the message sentiment
  • Categorize the inquiry
  • Suggest priority level
  • Generate a draft response

Step 7: Connect to Workflow

Trigger a notification workflow on submission.

  1. Still in Integrations tab
  2. Click Add Integration
  3. Select Workflow
  4. Configure:
json
{
  "workflow_id": "your-notification-workflow-id",
  "trigger_on": "submission",
  "include_ai_response": true
}

Your Completed Form

Your form structure:

┌─────────────────────────────────────┐
│           Contact Form               │
├─────────────────────────────────────┤
│                                     │
│  Full Name *                        │
│  ┌─────────────────────────────┐    │
│  │ Enter your name             │    │
│  └─────────────────────────────┘    │
│                                     │
│  Email Address *                    │
│  ┌─────────────────────────────┐    │
│  │ [email protected]             │    │
│  └─────────────────────────────┘    │
│                                     │
│  Subject *                          │
│  ┌─────────────────────────────┐    │
│  │ Select a subject        ▼  │    │
│  └─────────────────────────────┘    │
│                                     │
│  Priority * (if Support Request)    │
│  ┌─────────────────────────────┐    │
│  │ Select priority         ▼  │    │
│  └─────────────────────────────┘    │
│                                     │
│  Message *                          │
│  ┌─────────────────────────────┐    │
│  │                             │    │
│  │ How can we help you?       │    │
│  │                             │    │
│  └─────────────────────────────┘    │
│                                     │
│  Phone Number                       │
│  ┌─────────────────────────────┐    │
│  │ +1 (555) 123-4567          │    │
│  └─────────────────────────────┘    │
│                                     │
│         ┌──────────────────┐        │
│         │   Send Message   │        │
│         └──────────────────┘        │
│                                     │
└─────────────────────────────────────┘

Step 8: Test Your Form

  1. Click Preview in the toolbar

  2. Fill out the form with test data:

    • Name: "Test User"
    • Email: "[email protected]"
    • Subject: "Support Request"
    • Priority: "High"
    • Message: "I'm having trouble logging into my account. I've tried resetting my password but it's not working."

  3. Click Send Message

  4. Check:

    • Success message appears
    • AI agent processes the submission
    • Workflow notification fires

Step 9: Publish and Embed

Get the Public URL

  1. Click Publish
  2. Copy the public URL: https://forms.arcanflows.io/f/your-form-id

Embed on Your Website

Get the embed code from Settings > Embed:

iFrame Embed

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

JavaScript Widget

html
<div id="arcanflows-form"></div>
<script src="https://forms.arcanflows.io/widget.js"></script>
<script>
  Arcanflows.renderForm('your-form-id', {
    container: '#arcanflows-form',
    theme: 'light'
  });
</script>

Step 10: View Submissions

  1. Go to Forms > Contact Form > Submissions
  2. You'll see:
    • Submission data
    • AI agent analysis
    • Workflow execution status
    • Timestamp and metadata

Export Submissions

Click Export to download:

  • CSV format
  • JSON format
  • Excel format

What's Next?

Enhance Your Form

  • Multi-Step: Break into multiple pages
  • File Upload: Allow attachments
  • Calculations: Auto-calculate values
  • Prefill: Pass data via URL params

Advanced Integrations

  • CRM: Push leads to Salesforce/HubSpot
  • Email: Send confirmation emails
  • Webhook: Post to any URL
  • Database: Store in your database

Analytics

  • Track conversion rates
  • Analyze drop-off points
  • A/B test different versions

Common Issues

Form Not Submitting

  1. Check all required fields are filled
  2. Verify validation rules aren't too strict
  3. Check browser console for errors

AI Agent Not Processing

  1. Verify agent ID is correct
  2. Check agent is published and active
  3. Review agent's system prompt

Workflow Not Triggering

  1. Confirm workflow is published
  2. Check the integration configuration
  3. Review workflow execution logs

Resources