Formularios de contacto para Angular
Crea un formulario de contacto funcional para tu app de Angular sin backend. Es un componente con un FormGroup, formControlName en cada campo, y un manejador ngSubmit que hace POST a Formpaste. Pruébalo en vivo, copia el componente, y los envíos llegan a tu bandeja de entrada, con filtrado de spam.
Cómo crear un formulario en Angular
- 1
Crea un formulario en tu panel de Formpaste y copia su clave de acceso.
- 2
Copia el componente de arriba en tu app e importa ReactiveFormsModule.
- 3
Reemplaza YOUR_ACCESS_KEY_HERE con tu clave de acceso y despliega.
Prompt para tu agente de programación con IA
Add a Formpaste contact form to my Angular app. Use a standalone component that imports ReactiveFormsModule, builds a FormGroup with FormControl for name, email and message, binds it with formGroup and formControlName, and POSTs the value as application/x-www-form-urlencoded (URLSearchParams) to https://api.formpaste.com/submit with the access_key included. No backend.O conecta el servidor MCP de Formpaste con Claude Code, Codex, Cursor, Claude Desktop, VS Code o cualquier cliente mcp-remote. Ver la guía de configuración.
Un componente y un FormGroup
Un formulario de contacto en Angular es un componente. Declaras un FormGroup con un
FormControl por campo, lo vinculas en la plantilla con [formGroup] y
formControlName, y manejas (ngSubmit) haciendo POST de this.form.value a Formpaste.
No hay ruta API, ni servicio de correo, ni base de datos: el envío llega a tu bandeja de
entrada.
ReactiveFormsModule es el detalle que atrapa
Las directivas de la plantilla no son globales. Un componente standalone necesita
ReactiveFormsModule en su arreglo de imports; una app basada en NgModule lo necesita
en el módulo. Si formGroup y formControlName parecen ser ignorados, esa importación
es casi siempre lo que falta.
Los validadores son para el visitante
Validators.required y el resto mejoran el formulario en el navegador, y eso es todo lo
que hacen. Nada tuyo se ejecuta en un servidor, así que no pueden filtrar spam: Formpaste
aplica su propio filtrado de spam una vez que el envío llega.
Cómo funciona
Tres pasos simples para que los envíos de formularios lleguen a tu bandeja de entrada.
Crea tu formulario, apunta la URL de action al endpoint de Formpaste y añade tu clave de acceso.
Crea tu formulario
Regístrate, verifica tu correo y crea una clave de acceso en tu panel.
Copia el código
Pega el fragmento de arriba en tu proyecto. Elige CSS o Tailwind para que combine con tu sitio.
import { Component } from "@angular/core";
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
const ACCESS_KEY = "YOUR_ACCESS_KEY_HERE";
@Component({
selector: "app-contact-form",
standalone: true,
imports: [ReactiveFormsModule],
template: `
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="mx-auto flex w-full max-w-md flex-col gap-4 rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-950">
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Nombre
<input type="text" name="name" formControlName="name" placeholder="Tu nombre" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Correo electrónico
<input type="email" name="email" formControlName="email" placeholder="tu@ejemplo.com" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Mensaje
<textarea name="message" formControlName="message" required class="min-h-28 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100"></textarea>
</label>
<button type="submit" class="w-full rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-gray-800 disabled:opacity-60 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200" [disabled]="sending">Enviar</button>
</form>
`,
})
export class ContactFormComponent {
sending = false;
form = new FormGroup({
name: new FormControl("", Validators.required),
email: new FormControl("", Validators.required),
message: new FormControl("", Validators.required),
});
async onSubmit() {
this.sending = true;
await fetch("https://api.formpaste.com/submit", {
method: "POST",
body: new URLSearchParams({
access_key: ACCESS_KEY,
...Object.fromEntries(
Object.entries(this.form.value).map(([k, v]) => [k, v ?? ""]),
),
}),
});
this.sending = false;
this.form.reset();
}
}Añade tu clave de acceso
Reemplaza el marcador por tu clave de acceso para empezar a recibir envíos.
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">Formularios de contacto para Angular FAQ
Pega un formulario. Recibe envíos.
Al instante, sin configurar ningún backend, servidor ni base de datos. 250 envíos/mes gratis, sin tarjeta de crédito.
Lo que obtienes con Formpaste
Sin servidor, sin DNS
Apunta tu formulario a Formpaste: sin backend, sin DNS, sin servidor de correo que mantener.
Spam filtrado automáticamente
Heurísticas más una carpeta de cuarentena que tú controlas. Los mensajes reales siempre llegan.
Cuarentena que tú controlas
Los envíos sospechosos llegan a una carpeta que revisas: nada se descarta en silencio.
Creado para agentes de IA
Un servidor MCP que tu agente de código llama para crear un formulario y configurarlo.
Componentes para copiar y pegar
Código de formulario accesible para copiar y pegar en HTML, React, TypeScript, JavaScript y Astro.
Panel sencillo
Gestiona formularios, bandeja de entrada, cuarentena y entrega desde un solo lugar.