Recursos del tutorial
En este video aprendemos a crear un formulario HTML funcional sin backend, utilizando servicios que reciben y procesan la información por nosotros.
Partimos de formularios creados únicamente con HTML y CSS, y después veremos cómo hacerlos funcionales con Formspree y Web3Forms.
También publicaremos nuestro formulario en Internet utilizando Hostinger y, como bonus, veremos cómo crear una versión mucho más completa utilizando Hostinger Horizons, capaz de generar el formulario, la lógica y un panel administrativo con inteligencia artificial.
¿Qué hacemos en el video?
Durante el tutorial seguimos este proceso:
- Partimos de un formulario HTML básico y otro con un diseño más completo.
- Hacemos funcionar el formulario utilizando Formspree.
- Probamos una segunda alternativa con Web3Forms.
- Publicamos nuestros archivos HTML y CSS en Internet con Hostinger.
- Creamos una versión utilizando inteligencia artificial con Hostinger Horizons.
- Generamos además un panel administrativo para consultar la información recibida.
El objetivo es demostrar que podemos tener un formulario HTML completamente funcional sin necesidad de desarrollar nuestro propio backend.
Recursos utilizados
💻 Código completo del tutorial
Todo el código utilizado durante el video está disponible en GitHub.
Encontrarás los archivos de los formularios HTML y CSS utilizados durante el tutorial para que puedas descargarlos, modificarlos y seguir el video paso a paso.
📨 Formspree
Formspree es uno de los servicios que utilizamos para hacer funcionar nuestro formulario HTML sin crear un backend propio.
Nos proporciona una dirección a la que podemos enviar la información introducida por los usuarios.
Acceder a Formspree:
https://formspree.io/
📬 Web3Forms
Web3Forms es otra alternativa que permite recibir información desde formularios HTML.
Funciona de manera similar a Formspree, aunque utiliza una Access Key para identificar nuestro formulario.
Acceder a Web3Forms:
https://web3forms.com/
🚀 Hostinger
Después de configurar nuestro formulario, en el video lo publicamos en Internet utilizando Hostinger.
Subimos nuestros archivos HTML y CSS al hosting y asociamos el proyecto a un dominio para poder probar el formulario desde una página web real.
Acceder a Hostinger:
https://hostinger.com/alexcg
Cupón: ALEXG
🤖 Hostinger Horizons
Como bonus del tutorial utilizamos Hostinger Horizons para crear una versión mucho más completa del formulario utilizando inteligencia artificial.
En lugar de programar toda la aplicación manualmente, describimos mediante texto lo que queremos construir.
Horizons genera el formulario y también puede crear funcionalidades adicionales, como almacenamiento de datos, usuarios y un panel administrativo.
Acceder a Hostinger Horizons:
https://hostinger.com/alexcghh
Formspree: formulario HTML sin backend
La primera opción que utilizamos en el video es Formspree.
La idea es sencilla: nosotros mantenemos nuestro formulario creado con HTML y Formspree se encarga de recibir la información que envían los usuarios.
Para configurarlo necesitamos:
- La dirección proporcionada por Formspree.
- Enviar el formulario utilizando el método POST.
- Identificar cada campo mediante su atributo
name.
De esta manera podemos recibir datos como:
- Nombre
- Correo electrónico
- Mensaje
sin tener que crear nuestro propio servidor.
Web3Forms: otra alternativa para formularios HTML
Después probamos Web3Forms.
El concepto es muy parecido, pero en este caso Web3Forms utiliza una dirección general y una Access Key que identifica nuestro formulario.
La Access Key se agrega al formulario y permite relacionar los mensajes recibidos con nuestra cuenta.
Esta opción también nos permite mantener nuestro proyecto únicamente con HTML y CSS mientras Web3Forms procesa los envíos.
Publicar el formulario en Internet
Una vez que nuestro formulario está funcionando, el siguiente paso es publicarlo.
En el tutorial utilizamos Hostinger y subimos los archivos del proyecto directamente al hosting.
Nuestro proyecto contiene principalmente:
index.htmlstyle.css
Después asociamos el sitio a un dominio y podemos acceder al formulario desde cualquier navegador.
Hostinger:
https://hostinger.com/alexcg
Cupón: ALEXG
Crear un formulario con IA
La última parte del video muestra una alternativa completamente diferente.
Con Hostinger Horizons podemos describir mediante texto qué aplicación queremos crear.
Por ejemplo, le pedimos crear:
- Un formulario de contacto.
- Campos para nombre, email y mensaje.
- Un panel administrativo.
- Un sistema para visualizar los registros enviados.
También podemos adjuntar una captura de pantalla para que Horizons utilice un diseño como referencia.
Esto nos permite pasar de un formulario sencillo a una pequeña aplicación web con backend y panel administrativo sin tener que construir manualmente toda la infraestructura.
Probar Hostinger Horizons:
https://hostinger.com/alexcghh
¿Qué opción deberías utilizar?
Si estás aprendiendo HTML y quieres entender cómo hacer funcionar un formulario sencillo, Formspree o Web3Forms son excelentes opciones.
Te permiten seguir trabajando directamente con tu código HTML y comprender cómo se envía la información de un formulario.
Si quieres crear algo más completo, con almacenamiento de datos, usuarios o un panel administrativo, Hostinger Horizons permite llevar el proyecto mucho más lejos utilizando inteligencia artificial.
Descargar el código del video
Todo el código utilizado durante el tutorial está disponible gratuitamente en GitHub.
Puedes descargarlo y utilizarlo como referencia mientras sigues el video:
Ver código completo del formulario HTML:
https://github.com/AlexCGDesign/formulario-funcional
Recursos finales
- Código del tutorial:
https://github.com/AlexCGDesign/formulario-funcional - Formspree:
https://formspree.io/ - Web3Forms:
https://web3forms.com/ - Hostinger:
https://hostinger.com/alexcg - Hostinger Horizons:
https://hostinger.com/alexcghh
Sigue aprendiendo
Si quieres aprender a crear aplicaciones web completas utilizando inteligencia artificial, puedes continuar con mi curso de Hostinger Horizons desde cero.
En él vemos cómo crear aplicaciones, trabajar con datos, usuarios, formularios y diferentes funcionalidades utilizando inteligencia artificial.
