AI Form Builder

The AI Form Builder is a powerful tool that allows you to create and manage dynamic forms with the assistance of artificial intelligence. These forms can be used for various purposes, such as contact forms, registration forms, surveys, and more. The AI capabilities help in validating user input and automating workflows based on form submissions.

Features

• Intuitive Form Builder: Easily create forms with a drag-and-drop interface.
• Various Field Types: Choose from a wide range of field types, including text inputs, dropdowns, checkboxes, and radio buttons.
• AI-Powered Validation: Leverage AI to validate user input in real-time, ensuring data accuracy and completeness.
• Customizable Workflows: Define custom workflows to automate actions after a form is submitted.
• Status Management: Track the status of each form, from draft to published and archived.
• Seamless Integration: Integrate your forms with other services through APIs.

Creating a New Form

To create a new form, follow these steps:

1. Navigate to the Form Builder section in the main menu.
2. Click on the New Form button.
3. Fill in the required details, such as the form name, description, and trigger.
4. Add fields to your form using the form builder.
5. Configure the settings for each field, including the label, type, and validation rules.
6. Save the form.

Form Fields

The following field types are available in the form builder:

• Text: A single-line text input.
• Text Area: A multi-line text input.
• Select: A dropdown list of options.
• Checkbox List: A list of options where multiple selections are allowed.
• Radio: A list of options where only one selection is allowed.

For each field, you can specify AI-powered validation rules to ensure that the user enters the correct information. For example, you can set a rule to validate an email address or to ensure that a phone number is in the correct format.

Rich Options for Selection Fields

For Select, Checkbox List, and Radio fields, you can provide more than just a simple title for each option when WhatsApp Flows are enabled:

• Title: The main text for the option (max 20 chars).
• Description: Optional secondary text (max 40 chars).
• Metadata: Optional additional info, like pricing or category (max 40 chars).
• Image: Optional image for the option.

Workflows

Workflows allow you to automate actions based on form submissions. You can create a workflow that sends a notification, calls an API, or adds a delay.

Workflow Triggers

A workflow is triggered when a form is submitted. You can define conditions to control when a workflow is executed. For example, you can create a workflow that only runs if a user selects a specific option in a form.

Workflow Actions

The following actions are available in the workflow builder:

• Status: Update the status of the form entry (e.g., "In Progress", "Completed", "Abandoned").
• Notification: Send an email notification to a specified address with a custom subject and body.
• API Action: Make a request to an external API. Supports GET, POST, PUT, PATCH, and DELETE methods with custom headers and field mapping.
• Condition: Check if a certain condition is met (e.g., field equals value) before proceeding to the next step.
• Delay: Add a delay (in minutes) between workflow steps.

By combining these actions, you can create powerful workflows to automate your business processes. For example, you can create a workflow that sends a confirmation email to the user, adds their information to a CRM via API, and notifies your team.

WhatsApp Flows

The AI Form Builder integrates directly with WhatsApp Flows, allowing you to create rich, interactive multi-screen experiences for WhatsApp users without writing JSON code manually.

How It Works

1. Define Fields: First, define your data fields in the Form tab (e.g., Name, Email, Appointment Date).
   • Dynamic Layout: The form builder dynamically adjusts its layout. When WhatsApp Flows are disabled, fields are organized in 3 columns. When enabled, a 4th column appears for advanced Configuration.
   • Advanced Configuration: When WhatsApp Flows are enabled, each field reveals a JSON Configuration editor. This allows you to fine-tune how each component behaves in WhatsApp.
2. Enable Flows: Toggle "Enable WhatsApp Flows". This reveals the flow configuration panel and the advanced configuration column in the fields repeater.
3. Design Screens: Break your form into logical steps using Screens.
   • Add Screen: Create a new screen (e.g., "Personal Info", "Preferences").
   • Add Images: Toggle the "Add Images" switch to upload header or footer images for each screen to enhance branding.
   • Select Fields: Pick which of your defined fields should appear on this screen using the dropdown.
   • Customize Footer: Each screen has a collapsible Footer section. You can customize the Footer CTA button text (defaults to "Continue"), and add optional Left Caption and Right Caption text.
   • Validation: If you create custom screens, you must assign all of your defined form fields to at least one screen. If no screens are defined, the system will automatically create a single default screen containing all fields.
4. Special Screens:
   • Summary Screen: Automatically generates a read-only screen showing a summary of all user inputs before submission.
   • Complete Screen: A custom terminal screen (Success page) with a title, body, and optional success image.
5. Auto-Generation: Upon saving, the system automatically compiles your configuration into a valid WhatsApp Flow JSON (v3.0 compliant) and syncs it with the WhatsApp Business API.

WhatsApp Flow Component Limits

To ensure compatibility with the WhatsApp Business API, the following limits are automatically enforced (text will be truncated if it exceeds these limits):

Configuration Options (JSON)

When configuring components for WhatsApp Flows, you can use the following keys in the JSON editor:

• required: (Boolean) Whether the field is mandatory.
• helper_text: (String) Text displayed below the field to guide the user.
• error_text: (String) Custom error message displayed on validation failure.
• max_length: (Integer) Maximum number of characters allowed for text inputs.
• min_length: (Integer) Minimum number of characters required for text inputs.
• min_selected_items: (Integer) Minimum items required for Checkbox Groups.
• max_selected_items: (Integer) Maximum items allowed for Checkbox Groups.

Image Requirements

• Images uploaded via the builder are stored in your public storage (default: flow-images directory).
• The system automatically converts them to public URLs required by WhatsApp.