Skip to main content

<ai12z-form> Landing Page Control

The <ai12z-form> control renders a standalone form experience directly on a page. This is useful when you want to collect structured information from a visitor without requiring them to start a chat conversation first.

The form can support workflows such as lead capture, intake, requests, or service submissions, and can be embedded directly into a landing page or other content area.


Embed Code

<ai12z-form
key-name="contact_us"
data-key="YOUR_API_KEY"
></ai12z-form>
AttributeDescription
key-nameThe Key Name of the form, set when the form is created in the ai12z portal
data-keyYour project API key, found under Project Settings → API Keys in the portal

Fields, validation, events, and submission flow are all configured from your form definition in the portal — not from the embed code itself.


Common Use Cases

  • Contact or lead forms
  • Request a demo
  • Book a showing
  • Buyer or seller intake
  • Support request forms
  • Guided multi-step forms

Key Difference from Other Web Controls

Controls like <ai12z-bot>, <ai12z-cta>, and <ai12z-knowledge-box> are configured through the Web Controls section of the portal and are driven by the conversation.

<ai12z-form> and <ai12z-container> are page-embedded controls intended for landing page experiences. Their behavior and content are defined in the page template or through JavaScript at runtime, giving developers more control over layout, initialization, and interaction.

ControlConfigured viaConversation-driven
<ai12z-bot>Web Controls portalYes
<ai12z-cta>Web Controls portalYes
<ai12z-knowledge-box>Web Controls portalYes
<ai12z-form>Form definition + embed codeNo — standalone
<ai12z-container>Template / JavaScriptNo — standalone

Notes

  • <ai12z-form> is embedded directly in the page — it does not require the chatbot to be open or active
  • It is configured through the form definition rather than through the standard Web Controls configuration area
  • It is intended for structured data collection and downstream workflow actions
  • For form setup, field configuration, validation, events, and submission handling see Forms Introduction and Create / Edit Form Properties