Turn a form into a page tool

A form on your page can become a tool with two attributes. The agent fills it in, and submits it too if you allow it. This works in every browser, with no script to write.

<form toolname="request_demo" tooldescription="Request a product demo for the visitor." toolautosubmit>
  <label for="email">Work email</label>
  <input id="email" name="email" type="email" required />

  <input name="company" toolparamdescription="The visitor's company name" />

  <select name="plan">
    <option value="starter">Starter</option>
    <option value="pro">Pro</option>
  </select>

  <button>Request demo</button>
</form>

Attributes#

How fields become inputs#

Every field with a name is an input the agent can fill:

Hidden, disabled, file and password fields are left out. Fields marked required are required inputs. The widget fills fields the way a visitor would, so React, Vue and other frameworks see the change.

The widget reads your forms each time the visitor sends a message, so a form that appears later, such as in a dialog, counts too.

Passwords stay with the visitor#

The agent never sees or fills a password field. On a sign-up form, it fills in the rest, and the visitor types their password and submits.

Submitting#

• Without toolautosubmit: the agent fills in the form, and the visitor checks it and presses its button. The agent tells them so.
• With toolautosubmit: the form is submitted once it's filled in, as if the visitor had pressed its button, so your own submit handling runs as usual.
• When a field blocks the submit, such as a password or a value the browser rejects, like a malformed email, the form isn't submitted. The agent is told which field needs the visitor and asks them to finish it.

WebMCP#

These are the attribute names of WebMCP's declarative forms. In a browser with WebMCP turned on, the widget still fills your form itself, so it behaves the same everywhere and your form's own submit handling keeps working. See Page tools and WebMCP.