# Turn a form into a page tool

> Add two attributes to a form and the agent can fill it in, and submit it if you allow.

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.

```html
<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

| Attribute | On | What it does |
| --- | --- | --- |
| `toolname` | The form | Required. The tool's name. |
| `tooldescription` | The form | Required. When to use it and what it does. |
| `toolautosubmit` | The form | Optional. Submit the form once it's filled in. |
| `toolparamdescription` | A field | Optional. What the field is for. Without it, the field's label is used, then its `aria-description`. |

## How fields become inputs

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

| Field | The agent fills in |
| --- | --- |
| A `select` or a group of radio buttons | One of its values |
| A checkbox | `true` or `false` |
| A number or range | A number |
| Any other input, or a `textarea` | Text |

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](https://docs.help.ai/page-tools/page-tools-and-webmcp).