Formulario de registro en Angular
Crea un formulario de registro en Angular sin backend. Declara los campos como un FormGroup con validadores, haz POST del valor una sola vez a Formpaste, y los registros llegan a tu bandeja de entrada. Copia el componente y añade tu clave de acceso.
Como construirlo
- Crea un formulario en tu panel de Formpaste y copia su clave de acceso.
- Copia el componente de arriba en tu app e importa ReactiveFormsModule.
- Reemplaza YOUR_ACCESS_KEY_HERE con tu clave de acceso y despliega.
Puntos claves de Angular
Un formulario de contacto en Angular es un componente con un FormGroup y un manejador de envío que hace POST a Formpaste. No hay backend ni una API propia. Crea el grupo, vincúlalo a la plantilla y haz POST del valor.
Importa ReactiveFormsModule
Las directivas de la plantilla no son globales. Un componente standalone necesita ReactiveFormsModule en su arreglo de imports, y una app basada en NgModule lo necesita en el módulo. Omitirlo es la razón habitual por la que formGroup y formControlName parecen no hacer nada.
Vincula el grupo, no cada campo
Pon formGroup en el elemento form y formControlName en cada control. Angular mantiene los valores en el grupo, así que el manejador de envío lee this.form.value en lugar de tocar el DOM.
Sin ruta API propia
El componente hace POST directamente al endpoint de Formpaste, lo que elimina un servicio de correo y un almacén de envíos que de otra forma tendrías que construir. HttpClient también funciona si ya lo tienes inyectado, pero un fetch simple es suficiente.
Los validadores son del lado del cliente
Validators.required y el resto mejoran el formulario en el navegador. No filtran spam y nada tuyo se ejecuta en un servidor, así que Formpaste aplica su propio filtrado de spam después del POST.
Que debes acertar
Formpaste es un backend de formularios, no un proveedor de autenticación
Un formulario de registro recopila datos y te los envía por correo o los reenvía a tu sistema. No crea cuentas de acceso ni almacena contraseñas. Para una autenticación real, conecta el envío a tu herramienta de autenticación y nunca trates el formulario como un almacén de credenciales.
Nunca envíes contraseñas en texto plano por correo
Si recopilas una contraseña aquí, reenvía el envío a tu propio endpoint de registro mediante un webhook en lugar de dejar que llegue a una bandeja de entrada. Mejor aún, captura solo los datos que necesitas y deja que tu proveedor de autenticación establezca la contraseña.
Valida también en el cliente
Haz coincidir los dos campos de contraseña y exige un formato de correo válido en el navegador para que la gente corrija errores antes de enviar. Formpaste igual filtra el spam en el servidor.
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 completo
<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">Elige una contraseña
<input type="text" name="password" formControlName="password" 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">Confirma la contraseña
<input type="text" name="confirm" formControlName="confirm" 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>
<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">Crear cuenta</button>
</form>
`,
})
export class ContactFormComponent {
sending = false;
form = new FormGroup({
name: new FormControl("", Validators.required),
email: new FormControl("", Validators.required),
password: new FormControl("", Validators.required),
confirm: 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">Formulario de registro en 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.