Los formularios web son la columna vertebral de los sitios web en la actualidad. Desde las páginas de inicio de sesión y registro hasta los pedidos y los formularios de contacto, los sitios web necesitan una forma para que los usuarios envíen su información, y los formularios son la mejor manera de hacerlo.
Si desea codificar su propio formulario, Bootstrap CSS es uno de los mejores marcos disponibles. Responsive es la prioridad en esta estructura para que sea más fácil para los usuarios móviles navegar por su sitio. Ya que la mitad de todo el tráfico web proviene de dispositivos móvilesdefinitivamente vale la pena considerarlo.
Afortunadamente, no tiene que crear un formulario completamente desde cero: muchos desarrolladores ya han creado plantillas de formulario gratuitas y disponibles públicamente para muchos tipos diferentes de formularios. Para ayudarlo a crear un formulario web efectivo usando Bootstrap, hemos reunido más de 30 de nuestros favoritos. Empecemos.
Las mejores plantillas de formulario Bootstrap gratuitas
En esta lista, proporcionaremos plantillas para los siguientes tipos de formularios:
Plantillas de formulario de registro de Bootstrap
1. Formulario de registro sencillo (Bootstrap)
Este primer formulario se toma de la propia documentación de Bootstrap como un ejemplo principal de lo que un principiante puede crear para su flujo de registro.
2. Forma horizontal (Bootstrap)
La última plantilla de los documentos de Bootstrap simplemente solicita su dirección de correo electrónico y contraseña, con opciones para completar un botón de opción o una casilla de verificación.
3. Formulario de registro (vosidiy na Bootsnipp)
Este formulario de registro profesional es uno de nuestros formularios favoritos de Bootstrap y se parece a muchas aplicaciones web populares. Los íconos que acompañan a cada campo de formulario lo hacen un poco más fácil de usar y la opción de inicio de sesión social es claramente visible.
4. Formulario de registro V1 (Colorlib)
Colorlib ofrece varias plantillas de Bootstrap gratuitas y de alta calidad, incluido este sencillo formulario de registro. Tiene un fondo azul, un espacio de imagen y cinco campos de texto que se pueden modificar.
5. Formulario de registro V2 (Colorlib)
Aquí hay otra plantilla de formulario de registro de Colorlib que coloca una imagen junto al formulario en lugar de arriba, si prefiere ese diseño. De lo contrario, todos los campos del formulario son iguales.
6. Asistente 1 (Colorlib)
Colorlib también ofrece varios formularios de varios pasos que puede usar para registrarse, crear una cuenta o pagar. Este lo guiará a través del proceso de configuración de una cuenta y se las arregla para lucir elegante y compatible con dispositivos móviles.
7. Mago 10 (Colorlib)
Esta forma de asistente de Colorlib aparece como una superposición sobre una imagen de fondo, creando una apariencia moderna y minimalista. Una vez más, es excelente para registrarse, iniciar sesión y pagar.
8. Formulario de registro (validación Bootstrap 5) (Norton Sam en CodePen)
Otro registro simple pero efectivo, esta plantilla de Bootstrap invierte los colores y funciona bien en cualquier sitio web de temática oscura.
9. Formulario de registro con foto (Epic Bootstrap)
Esta plantilla incluye una foto más destacada junto al formulario, un proceso de registro simple y un esquema de colores que puede conocer si ha alquilado la cabaña a un extraño para el fin de semana.
10. Página de registro (Creative Tim)
Si desea incluir un guardado social en el formulario de registro, esta plantilla de Bootstrap le brinda esa opción. Además, su fondo naranja brillante destaca sobre cualquier imagen de fondo.
11. Formulario Bootstrap en línea (W3)
No hay nada más simple que esta plantilla de formulario integrada de W3 que puede usar para su formulario de registro o personalizar para su boletín de CTA. De cualquier manera, el diseño de una sola línea le permite colocarlo en un encabezado o pie de página.
12. Formulario de registro/inicio de sesión (Eric en CodePen)
Este formulario adquiere un aspecto más cuadrado y funciona bien como modal. También tenga en cuenta su doble propósito como formulario de registro o inicio de sesión, alternado en la parte superior.
13. Formulario Bootstrap (brillante cristiano en CodePen)
Blanco, azul claro puede ser demasiado para algunas personas, este diseño es otra gran opción para un modal o una ventana emergente.
14. Formulario Bootstrap plano (Liliana Brissos en CodePen)
Los diseños planos son muy populares en el diseño web actual. Esta plantilla combina la estética muy bien, con un toque ocasional de color que guía la vista de un paso al siguiente.
Plantillas de formulario de inicio de sesión de Bootstrap
15. Formulario de menú de inicio de sesión (Bootstrap)
Un ejemplo de menú de inicio de sesión de Bootstrap hecho a sí mismo es simple. Este es un excelente punto de partida para crear su propia página de inicio de sesión.
16. Vaya al formulario de inicio de sesión/registro (Nikolay Talanov en CodePen)
Esta plantilla de formulario de inicio de sesión es un poco más elaborada, pero aún contiene todos los elementos esenciales: campo de correo electrónico y contraseña, botón de inicio de sesión, «¿olvidó su contraseña?» aviso y la posibilidad de registrarse o iniciar sesión a través de Facebook.
17. Formulario de inicio de sesión v1 (Colorlib)
Colorlib viene con un conjunto de plantillas de formulario de inicio de sesión simples y elegantes creadas con Bootstrap que son gratuitas y totalmente personalizables. Este le permite colocar cualquier imagen a la izquierda y mantener todo contenido en una ventana.
18. Formulario de inicio de sesión oscuro (Epic Bootstrap)
Los fanáticos del modo oscuro prueban esta forma. Es minimalista, moderno, fácil de usar y no cansa la vista.
19. Línea de forma (pablocorezzola en Bootsnipp)
Hablando de lo mínimo, aquí hay una plantilla de formulario de inicio de sesión más con un diseño plano. Esta forma está tan truncada que puede transformarse en prácticamente cualquier forma.
Plantillas de formulario de contacto de Bootstrap
20. Sin título (Sebastiao Solimenes en CodePen)
Cuantos menos elementos incluya en un formulario de contacto, más probable es que los usuarios lo completen. Esta plantilla de formulario súper básica solo tiene cuatro opciones y un diseño compacto que se adapta fácilmente a la barra lateral de la página.
21. Bootstrap 3 Formulario de contacto con validación (Jay na CodePen)
Este popular fragmento de código de CodePen contiene todos los formularios que su formulario de contacto necesitará para recopilar información del visitante y, al mismo tiempo, verificar la entrada del usuario para asegurarse de que esté en el formato correcto antes de enviarlo.
22. Formulario de contacto 1 (Colorlib)
No es de extrañar que Colorlib también incluya formularios de contacto de Bootstrap. Aquí hay cuatro cuadros con una imagen visible, un botón de envío claro y lados redondeados de los cuadros de entrada para que el formulario se vea más amigable.
Plantillas de formulario de pago de Bootstrap
23. Formulario de dirección (Bootstrap)
Los formularios de pago pueden ser complicados ya que hay algunos campos necesarios que aceptan diferentes formatos. Bootstrap proporciona una plantilla de formulario básica para comenzar: contiene los campos a los que los usuarios están acostumbrados cuando envían una dirección de envío.
24. Formulario de tarjeta de crédito Bootstrap 4 (Bootstrapious)
Puede emparejar la última plantilla con esta para aceptar direcciones y pagos. También nos gusta el interruptor en la parte superior que permite a los usuarios elegir su método de pago preferido.
Plantillas de formulario de boletín informativo de Bootstrap
25. Etiquetas deslizantes para formularios Bootstrap (Alessandro Falchi en CodePen)
Este formulario contiene animaciones geniales con etiquetas de formulario. Pruébalo si quieres ir un paso más allá con el diseño de tu formulario.
26. Bootstrap de formulario en línea (yoris na CodePen)
O bien, opte por un enfoque más simple (pero aún efectivo) para un formulario de boletín de noticias compatible con dispositivos móviles para recopilar clientes potenciales. Para entrar en la lista, todo lo que necesita hacer es ingresar su nombre y dirección de correo electrónico.
Otras plantillas de formulario de Bootstrap
27. Formulario Bootstrap (Stefan Pater en CodePen)
Este modal de botón pulsador es ideal para mantener la atención del usuario únicamente en el formulario, sin distraerse. Solo asegúrese de que el propósito de su formulario valga la pena desviar su atención del resto del contenido de su sitio web por un tiempo.
28. Formulario de reserva V1 (Colorlib)
¿Dirige un sitio web de eventos o alojamiento? Esta plantilla de formulario de reserva de Colorlib es perfecta para su página de inicio o página de destino, con campos simples que funcionan muy bien desde el primer momento.
29. Formulario de reserva de reunión (Chaiyachet na CodePen)
Las reservas de reuniones son otro uso popular de los formularios web. Personalice esta plantilla de formulario para reservas de salas, reservas de reuniones e incluso reservas de eventos en su sitio.
30. Asistente de formulario de solicitud de presupuesto de Bootstrap 4 (Omkar Bailkeri en BBBootstrap)
Permita que los visitantes soliciten una cotización utilizando este formulario de solicitud de cotización fácil de usar y compatible con dispositivos móviles. La barra de progreso en la parte superior los mantiene comprometidos en cada paso del camino, asegurando que más usuarios realmente lleguen al final.
31. Ejemplo de formulario Bootstrap (Dendi Sunardi en CodePen)
Esta plantilla de varias columnas es otra opción personalizable para su sitio web, ideal para formularios más largos con más campos obligatorios.
32. Formulario de restablecimiento de contraseña (Ihor Sukhorada en CodePen)
Finalmente, esta plantilla permite a los usuarios restablecer sus contraseñas. Lo último que quieren hacer los usuarios después de perder su contraseña es completar campos innecesarios, por lo que este formulario tiene exactamente una entrada y un botón.
Cree mejores formularios con Bootstrap.
Al crear cualquier sitio web, debe considerar a los usuarios móviles junto con los usuarios de escritorio y eso significa que el diseño receptivo debe considerarse desde el principio.
La estructura de Bootstrap garantiza que sus páginas siempre sean compatibles con dispositivos móviles y que usted, el desarrollador, requiera poco trabajo adicional. Y gracias al formulario correcto, puede preocuparse menos por el proyecto y más por los registros, envíos y conversiones.
