AI Forms Guide

Learn how to create intelligent forms with conditional logic, multi-step flows, and automatic lead capture.

Overview

AI Forms are intelligent forms that can be embedded on your website or displayed in the chatbot widget. They automatically capture lead information, support conditional logic, multi-step flows, and include spam protection. Forms can be created using AI generation or built manually with the form builder.

Key Features

AI Generation

Generate forms automatically using AI based on your description or use pre-built templates.

Embed & Integrate

Embed forms on your website using iframe or script tags. Forms can also be displayed in the chatbot widget.

Analytics

Track form views, submissions, completion rates, and conversion metrics.

Export Responses

Export form responses in CSV, Excel, or PDF formats. Set up webhooks for real-time notifications.

Digital Signature Field

Overview

The Digital Signature field allows users to sign forms directly using their mouse, touchscreen, or stylus. Signatures are legally compliant with eIDAS (EU), ESIGN Act (US), and GDPR requirements, including metadata collection, audit trails, hash verification, timestamp servers, and digital certificate support.

Legal Compliance

eIDAS, ESIGN Act, GDPR compliant signatures with full audit trails

Timestamp Server

RFC 3161 timestamp tokens from trusted Timestamp Authority (TSA)

Digital Certificates

PKI support with certificate chain verification and revocation checking

How to Add a Signature Field

  1. Open the Form Builder and create or edit a form
  2. Click the "Add Field" button
  3. Select "Signature" from the field types
  4. Configure the signature settings (see below)
  5. Enable Legal Compliance if required for your use case
  6. Save the form and test the signature field

Signature Settings

Canvas Size:
  • Width: Default 400px (responsive on mobile)
  • Height: Default 200px
  • Automatically adjusts for mobile devices
Pen Settings:
  • Pen Color: Customizable (default: black)
  • Pen Width: Adjustable thickness (default: 2px)
  • Background Color: White or transparent
Display Options:
  • Show Clear Button: Allow users to clear and re-sign
  • Show Timestamp: Display signing timestamp
  • Required Field: Make signature mandatory

Legal Compliance Features

Metadata Collection:
  • Timestamp (ISO 8601 format)
  • IP Address (client-side + server-side)
  • User Agent (browser and device information)
  • Device Type (mobile, tablet, desktop)
  • Screen Resolution
  • Timezone
Audit Trail:
  • Complete log of all user actions (start, draw, clear, save, cancel)
  • Timestamps for each action
  • Coordinates for drawing actions
  • Stored with signature for legal verification
Hash Verification:
  • SHA-256 hash of signature + metadata
  • Verifies data integrity and detects tampering
  • Backend validation on form submission
Timestamp Server (RFC 3161):
  • Non-repudiable timestamp from trusted Timestamp Authority (TSA)
  • Required for full eIDAS compliance
  • Can be configured per signature field
  • Timestamp token stored with signature
Digital Certificates (PKI):
  • Support for PKCS#12 and PEM certificates
  • Private key signing for non-repudiation
  • Certificate chain verification
  • Certificate revocation checking (OCSP/CRL)
  • Long-term validation (LTV) data storage
Consent:
  • Custom consent text for legal acceptance
  • Consent acceptance timestamp
  • Required for ESIGN Act compliance

Signature Verification

All signatures can be verified in the Analytics tab when viewing form responses. The verification includes:

  • Hash Verification: Verify signature integrity using SHA-256 hash
  • Timestamp Verification: Verify timestamp token with TSA (if enabled)
  • Certificate Verification: Verify digital certificate signature and chain (if enabled)
  • Revocation Check: Check if certificate has been revoked (OCSP/CRL)
  • Metadata Review: View all collected metadata and audit trail
  • Overall Validity: Comprehensive validation result

💡 Verification is automatically performed when viewing signatures in the Analytics tab. Click "Verify Signature" to see detailed verification results including certificate information and revocation status.

