Ejemplo de formulario de contacto HTML
Un formulario de contacto limpio y accesible con campos de nombre, correo electrónico y mensaje. Este es el patrón más común para sitios estáticos y funciona en cualquier host sin servidor.
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<label for="name">Name</label>
<input type="text" id="name" name="name" required />
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
<input type="checkbox" name="botcheck" style="display:none" />
<button type="submit">Send Message</button>
</form>
Textarea en formulario HTML
El elemento textarea crea una entrada de texto de varias líneas dentro de un formulario. Utilice los atributos de filas y columnas para establecer el tamaño predeterminado o aplicarle estilo con CSS. Este ejemplo muestra un formulario de comentarios con un área de texto grande.
Leer la guía de área de texto <form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
<label for="feedback">Feedback</label>
<textarea id="feedback" name="feedback" rows="6" cols="40" placeholder="Tell us what you think..." required></textarea>
<input type="checkbox" name="botcheck" style="display:none" />
<button type="submit">Submit Feedback</button>
</form>
Ejemplo de formulario HTML
Un ejemplo de formulario HTML mínimo y listo para producción que puede copiar y personalizar. Incluye todos los atributos requeridos y un campo honeypot para protección básica contra spam.
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input type="text" name="name" placeholder="Your name" required />
<input type="email" name="email" placeholder="Your email" required />
<textarea name="message" placeholder="Your message" required></textarea>
<input type="checkbox" name="botcheck" style="display:none" />
<button type="submit">Submit</button>
</form>
Diseño de formulario HTML de varias columnas
Divida su formulario en columnas usando CSS Grid. El backend sigue recibiendo los mismos nombres de campos independientemente de cómo esté diseñado el frontend.
<style>
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-grid .full {
grid-column: 1 / -1;
}
</style>
<form class="form-grid" action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input name="first_name" placeholder="First name" required />
<input name="last_name" placeholder="Last name" required />
<input name="email" type="email" placeholder="Email" class="full" required />
<textarea name="message" placeholder="Message" class="full" rows="4" required></textarea>
<input type="checkbox" name="botcheck" style="display:none" />
<button type="submit" class="full">Send</button>
</form>
Formulario HTML con carga de archivos
Permita que los visitantes adjunten archivos estableciendo enctype en multipart/form-data y agregando una entrada con tipo=archivo. Restrinja los tipos de archivos aceptados con el atributo de aceptación.
<form action="https://api.formsfort.com/submit" method="POST" enctype="multipart/form-data">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<input type="file" name="attachment" accept=".pdf,.doc,.docx,image/*" />
<input type="checkbox" name="botcheck" style="display:none" />
<button type="submit">Upload</button>
</form>
Formulario HTML con casillas de verificación y botones de opción
Utilice casillas de verificación cuando los usuarios puedan seleccionar múltiples opciones y botones de opción cuando deban elegir una. Los nombres repetidos se entregan como valores separados por comas.
Leer la guía de botones de opción <form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input type="email" name="email" placeholder="Email" required />
<p>Interests (select all that apply):</p>
<label><input type="checkbox" name="interest" value="Product" /> Product</label>
<label><input type="checkbox" name="interest" value="Sales" /> Sales</label>
<label><input type="checkbox" name="interest" value="Support" /> Support</label>
<p>Plan:</p>
<label><input type="radio" name="plan" value="Free" required /> Free</label>
<label><input type="radio" name="plan" value="Pro" /> Pro</label>
<input type="checkbox" name="botcheck" style="display:none" />
<button type="submit">Subscribe</button>
</form>
Formulario HTML con menú desplegable de selección
El elemento seleccionado crea una lista desplegable. Utilice el atributo múltiple para permitir más de una selección. Cada opción necesita un valor que recibirá el backend.
Leer la guía desplegable de selección <form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input type="text" name="name" placeholder="Name" required />
<label for="topic">Topic</label>
<select id="topic" name="topic" required>
<option value="">Choose a topic</option>
<option value="sales">Sales</option>
<option value="support">Support</option>
<option value="partnerships">Partnerships</option>
</select>
<input type="checkbox" name="botcheck" style="display:none" />
<button type="submit">Send</button>
</form>
Formulario de suscripción al boletín HTML
Un formulario mínimo solo para correo electrónico, perfecto para suscribirse al boletín. El campo honeypot permanece oculto para los usuarios, pero detecta bots de spam básicos.
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input type="hidden" name="subject" value="New newsletter signup" />
<input type="email" name="email" placeholder="Enter your email" required />
<input type="checkbox" name="botcheck" style="display:none" />
<button type="submit">Subscribe</button>
</form>