Formulario de encuesta en Angular
Crea un formulario de encuesta en Angular sin backend. Vincula los desplegables con formControlName, mantén un campo abierto para comentarios, y las respuestas 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 y edita las opciones según tus preguntas.
- 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
Mantenla corta para conservar una alta tasa de finalización
Cada pregunta adicional pierde respuestas. Un par de listas desplegables y un campo de comentario abierto suele reunir lo que necesitas sin generar fatiga.
Las listas desplegables superan al texto libre para el análisis
Las opciones fijas (campos select) son fáciles de contar después. Reserva el textarea para la única pregunta abierta que realmente lo necesite.
Haz que el correo sea opcional para respuestas más honestas
Las respuestas anónimas suelen ser más sinceras. Pide el correo solo si necesitas dar seguimiento, y márcalo como opcional.
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">Correo electrónico (opcional)
<input type="email" name="email" formControlName="email" placeholder="tu@ejemplo.com" 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">¿Qué te describe mejor?
<select name="role" formControlName="role" 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">
<option>Desarrollador</option>
<option>Diseñador</option>
<option>Fundador</option>
<option>Otro</option>
</select>
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">¿Qué tan satisfecho estás?
<select name="satisfaction" formControlName="satisfaction" 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">
<option>Muy satisfecho</option>
<option>Satisfecho</option>
<option>Neutral</option>
<option>Insatisfecho</option>
</select>
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">¿Algo más?
<textarea name="comments" formControlName="comments" 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 encuesta</button>
</form>
`,
})
export class ContactFormComponent {
sending = false;
form = new FormGroup({
email: new FormControl(""),
role: new FormControl("", Validators.required),
satisfaction: new FormControl("", Validators.required),
comments: new FormControl(""),
});
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 encuesta 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.