{"id":3284,"date":"2026-08-14T15:56:07","date_gmt":"2026-08-14T15:56:07","guid":{"rendered":"https:\/\/alexcgdesign.com\/blog\/?p=3284"},"modified":"2026-08-14T15:56:08","modified_gmt":"2026-08-14T15:56:08","slug":"como-crear-un-formulario-html-funcional-sin-backend","status":"publish","type":"post","link":"https:\/\/alexcgdesign.com\/blog\/como-crear-un-formulario-html-funcional-sin-backend\/","title":{"rendered":"C\u00f3mo crear un formulario HTML funcional sin Backend"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"formulario final final\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/IV8TOQIU2ys?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Recursos del tutorial<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En este video aprendemos a crear un <strong>formulario HTML funcional sin backend<\/strong>, utilizando servicios que reciben y procesan la informaci\u00f3n por nosotros.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Partimos de formularios creados \u00fanicamente con HTML y CSS, y despu\u00e9s veremos c\u00f3mo hacerlos funcionales con <strong>Formspree<\/strong> y <strong>Web3Forms<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tambi\u00e9n publicaremos nuestro formulario en Internet utilizando <strong>Hostinger<\/strong> y, como bonus, veremos c\u00f3mo crear una versi\u00f3n mucho m\u00e1s completa utilizando <strong>Hostinger Horizons<\/strong>, capaz de generar el formulario, la l\u00f3gica y un panel administrativo con inteligencia artificial.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 hacemos en el video?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Durante el tutorial seguimos este proceso:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Partimos de un formulario HTML b\u00e1sico y otro con un dise\u00f1o m\u00e1s completo.<\/li>\n\n\n\n<li>Hacemos funcionar el formulario utilizando Formspree.<\/li>\n\n\n\n<li>Probamos una segunda alternativa con Web3Forms.<\/li>\n\n\n\n<li>Publicamos nuestros archivos HTML y CSS en Internet con Hostinger.<\/li>\n\n\n\n<li>Creamos una versi\u00f3n utilizando inteligencia artificial con Hostinger Horizons.<\/li>\n\n\n\n<li>Generamos adem\u00e1s un panel administrativo para consultar la informaci\u00f3n recibida.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">El objetivo es demostrar que podemos tener un <strong>formulario HTML completamente funcional sin necesidad de desarrollar nuestro propio backend<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Recursos utilizados<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udcbb C\u00f3digo completo del tutorial<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Todo el c\u00f3digo utilizado durante el video est\u00e1 disponible en GitHub.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Encontrar\u00e1s los archivos de los formularios HTML y CSS utilizados durante el tutorial para que puedas descargarlos, modificarlos y seguir el video paso a paso.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\"><strong>Repositorio<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udce8 Formspree<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Formspree es uno de los servicios que utilizamos para hacer funcionar nuestro formulario HTML sin crear un backend propio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nos proporciona una direcci\u00f3n a la que podemos enviar la informaci\u00f3n introducida por los usuarios.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Acceder a Formspree:<\/strong><br><a href=\"https:\/\/formspree.io\/\">https:\/\/formspree.io\/<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udcec Web3Forms<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Web3Forms es otra alternativa que permite recibir informaci\u00f3n desde formularios HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Funciona de manera similar a Formspree, aunque utiliza una Access Key para identificar nuestro formulario.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Acceder a Web3Forms:<\/strong><br><a href=\"https:\/\/web3forms.com\/\">https:\/\/web3forms.com\/<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\ude80 Hostinger<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Despu\u00e9s de configurar nuestro formulario, en el video lo publicamos en Internet utilizando Hostinger.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Subimos nuestros archivos HTML y CSS al hosting y asociamos el proyecto a un dominio para poder probar el formulario desde una p\u00e1gina web real.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Acceder a Hostinger:<\/strong><br><a href=\"https:\/\/hostinger.com\/alexcg\">https:\/\/hostinger.com\/alexcg<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Cup\u00f3n:<\/strong> <code>ALEXG<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83e\udd16 Hostinger Horizons<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Como bonus del tutorial utilizamos Hostinger Horizons para crear una versi\u00f3n mucho m\u00e1s completa del formulario utilizando inteligencia artificial.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En lugar de programar toda la aplicaci\u00f3n manualmente, describimos mediante texto lo que queremos construir.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Horizons genera el formulario y tambi\u00e9n puede crear funcionalidades adicionales, como almacenamiento de datos, usuarios y un panel administrativo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Acceder a Hostinger Horizons:<\/strong><br><a href=\"https:\/\/hostinger.com\/alexcghh\">https:\/\/hostinger.com\/alexcghh<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Formspree: formulario HTML sin backend<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La primera opci\u00f3n que utilizamos en el video es Formspree.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La idea es sencilla: nosotros mantenemos nuestro formulario creado con HTML y Formspree se encarga de recibir la informaci\u00f3n que env\u00edan los usuarios.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para configurarlo necesitamos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>La direcci\u00f3n proporcionada por Formspree.<\/li>\n\n\n\n<li>Enviar el formulario utilizando el m\u00e9todo POST.<\/li>\n\n\n\n<li>Identificar cada campo mediante su atributo <code>name<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">De esta manera podemos recibir datos como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nombre<\/li>\n\n\n\n<li>Correo electr\u00f3nico<\/li>\n\n\n\n<li>Mensaje<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">sin tener que crear nuestro propio servidor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Web3Forms: otra alternativa para formularios HTML<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Despu\u00e9s probamos Web3Forms.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El concepto es muy parecido, pero en este caso Web3Forms utiliza una direcci\u00f3n general y una <strong>Access Key<\/strong> que identifica nuestro formulario.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La Access Key se agrega al formulario y permite relacionar los mensajes recibidos con nuestra cuenta.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esta opci\u00f3n tambi\u00e9n nos permite mantener nuestro proyecto \u00fanicamente con HTML y CSS mientras Web3Forms procesa los env\u00edos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Publicar el formulario en Internet<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez que nuestro formulario est\u00e1 funcionando, el siguiente paso es publicarlo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En el tutorial utilizamos Hostinger y subimos los archivos del proyecto directamente al hosting.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nuestro proyecto contiene principalmente:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>index.html<\/code><\/li>\n\n\n\n<li><code>style.css<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Despu\u00e9s asociamos el sitio a un dominio y podemos acceder al formulario desde cualquier navegador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Hostinger:<\/strong><br><a href=\"https:\/\/hostinger.com\/alexcg\">https:\/\/hostinger.com\/alexcg<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Cup\u00f3n:<\/strong> <code>ALEXG<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Crear un formulario con IA<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La \u00faltima parte del video muestra una alternativa completamente diferente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Con Hostinger Horizons podemos describir mediante texto qu\u00e9 aplicaci\u00f3n queremos crear.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por ejemplo, le pedimos crear:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Un formulario de contacto.<\/li>\n\n\n\n<li>Campos para nombre, email y mensaje.<\/li>\n\n\n\n<li>Un panel administrativo.<\/li>\n\n\n\n<li>Un sistema para visualizar los registros enviados.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Tambi\u00e9n podemos adjuntar una captura de pantalla para que Horizons utilice un dise\u00f1o como referencia.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esto nos permite pasar de un formulario sencillo a una peque\u00f1a aplicaci\u00f3n web con backend y panel administrativo sin tener que construir manualmente toda la infraestructura.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Probar Hostinger Horizons:<\/strong><br><a href=\"https:\/\/hostinger.com\/alexcghh\">https:\/\/hostinger.com\/alexcghh<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 opci\u00f3n deber\u00edas utilizar?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si est\u00e1s aprendiendo HTML y quieres entender c\u00f3mo hacer funcionar un formulario sencillo, <strong>Formspree o Web3Forms<\/strong> son excelentes opciones.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Te permiten seguir trabajando directamente con tu c\u00f3digo HTML y comprender c\u00f3mo se env\u00eda la informaci\u00f3n de un formulario.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si quieres crear algo m\u00e1s completo, con almacenamiento de datos, usuarios o un panel administrativo, <strong>Hostinger Horizons<\/strong> permite llevar el proyecto mucho m\u00e1s lejos utilizando inteligencia artificial.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Descargar el c\u00f3digo del video<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Todo el c\u00f3digo utilizado durante el tutorial est\u00e1 disponible gratuitamente en GitHub.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Puedes descargarlo y utilizarlo como referencia mientras sigues el video:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ver c\u00f3digo completo del formulario HTML:<\/strong><br><a href=\"https:\/\/github.com\/AlexCGDesign\/formulario-funcional\">https:\/\/github.com\/AlexCGDesign\/formulario-funcional<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Recursos finales<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>C\u00f3digo del tutorial:<\/strong><br><a href=\"https:\/\/github.com\/AlexCGDesign\/formulario-funcional\">https:\/\/github.com\/AlexCGDesign\/formulario-funcional<\/a><\/li>\n\n\n\n<li><strong>Formspree:<\/strong><br><a href=\"https:\/\/formspree.io\/\">https:\/\/formspree.io\/<\/a><\/li>\n\n\n\n<li><strong>Web3Forms:<\/strong><br><a href=\"https:\/\/web3forms.com\/\">https:\/\/web3forms.com\/<\/a><\/li>\n\n\n\n<li><strong>Hostinger:<\/strong><br><a href=\"https:\/\/hostinger.com\/alexcg\">https:\/\/hostinger.com\/alexcg<\/a><\/li>\n\n\n\n<li><strong>Hostinger Horizons:<\/strong><br><a href=\"https:\/\/hostinger.com\/alexcghh\">https:\/\/hostinger.com\/alexcghh<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Sigue aprendiendo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si quieres aprender a crear aplicaciones web completas utilizando inteligencia artificial, puedes continuar con mi curso de <strong>Hostinger Horizons desde cero<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En \u00e9l vemos c\u00f3mo crear aplicaciones, trabajar con datos, usuarios, formularios y diferentes funcionalidades utilizando inteligencia artificial.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recursos del tutorial En este video aprendemos a crear un formulario HTML funcional sin backend, utilizando servicios que reciben y procesan la informaci\u00f3n por nosotros. Partimos de formularios creados \u00fanicamente con HTML y CSS, y despu\u00e9s veremos c\u00f3mo hacerlos funcionales con Formspree y Web3Forms. Tambi\u00e9n publicaremos nuestro formulario en Internet utilizando Hostinger y, como bonus, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3287,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-3284","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/3284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=3284"}],"version-history":[{"count":3,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/3284\/revisions"}],"predecessor-version":[{"id":3288,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/3284\/revisions\/3288"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media\/3287"}],"wp:attachment":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=3284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=3284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=3284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}