7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. JavaScript

Cómo hacer un formulario en HTML y JavaScript gratis

Scroll to top
Read Time: 13 mins

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Los formularios son necesarios para casi todos los sitios web, por lo que tiene sentido que existan muchos servicios, bibliotecas y plugins gratuitos y de pago para facilitar su creación. En este artículo, voy a enumerar algunas herramientas, plugins y bibliotecas que puedes usar si quieres aprender cómo hacer un formulario gratis en línea sin necesidad de tener conocimientos de JavaScript. Algunas de estas herramientas te permiten crear formularios gratis completamente sin restricciones, mientras que otras solo pueden usarse gratuitamente hasta llegar a un límite determinado.

También enumeraré algunas bibliotecas útiles que pueden ayudarte a crear formularios JavaScript con facilidad si tienes conocimientos básicos de este lenguaje. Las bibliotecas son de uso gratuito, por lo que, con ellas, puedes crear tantos formularios como desees.

Comencemos este tutorial sobre cómo hacer un formulario en HTML y JavaScript gratis con las herramientas que se encuentran disponibles en línea.

Herramientas para crear formularios gratis

Bootsnipp: Creador y generador de formularios CSS de Bootstrap

Bootsnipp es una herramienta de uso completamente gratuito para cualquier persona. Puedes utilizar este generador para hacer un formulario gratis ¡o tantos como desees! Bootsnipp genera código HTML que puedes copiar y pegar en tu propia página web.

Este generador de formularios en HTML con función de arrastrar y soltar te permite arrastrar componentes desde el lado izquierdo y soltarlos en el lado derecho para crear un formulario gratis. Una vez que hayas soltado un componente de captura de datos, puedes hacer clic en él para ver un pequeño formulario y escribir información como su ID, el texto de la etiqueta, el texto del marcador de posición y otra información de elemento específica de acuerdo a cada componente.

La imagen a continuación puede servir como ejemplo de un formulario con componentes de Bootsnipp:

Ejemplo de un formulario con componentes de Bootsnipp

Cuando hayas terminado de crear tu formulario en HTML, puedes obtener fácilmente el código generado haciendo clic en el botón Ver HTML. Prueba esta herramienta si quieres aprender cómo hacer formularios gratis basados en Bootstrap.

De hecho, el sitio web de Bootsnipp también ofrece otras herramientas que pueden resultarte útiles, como un creador de botones y un generador de páginas.

jQuery formBuilder

Este generador de formularios basado en jQuery también es una herramienta completamente gratuita, y ofrece un método de arrastrar y soltar para crear formularios gratis que es muy sencillo de usar. Solamente tienes que arrastrar diferentes componentes de formulario de la lista de la derecha y colocarlos en el lado izquierdo. Una vez que hayas hecho eso, podrás hacer clic en el botón de edición en la esquina superior derecha del componente de formulario para editar todos sus atributos, como el texto del marcador de posición de ser necesario, ¡y mucho más!

jQuery formBuilder es una herramienta para crear formularios gratis

Si te preguntas cómo hacer un formulario en HTML y JavaScript en diferentes idiomas, esta es la opción perfecta, ya que otro maravilloso aspecto de esta herramienta es que puedes crear tus formularios en cualquiera de los 27 idiomas diferentes que tiene disponibles.

Mediante el uso del plugin formRender puedes renderizar fácilmente cualquier formulario, o plantilla de formulario que generes con esta herramienta. Puedes obtener más información sobre el proceso de creación y renderizado de formularios en el sitio web oficial.

pForm: Generador de formularios en HTML gratis

pForm es otro generador de formularios basado en HTML que te permite crear un formulario gratis siguiendo tres sencillos pasos.

Posiblemente te preguntes cómo hacer un formulario gratis con esta herramienta, y es muy sencillo: comienzas eligiendo una combinación de colores para tu formulario y luego agregas algunos campos de entrada. Una vez que hayas agregado a tu formulario los elementos de entrada, podrás establecer el valor de varios atributos, por ejemplo el texto de la etiqueta, el tipo de campo y otros atributos.

En la siguiente imagen puedes ver ejemplos de formularios que puedes crear con este generador:

