Skip to main content

<ai12z-form> Web Control

Overview​

The ai12z-form is a web component that renders an AI-powered form — such as a hotel reservation, contact form, support request, or any custom form workflow — directly on your web page. Each form is identified by a key-name that maps to a form configured in your ai12z portal. You can embed multiple independent forms on the same page side-by-side. See Agent Settings API Key to get your API key.

Setup​

Add the following to the <head> of every page that uses the form control:

<script
  type="module"
  src="https://cdn.ai12z.net/pkg/ai12z@latest/dist/esm/library.js"
></script>
<link
  rel="stylesheet"
  href="https://cdn.ai12z.net/pkg/ai12z@latest/dist/library/library.css"
/>

You can then place one or more <ai12z-form> tags anywhere in your HTML.

Attributes​

<ai12z-form data-key="YOUR_API_KEY" key-name="<FORM_KEY_NAME>"></ai12z-form>
AttributeRequiredDescriptionExampleDefault
key-nameYesIdentifies which form to load. Must match a form key configured in your ai12z portal.key-name="Hotel_Reservation"
data-keyYesYour agent API key from ai12z Agent settings. Can be set via HTML attribute or JavaScript.data-key="YOUR_API_KEY"
data-modeYesRuntime environment. Use dev for testing, prod for production.data-mode="dev"prod

Basic Usage​

Single Form​

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

Multiple Forms Side-by-Side​

Place independent forms in a flex layout — each loads its own form configuration and operates independently:

<div style="display: flex; flex-direction: row;">
  <div style="width:50%">
    <ai12z-form data-key="YOUR_API_KEY" key-name="Hotel_Reservation">
      <!-- Optional: custom privacy policy slot -->
      <!-- <div slot="custom-privacy">Click here to view the privacy policy</div> -->
    </ai12z-form>
  </div>
  <div style="width:50%">
    <ai12z-form data-key="YOUR_API_KEY" key-name="Contact_Us"></ai12z-form>
  </div>
</div>

Configure Attributes via JavaScript​

All attributes can be set or updated dynamically after the component mounts:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const form = document.querySelector("ai12z-form")
    form.setAttribute("data-key", "YOUR_API_KEY")
    form.setAttribute("data-mode", "dev")
  })
</script>

Complete Example​

The example below renders two forms side-by-side: a hotel reservation form on the left and a contact form on the right.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ai12z Form Control</title>

    <!-- ai12z web components -->
    <script
      type="module"
      src="https://cdn.ai12z.net/pkg/ai12z@latest/dist/esm/library.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.ai12z.net/pkg/ai12z@latest/dist/library/library.css"
    />
  </head>

  <body>
    <div style="display: flex; flex-direction: row;">
      <div style="width:50%">
        <ai12z-form key-name="Hotel_Reservation">
          <!-- <div slot="custom-privacy">Click here to view the privacy policy</div> -->
        </ai12z-form>
      </div>
      <div style="width:50%">
        <ai12z-form key-name="Contact_Us"></ai12z-form>
      </div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const form = document.querySelector("ai12z-form")
        form.setAttribute("data-key", "YOUR_API_KEY")
      })
    </script>
  </body>
</html>

Use Cases​

Scenariokey-name value
Hotel reservationHotel_Reservation
Contact / enquiry formContact_Us
Support ticketSupport_Request
Lead generationLead_Capture
Event registrationEvent_Registration

Troubleshooting​

Form Does Not Render​

  • Verify key-name exactly matches the form key configured in your ai12z portal (case-sensitive).
  • Confirm the CDN script and stylesheet are loaded in <head> before the <ai12z-form> tag.
  • Check the browser console for network or JavaScript errors.

Multiple Forms on the Same Page​

  • Each <ai12z-form> operates independently based on its key-name.
  • To target a specific form instance with querySelector, use the attribute selector: document.querySelector('ai12z-form[key-name="Hotel_Reservation"]').