Forms

The ai12z platform includes a powerful form-building experience, enhancing user interactions and data collection through versatile, multi-page input forms. You can build forms visually with a drag-and-drop designer, or use Vibe Coding — an AI-powered feature where you describe the form you want in plain language and the AI generates or updates the form's JSON model for you. This tool allows for the creation of comprehensive and dynamic forms, complete with robust validation features, ensuring accurate and reliable data capture. When a form is published the LLM is aware of the form as a Tool. Key features include:

1. Vibe Coding — AI Form Builder:

   • Describe the form or survey you want to build in plain language and the AI generates the complete form JSON model for you. Use instructions like "Create a customer feedback survey with 5 questions" or "Add conditional logic: if rating ≤ 2, show a follow-up comment box." You can continue refining with follow-up instructions, review the result in the JSON Editor tab, or switch to the visual designer for further tweaks.

2. Multi-Page Forms:

   • Users can create forms spanning multiple pages, enhancing the organization and flow of data collection. This is especially useful for lengthy surveys or forms that require detailed information from respondents.

3. Advanced Validation:

   • Each form field can be configured with various validation rules to ensure data integrity. This includes mandatory fields, pattern matching, range validation, and custom validation logic.

4. Customizable Form Elements:

   • A wide range of form elements are available, including text input, multiple-choice questions, dropdowns, rating scales, and more. Each element can be tailored to fit specific needs, ensuring flexibility in form design.

5. Conditional Logic:

   • Implement conditional logic to show or hide questions based on previous answers. This creates a dynamic and responsive form experience, guiding users through a tailored data collection process.

6. User-Friendly Interface:

   • The intuitive drag-and-drop interface of SurveyJS makes it easy for users to design and configure complex forms without requiring extensive technical knowledge.

7. Enhanced User Experience:

   • With features like progress indicators, custom themes, and responsive design, forms built with form builder, offer a professional and engaging user experience, encouraging higher completion rates.

8. Import and Export:

   • Export Forms from one Agent and import to another.

9. Publish and Draft:

   • Forms that are published, the LLM is aware of them and then can use them as part of the conversation

---

How Forms Are Added to a Conversation

There are three ways a form can appear during a conversation, each with different trade-offs.

1. LLM Tool Call (Automatic)

When a form is published, the LLM automatically becomes aware of it as a tool. The LLM reads the form's description and each field's description to decide when it is appropriate to present the form — no configuration required beyond publishing.

How it works:

• The LLM evaluates the conversation context against the form's description
• When it determines the form is relevant, it inserts it as a tool call
• The LLM can pre-fill fields with information it already knows from the conversation (e.g. the user's name, email, or previously stated preferences)

Best for: Forms that should appear contextually based on what the user is asking.

---

2. System Prompt Directive (No Tool Call)

You can instruct the LLM exactly when to insert a form by adding a directive tag to the system prompt. When the condition you describe is met, the LLM outputs the tag and the form appears — no tool call is made.

Tag format:

[control agentDataId="contact_us" type="form"]

Where contact_us is the Key Name of the form.

Example system prompt instruction:

When the user asks to contact support, insert this tag and stop:
[control agentDataId="contact_us" type="form"]

Advantage	No LLM tool call — faster and more predictable
Disadvantage	Cannot pass pre-filled field values to the form

Best for: Forms that should always appear at a specific, well-defined moment in the conversation.

---

3. Embed Directly on the Page (Web Control)

Insert a form directly into your web page using the <ai12z-form> web component. The form is always visible on the page — it does not depend on the conversation at all.

<ai12z-form
  key-name="contact_us"
  data-key="YOUR_API_KEY"
></ai12z-form>

Where contact_us is the Key Name of the form and YOUR_API_KEY is your project API key from the ai12z portal.

Best for: Standalone forms that live on a dedicated page or section, independent of the chatbot conversation.

---

Comparison

Method	Triggered by	Pre-fills fields	Requires tool call
LLM Tool Call	LLM decides contextually	Yes	Yes
System Prompt Directive	System prompt condition	No	No
Web Control Embed	Always visible on page	N/A	No