Contact Form

/* Componente: Contact Form */
/* Categoría: forms · Librería: mui · 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 mui-contact-form */

/* Material UI: el HTML es el DOM que renderizan <TextField> y <Button>; los atributos declarativos van en inputProps. */
/* 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 class="MuiPaper-root" style="max-width: 24rem; padding: 24px; display: grid; gap: 8px">
  <h2 class="MuiTypography-root MuiTypography-h5">Contacto</h2>
  <div class="MuiFormControl-root MuiTextField-root">
    <label class="MuiInputLabel-root" for="name">Nombre</label>
    <div class="MuiInputBase-root MuiOutlinedInput-root"><input class="MuiInputBase-input MuiOutlinedInput-input" id="name" name="name" type="text" required autocomplete="name" toolparamtitle="name" toolparamdescription="Nombre de quien escribe"></div>
  </div>
  <div class="MuiFormControl-root MuiTextField-root">
    <label class="MuiInputLabel-root" for="email">Correo electrónico</label>
    <div class="MuiInputBase-root MuiOutlinedInput-root"><input class="MuiInputBase-input MuiOutlinedInput-input" id="email" name="email" type="email" required autocomplete="email" toolparamtitle="email" toolparamdescription="Correo para responder"></div>
  </div>
  <div class="MuiFormControl-root MuiTextField-root">
    <label class="MuiInputLabel-root" for="message">Mensaje</label>
    <div class="MuiInputBase-root MuiOutlinedInput-root"><textarea class="MuiInputBase-input MuiOutlinedInput-input" id="message" name="message" rows="4" required toolparamtitle="message" toolparamdescription="Texto del mensaje"></textarea></div>
  </div>
  <button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-fullWidth" type="submit">Enviar mensaje</button>
</form>

<Paper component="form" data-form="contact-form" toolname="sendMessage" tooldescription="Envía un mensaje de contacto con nombre, correo y texto" toolautosubmit="" onSubmit={handleSubmit} sx={{ p: 3, display: "grid", gap: 2, maxWidth: 384 }}>
  <Typography variant="h5">Contacto</Typography>
  <TextField name="name" label="Nombre" type="text" required inputProps={{ toolparamtitle: "name", toolparamdescription: "Nombre de quien escribe" }} />
  <TextField name="email" label="Correo electrónico" type="email" required inputProps={{ toolparamtitle: "email", toolparamdescription: "Correo para responder" }} />
  <TextField name="message" label="Mensaje" type="text" required multiline rows={4} inputProps={{ toolparamtitle: "message", toolparamdescription: "Texto del mensaje" }} />
  <Button type="submit" variant="contained" fullWidth>Enviar mensaje</Button>
</Paper>

{
  "id": "mui-contact-form",
  "name": "Contact Form",
  "category": "forms",
  "library": "mui",
  "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",
    "mui"
  ],
  "controls": [
    {
      "variable": "--wm-primary",
      "label": "Color primario",
      "type": "color",
      "default": "#1976d2"
    },
    {
      "variable": "--wm-on-primary",
      "label": "Texto sobre primario",
      "type": "color",
      "default": "#ffffff"
    },
    {
      "variable": "--wm-radius",
      "label": "Radio",
      "type": "range",
      "default": "4px",
      "min": 0,
      "max": 24,
      "step": 1,
      "unit": "px"
    }
  ],
  "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",
    "shadcn-contact-form"
  ],
  "usage": {
    "framework": "react",
    "code": "<Paper component=\"form\" data-form=\"contact-form\" toolname=\"sendMessage\" tooldescription=\"Envía un mensaje de contacto con nombre, correo y texto\" toolautosubmit=\"\" onSubmit={handleSubmit} sx={{ p: 3, display: \"grid\", gap: 2, maxWidth: 384 }}>\n  <Typography variant=\"h5\">Contacto</Typography>\n  <TextField name=\"name\" label=\"Nombre\" type=\"text\" required inputProps={{ toolparamtitle: \"name\", toolparamdescription: \"Nombre de quien escribe\" }} />\n  <TextField name=\"email\" label=\"Correo electrónico\" type=\"email\" required inputProps={{ toolparamtitle: \"email\", toolparamdescription: \"Correo para responder\" }} />\n  <TextField name=\"message\" label=\"Mensaje\" type=\"text\" required multiline rows={4} inputProps={{ toolparamtitle: \"message\", toolparamdescription: \"Texto del mensaje\" }} />\n  <Button type=\"submit\" variant=\"contained\" fullWidth>Enviar mensaje</Button>\n</Paper>"
  },
  "preview": "preview.css",
  "css": "contact-form.webmcp.css",
  "html": "contact-form.html"
}