Ejemplos de formularios creados con pForm: Generador de formularios en HTML gratis

Después de añadir todos los campos que desees a tu formulario en HTML, simplemente haz clic en el botón Guardar formulario para descargar el código HTML generado. En este punto, también tendrás la opción de previsualizar el formulario antes de descargarlo o de regresar y editar nuevamente los campos de entrada.

Sigue adelante y haz uso de pForm ahora que ya sabes cómo hacer un formulario gratis con él: es increíblemente sencillo, y también tienes la posibilidad de elegir tu propio esquema de color para tus formularios.

Cómo hacer formularios en HTML y JavaScript con más herramientas avanzadas

Los servicios presentados en esta sección te brindan una manera sencilla de hacer formularios gratis complejos, pero sus planes gratuitos solamente ofrecen características muy limitadas. Si quieres aprender cómo hacer un formulario gratis más complicado, las herramientas que te presentamos aquí son una forma de hacerlo. Sin embargo, si tienes conocimientos básicos de HTML y JavaScript, utilizar uno de los plugins de formulario de CodeCanyon para crear tus formularios JavaScript y HTML podría ser mejor y más barato para ti.

    JotForm

    JotForm tiene un plan de inicio gratuito, que te permite crear hasta cinco formularios gratis y realizar 100 envíos mensuales sin costo. También te permitirá recibir alrededor de 1,000 vistas mensuales a tus formularios. Los formularios que generes contendrán la marca "JotForm" si utilizas el paquete de inicio gratuito.

    En la imagen a continuación, puedes ver diferentes plantillas de JotForm con ejemplos de formularios.

    Estas son diferentes plantillas de JotForm con ejemplos de formularios

    Si no te molesta la marca "JotForm" y puedes mantener tu uso dentro de los límites, esta herramienta es verdaderamente fácil de usar para hacer formularios gratis. Una vez que te registres, puedes comenzar a usar las plantillas para crear tus propios formularios. Estas abordan todo tipo de necesidades, desde formularios de pago y reservas de hotel hasta formularios para registrarse en cursos y eventos.

    Cognito Forms

    Cognito Forms también ofrece un generador de formularios con características limitadas en su plan gratuito. La marca "Cognito Forms" aparecerá en los formularios que generes, pero puedes crear tantos formularios gratis como quieras. Sin embargo, los envíos de formularios están limitados a 500 por mes en el plan gratuito. Aún así, 500 por mes sigue siendo cinco veces el límite establecido por JotForm.

    Ejemplo de un formulario hecho con Cognito Forms

    La captura de pantalla anterior muestra un ejemplo de un formulario hecho con Cognito Forms. Esta herramienta te permite crear un formulario gratis desde cero o utilizar las plantillas integradas. Ahora que ya sabes cómo hacer formularios en HTML y JavaScript con diferentes herramientas, probablemente descubrirás que, de todas las herramientas enumeradas hasta ahora, Cognito Forms es la que cuenta con más funciones y también es la más fácil de usar.

    Características:

    • Puedes personalizar y filtrar fácilmente los datos o la información que necesites
    • Los datos y la información del cliente cuentan con una elevada protección
    • Integración con herramientas de terceros, como Zapier
    • Tienes la posibilidad de aceptar pagos directamente a través de tus formularios

    Prueba creando un formulario con una de las plantillas de formulario de Cognito Forms y determina si satisface todos tus requerimientos.

    Bitrix24

    Puedes utilizar este generador de formularios web gratuito para crear formularios JavaScript de registro, recopilar sugerencias y proporcionar servicio al cliente. Bitrix24 también cuenta con un widget de chat en vivo y no necesitas tener conocimientos de programación para comenzar a trabajar con él. Además de crear formularios gratis, este generador proporciona otras herramientas gratuitas diversas que otros generadores de formularios JavaScript no tienen.

    Generador Bitrix24 para crear formularios JavaScriptGenerador Bitrix24 para crear formularios JavaScriptGenerador Bitrix24 para crear formularios JavaScript

    Características:

    • Integración con CRM (gestión de relaciones con el cliente) disponible de forma gratuita
    • 5 GB de almacenamiento en línea gratuito
    • Completamente personalizado
    • Totalmente responsivo en todos los dispositivos
    • Cuenta con una comunidad muy solidaria
    • Respuesta rápida a tus preguntas por parte de los miembros del equipo

    Accessify

    Accessify es un excelente generador de formularios que combina dos herramientas antiguas (un generador de formularios y un generador de elementos de formulario) para brindar un proceso mucho más ágil. Puedes crear tu formulario simplemente agregando la información de los campos que quieras capturar, definiendo cada tipo de campo y su uso, y eligiendo algunas opciones de marcado. Después de seguir todos estos pasos obtendrás un formulario totalmente accesible y válido, además de CSS para ayudarte a darle estilo.

    Accessify: Generador de formulariosAccessify: Generador de formulariosAccessify: Generador de formularios

    Zoho

    Zoho es otra excelente herramienta para crear formularios web en línea, con una combinación de diseño, preguntas, presentación y facilidad de llenado de formularios que garantiza una recopilación casi perfecta de los datos que necesitas.

    Zoho: Herramienta para crear formularios web en líneaZoho: Herramienta para crear formularios web en líneaZoho: Herramienta para crear formularios web en línea

    Características:

    • Formularios web elegantes con temas totalmente personalizables
    • Cobro sin contratiempos
    • Informes y análisis de datos rápidos

    Wufoo

    Este generador de formularios basado en la nube te permite crear fácilmente formularios de registro, de solicitud, encuestas, formularios de contacto y formularios de pago, entre otros. Cuenta con una variedad de opciones de planes dependiendo de lo que necesites, así como un plan para crear formularios gratis con el que puedes comenzar. Varias empresas y millones de personas utilizan y confían en este generador de formularios.

    Wufoo: Generador de formularios basado en la nubeWufoo: Generador de formularios basado en la nubeWufoo: Generador de formularios basado en la nube

    Con Wufoo, puedes diseñar hermosos formularios que reflejen la apariencia de tu marca sin necesidad de tener experiencia previa de programación. Además, puedes procesar pagos en línea con facilidad haciendo uso de populares pasarelas de pago.

    Form.io

    Form.io es un popular generador de JavaScript para gestionar datos de API. Esta herramienta facilita la vinculación de formularios JavaScript y API, lo que permite integrar proveedores de terceros y sistemas heredados. Configurar Form.io y comenzar a trabajar con él es una tarea muy sencilla.

    Características:

    • Interfaz con funciones de arrastrar y soltar para principiantes
    • Documentación clara y fácil de usar para principiantes
    • Totalmente responsivo

    Plugins y bibliotecas para crear formularios gratis

    Si quieres aprender cómo hacer formularios en HTML y JavaScript y no te molesta escribir un poco de código, puedes aprovechar todos los plugins y bibliotecas sin costo de JavaScript o jQuery para hacer formularios gratis con el conjunto de funciones preciso que necesitas para un proyecto en particular.

    Las siguientes son algunas bibliotecas que te ayudarán a comenzar.

    jQuery Validation Plugin

    Puedes utilizar jQuery Validation Plugin para escribir tus propias reglas de validación y mensajes de error personalizados que puedes integrar fácilmente dentro de formularios existentes. De hecho, también tenemos un tutorial para la validación de formularios basada en jQuery que hace uso de este plugin en particular. Esto debería ayudarte a arrancar el proceso de creación de formularios.

    Incluso si ya creaste un formulario en HTML básico, aún puedes usar el plugin para añadir validaciones con una sola línea de código. Esto mejorará en gran medida la experiencia de las personas que visitan tu sitio web. Tienes pleno control sobre la colocación y el estilo de los mensajes de error, y la biblioteca se asegura de que estos se muestren de una manera no intrusiva.

    Parsley

    Esta biblioteca también te permite integrar la validación de entradas en todos tus formularios, pero, a diferencia de jQuery Validation Plugin, Parsley utiliza atributos de datos HTML en lugar de JavaScript para realizar la validación. Agregar validaciones a un formulario es tan sencillo como incluir el atributo data-parsley-validate en la etiqueta <form>.

    Te recomiendo que consultes algunos de los ejemplos de formularios mencionados en el sitio web oficial para comprender bien el funcionamiento y las características de la biblioteca.

    Pickadate

    Cualquiera que desee agregar un selector de fecha y hora basado en jQuery, que sea fácil de usar, compatible con dispositivos móviles, responsivo y liviano, descubrirá que Pickadate es una herramienta verdaderamente útil.

    Es compatible tanto con los teclados como con los dispositivos táctiles. El selector admite más de 40 idiomas diferentes, por lo que, probablemente, tendrás la posibilidad de permitir que las personas elijan las fechas en su idioma nativo.

    Este complemento ofrece muchas opciones de personalización, tanto para el selector de fecha como para el selector de hora.

    Zxcvbn

    Este estimador de la seguridad de una contraseña, que tiene un nombre más bien extraño, es en realidad una gran herramienta para que los usuarios sepan el nivel de seguridad relativo de las contraseñas que quieren usar al registrarse utilizando un formulario que tú hayas creado.

    Se basa en la coincidencia de patrones y examina alrededor de 30,000 contraseñas frecuentes, nombres comunes, apellidos y patrones como fechas o secuencias de teclado como qwertyuiop, etc. para determinar si una contraseña es lo suficientemente segura. Definitivamente vale la pena echarle un vistazo si quieres brindar a tus usuarios una manera sencilla de determinar qué tan segura es su contraseña.

    FilePond

    FilePond es una biblioteca de JavaScript que te permite implementar la funcionalidad de carga de archivos en tus formularios con un impresionante conjunto de funciones. Uno de los aspectos que te gustarán instantáneamente de este plugin es su facilidad de uso.

    Aceptará directorios, archivos, blobs y mucho más como entrada. Todas las imágenes cargadas se optimizan, se redimensionan y recortan en el lado del cliente para mejorar drásticamente la velocidad de subida y reducir la carga del servidor al mismo tiempo.

    ¡La lista de características no termina aquí! Te sugiero encarecidamente que revises esta opción si estás buscando una biblioteca para facilitar una carga de archivos sencilla en tus formularios JavaScript.

    Formidable Forms

    Formidable Forms es una excelente herramienta para crear formularios gratis que te permite realizar cálculos complicados y generar impresionantes reportes basados en los datos relacionados con los envíos en formularios.

    Gravity Forms

    Gravity Forms es un plugin único. Cuenta con una extensa biblioteca de complementos que permite que la integración de servicios y software de terceros sea una tarea mucho más sencilla.

    Ninja Forms

    Ninja Forms es un generador de formularios simple y optimizado con potentes funciones y una biblioteca de extensiones prémium que amplía su capacidad.

    Reflexiones finales

    En este artículo, vimos algunas populares herramientas, plugins y bibliotecas que puedes usar para crear formularios HTML con abundantes funciones en muy poco tiempo.

    Si no quieres escribir código, las herramientas para hacer formularios gratis, mencionadas en la primera mitad de este artículo, generarán el código HTML por ti. Todo lo que tienes que hacer es arrastrar y soltar los componentes que quieras incluir en tus formularios. Algunos servicios dedicados de generación de formularios también te proporcionarán muchas otras funciones, pero estos por lo general son de pago, y la versión gratuita te dará acceso a una funcionalidad limitada.

    Los plugins y bibliotecas mencionados más adelante en el artículo serán útiles para aquellas personas que quieran crear sus propios formularios con la funcionalidad exacta que necesitan. Estas bibliotecas les facilitarán el proceso de añadir la funcionalidad requerida y, al mismo tiempo, les brindarán gran control sobre la apariencia y el comportamiento de los formularios.

    También puedes echar un vistazo a los diferentes plugins y scripts disponibles en CodeCanyon para ayudarte a crear todo tipo de formularios con facilidad. Estos son una buena opción para las personas que no quieren codificar todo desde cero pero que aún quieren tener control sobre los formularios: algo que a veces no es posible con el uso de servicios de terceros.

    Este artículo ha sido actualizado con contribuciones de Ezekiel Lawson. Ezekiel es un desarrollador front-end que se centra en escribir código limpio y de fácil mantenimiento con tecnologías web como JavaScript, Vue.js, HTML y CSS.

    Advertisement
    Did you find this post useful?
    Want a weekly email summary?
    Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.