Contact Form

/* Componente: Contact Form */
/* Categoría: forms · Librería: shadcn · Versión: 1.0.0 */
/* Formulario de contacto IA-First (nombre, email, mensaje) con API declarativa WebMCP y toolautosubmit: un agente puede rellenarlo y enviarlo sin intervención. */
/* Importar: npx webmcpcss components import shadcn-contact-form */

/* shadcn/ui: el HTML es el DOM que renderizan <Input>/<Label>/<Button>; los atributos declarativos se pasan tal cual. */
/* Contrato WebMCP (equivalente al marcado declarativo del HTML: toolname/tooldescription/toolparamtitle) */
form[data-form="contact-form"] button[type="submit"] {
  webmcp-tool: "sendMessage";
  webmcp-description: "Envía un mensaje de contacto con nombre, correo y texto";
  webmcp-param-name: value(form[data-form="contact-form"] [name="name"]);
  webmcp-param-email: value(form[data-form="contact-form"] [name="email"]);
  webmcp-param-message: value(form[data-form="contact-form"] [name="message"]);
  webmcp-trigger: "submit" on form[data-form="contact-form"];
  webmcp-intent: "submit";
  webmcp-confirmation: "none";
  webmcp-permissions: "restricted";
  webmcp-autosubmit: "true";
  webmcp-doc-name: "Nombre de quien escribe";
  webmcp-doc-email: "Correo para responder";
  webmcp-doc-message: "Texto del mensaje";
}

<form data-form="contact-form" toolname="sendMessage" tooldescription="Envía un mensaje de contacto con nombre, correo y texto" toolautosubmit action="#" method="post" novalidate data-slot="card" class="grid w-full max-w-sm gap-4 rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
  <h2 data-slot="card-title" class="text-xl font-semibold leading-none">Contacto</h2>
  <div class="grid gap-2">
    <label data-slot="label" for="name" class="text-sm font-medium leading-none">Nombre</label>
    <input data-slot="input" id="name" name="name" type="text" required autocomplete="name" toolparamtitle="name" toolparamdescription="Nombre de quien escribe" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring">
  </div>
  <div class="grid gap-2">
    <label data-slot="label" for="email" class="text-sm font-medium leading-none">Correo electrónico</label>
    <input data-slot="input" id="email" name="email" type="email" required autocomplete="email" toolparamtitle="email" toolparamdescription="Correo para responder" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring">
  </div>
  <div class="grid gap-2">
    <label data-slot="label" for="message" class="text-sm font-medium leading-none">Mensaje</label>
    <textarea data-slot="textarea" id="message" name="message" rows="4" required toolparamtitle="message" toolparamdescription="Texto del mensaje" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring h-auto min-h-16"></textarea>
  </div>
  <button data-slot="button" type="submit" class="inline-flex h-9 w-full items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow-sm hover:opacity-90 focus-visible:ring-[3px] focus-visible:ring-ring">Enviar mensaje</button>
</form>

<Card asChild>
  <form data-form="contact-form" toolname="sendMessage" tooldescription="Envía un mensaje de contacto con nombre, correo y texto" toolautosubmit="" onSubmit={handleSubmit} className="grid gap-4 p-6">
    <CardTitle>Contacto</CardTitle>
    <div className="grid gap-2">
      <Label htmlFor="name">Nombre</Label>
      <Input id="name" name="name" type="text" required toolparamtitle="name" toolparamdescription="Nombre de quien escribe" />
    </div>
    <div className="grid gap-2">
      <Label htmlFor="email">Correo electrónico</Label>
      <Input id="email" name="email" type="email" required toolparamtitle="email" toolparamdescription="Correo para responder" />
    </div>
    <div className="grid gap-2">
      <Label htmlFor="message">Mensaje</Label>
      <Textarea id="message" name="message" required toolparamtitle="message" toolparamdescription="Texto del mensaje" />
    </div>
    <Button type="submit" className="w-full">Enviar mensaje</Button>
  </form>
</Card>

{
  "id": "shadcn-contact-form",
  "name": "Contact Form",
  "category": "forms",
  "library": "shadcn",
  "version": "1.0.0",
  "description": "Formulario de contacto IA-First (nombre, email, mensaje) con API declarativa WebMCP y toolautosubmit: un agente puede rellenarlo y enviarlo sin intervención.",
  "author": "WebMCPcss Team",
  "tags": [
    "form",
    "contact",
    "declarative",
    "autosubmit",
    "shadcn"
  ],
  "controls": [
    {
      "variable": "--primary",
      "label": "Color primario",
      "type": "color",
      "default": "#18181b"
    },
    {
      "variable": "--primary-foreground",
      "label": "Texto sobre primario",
      "type": "color",
      "default": "#fafafa"
    },
    {
      "variable": "--radius",
      "label": "Radio",
      "type": "range",
      "default": "0.625rem",
      "min": 0,
      "max": 1.5,
      "step": 0.125,
      "unit": "rem"
    }
  ],
  "promptExamples": [
    "añade un campo de teléfono al formulario de contacto",
    "cambia el color del botón Enviar mensaje"
  ],
  "animateExamples": [
    "aplica slide-up al formulario de contacto",
    "haz que el botón de enviar pulse cuando el formulario sea válido"
  ],
  "related": [
    "core-contact-form",
    "tailwind-contact-form",
    "bootstrap-contact-form",
    "mui-contact-form"
  ],
  "usage": {
    "framework": "react",
    "code": "<Card asChild>\n  <form data-form=\"contact-form\" toolname=\"sendMessage\" tooldescription=\"Envía un mensaje de contacto con nombre, correo y texto\" toolautosubmit=\"\" onSubmit={handleSubmit} className=\"grid gap-4 p-6\">\n    <CardTitle>Contacto</CardTitle>\n    <div className=\"grid gap-2\">\n      <Label htmlFor=\"name\">Nombre</Label>\n      <Input id=\"name\" name=\"name\" type=\"text\" required toolparamtitle=\"name\" toolparamdescription=\"Nombre de quien escribe\" />\n    </div>\n    <div className=\"grid gap-2\">\n      <Label htmlFor=\"email\">Correo electrónico</Label>\n      <Input id=\"email\" name=\"email\" type=\"email\" required toolparamtitle=\"email\" toolparamdescription=\"Correo para responder\" />\n    </div>\n    <div className=\"grid gap-2\">\n      <Label htmlFor=\"message\">Mensaje</Label>\n      <Textarea id=\"message\" name=\"message\" required toolparamtitle=\"message\" toolparamdescription=\"Texto del mensaje\" />\n    </div>\n    <Button type=\"submit\" className=\"w-full\">Enviar mensaje</Button>\n  </form>\n</Card>"
  },
  "preview": "preview.css",
  "css": "contact-form.webmcp.css",
  "html": "contact-form.html"
}