Best Practices

  • Enable Legal Compliance for contracts, agreements, and legal documents
  • Use Timestamp Server for maximum legal validity and non-repudiation
  • Configure Digital Certificates for high-security use cases (eIDAS Advanced/Qualified signatures)
  • Add Consent Text explaining what the user is agreeing to by signing
  • Make Signature Required if the signature is mandatory for form submission
  • Test on Mobile Devices to ensure touch signing works properly
  • Keep Signature Size Reasonable - larger canvases may be slower on mobile devices
  • Display Timestamp to show users when they signed (increases trust)

Accessibility

The signature field is fully accessible and includes:

  • ARIA labels for screen readers
  • Keyboard navigation support
  • Keyboard shortcuts (Ctrl/Cmd + Delete to clear)
  • Focus management
  • Touch-friendly controls (minimum 44x44px touch targets)

⚠️ Important Notes

  • Legal Compliance is Optional: Only enable if you need legally compliant signatures
  • Timestamp Server Requires Configuration: You need to provide a TSA URL (e.g., from DigiCert, GlobalSign, etc.)
  • Digital Certificates are User-Provided: Users must import their own PKCS#12 or PEM certificates
  • Browser Compatibility: Signature field works on all modern browsers (Chrome, Firefox, Safari, Edge)
  • Mobile Support: Full touch support on iOS and Android devices
  • Data Storage: Signatures are stored as Base64-encoded PNG images with full metadata

Form Types

Basic Forms

Simple forms with standard fields like name, email, phone, and custom text fields. Perfect for contact forms, newsletter signups, and lead capture.

Multi-Step Forms

Break long forms into multiple steps to improve completion rates. Users can navigate between steps and see progress.

Conditional Logic

Show or hide fields based on previous answers. Create dynamic forms that adapt to user responses.

After Submit Actions

Show Thank You Message

The default action. Display a custom thank you message after form submission. Perfect for simple contact forms and newsletter signups.

Show Products

Automatically display relevant products from your Product Catalog after form submission. Products are intelligently filtered based on form responses using field mappings.

How It Works:

  • Map form fields to product filters (e.g., price field → price range filter)
  • Map category field to product category filter
  • Map tags field to product tags filter
  • Products are shown as rich media cards in the chatbot
  • Users can click "Buy Now" or "View Details" directly from the chat

Use Cases:

  • Product Inquiry Form: User fills form → See matching products
  • Quote Request Form: User provides requirements → See service packages
  • Custom Order Form: User specifies preferences → See customizable products
  • Event Registration: User selects preferences → See relevant events
Learn more about Product Catalog

🚨 Important: Content Security Policy (CSP) Configuration

If your website uses a Content Security Policy (CSP), you MUST configure it to allow AI Forms to load in the chatbot widget.

Required CSP Configuration:

Content-Security-Policy: 
  frame-src 'self' https://app.chatvix.com https://js.stripe.com ...;

Why is this needed?

AI Forms are loaded in an iframe from app.chatvix.com. Without adding this domain to your frame-src directive, the browser will block the form from loading due to CSP restrictions.

How to fix:

  1. Locate your CSP configuration (usually in HTTP headers, meta tags, or security plugins)
  2. Add https://app.chatvix.com to the frame-src directive
  3. Save and deploy your changes
  4. Clear browser cache and test the form

Common platforms:

  • WordPress: Use security plugins like "Security Headers" or "Wordfence"
  • Shopify: Edit theme.liquid or use CSP meta tags
  • Custom sites: Configure CSP in web server (nginx, Apache) or application headers

💡 Tip: Check your browser console (F12) for CSP violation errors. The error message will tell you exactly which directive needs to be updated.

💡 Pro Tips

  • Use AI generation to quickly create forms based on your needs
  • Enable spam protection (honeypot, reCAPTCHA) to prevent spam submissions
  • Configure "Show Products" after submit action to display relevant products based on form responses
  • Set up webhooks to receive real-time notifications when forms are submitted
  • Use analytics to identify drop-off points and optimize form completion rates
  • Add Digital Signature fields for contracts, agreements, and legal documents with full eIDAS/ESIGN compliance
  • Enable Legal Compliance on signature fields to collect metadata, audit trails, and hash verification
← Analytics GuideProduct Catalog →