<
Todo lo que tu página web necesita

Crear formularios en HTML – Para poner en tu web

Como crear un formulario

Ahora te mostrare como hacer un formulario de contacto con HTML + PHP y CSS, pero también te daré herramientas con las que podrás crear uno sin programar nada en código.

Quédate, porque ademas conocerás información valiosa sobre el uso correcto de los formularios y si empleas un CMS como WordPress, Joomla o Wix sabrás de algunos plugins exclusivos que probablemente estabas dejando pasar.

Espero que esto te sirva mucho, es un articulo extenso que he preparado para que tu puedes aprender lo mejor posible. Si tienes tiempo compártelo, gracias.

¿Qué es un formulario HTML y como funciona?

Un formulario HTML es un conjunto de elementos Web capaces de recopilar información proporcionada intencionalmente por el usuario, para un determinado fin.

Algunos de estos elementos pueden ser: campos de entrada de texto (text inputs), menús de selección (selection menús), selectores de archivos (file selectors) y/o casillas de verificación (checkboxes).

Tipos de formularios según su fin

  • De contacto
  • De registro
  • De pago
  • De función en tiempo real

En otra ocasión explicaré cada uno detalladamente, por lo que ahora nos enfocaremos en lo que estas buscando, los de contacto.

¿En verdad te conviene un formulario de contacto HTML?

Porque ya existen plugins como los chats en vivo y la verdad es que estos empiezan a funcionar mejor que cualquier otro método para comunicar al visitante con el webmaster o el vendedor.

Pero la realidad es que hasta el día de hoy una forma de contacto típica sigue ocupando la etiqueta de “indispensable”, por lo que es recomendable que aproveches el resto del artículo.

Formulario HTML5 + CSS3 y PHP desde cero


No te preocupes, sólo necesitas tener algunas nociones básicas de los lenguajes mencionados (incluso si el PHP te parece complicado, podrás empezar a entender su funcionamiento y verve que no es nada del otro mundo).

1. Crea el HTML del formulario y configuralo como quieras

Empieza añadiendo la etiqueta del elemento estándar para todo formulario HTML: <form> y a esta, un nombre y una ID.

Más información
Dicho elemento HTML puede contener algunos atributos, los mas comunes son: action y method. El primero define el lugar a donde se enviaran los datos recopilados y el segundo dice con que método HTTP se hará esto. Mas información sobre dichos atributos aquí

Lo que escribirás será esto:

<form name="primerformulario" id="ff" method="post" action="">

Si te fijas el atributo action sera el encargado de enviar los datos temporales del formulario estático a el archivo PHP que se encargara de almacenar o redirigir la información a un correo electrónico o base de datos.

Para el tutorial colocare los cuatro típicos campos de contacto, el de nombre, teléfono, email y el de mensaje, pero puedes añadir o quitar alguno sabiendo a continuación como se añaden.

Para maniobrar los campos utilizaremos los elementos HTML label, inputtextarea,<span> para el texto que los acompañara. Así es como quedaría la estructura:

<form name="primerformulario" id="ff" method="post" action="">

<label> <span>Nombre*:</span> <input type="text" placeholder="Por favor escribe tu nombre" name="name" id="name" required autofocus> </label> <label> <span>Teléfono*:</span> <input type="tel" placeholder="Porfavor especifica tu número de teléfono" name="telefono" id="telefono" required> </label> <label> <span>Email*:</span> <input type="email" placeholder="tuemail@servidor.com" name="email" id="email" required> </label> <label> <span>Mensaje:</span> <textarea id="mensaje" name="mensaje" placeholder="Comienza a escribir..." style="height:200px"></textarea>

</form>
Más información
  • Dentro de los elementos HTML “label’s” indicas que subelemento se esta requiriendo gracias al atributo: for, por ejemplo el de nombre (name).
  • En los elementos “input”, el atributo type te esta diciendo para que tipo de información esta planteado el campo (por ejemplo para emails).
  • Y finalmente el elemento “textarea” es una entrada de texto de varias lineas, que se maneja como una etiqueta HTML común y corriente.

Finalmente para el botón de envió, incorpora el elemento button, con el atributo submit. Puedes especificar el texto que desees, aparezca dentro del botón.

<input class="sendButton" type="submit" name="Submit" value="Enviar">

El código final del HTML del formulario de contacto es el siguiente, (tomando en cuenta que envolvimos todo en un contenedor):

  <div class="wrapper"> 
 <div id="formulariocontacto">
 <form name="primerformulario" id="ff" method="post" action="envio.php">
 <h1>Ponte en contacto</h1>
 <p>A través del siguiente formulario.</p> 
 <label>
 <span>Nombre*:</span>
 <input type="text" placeholder="Por favor escribe tu nombre" name="name" id="name" required autofocus>
 </label>
 
 <label>
 <span>Teléfono*:</span> 
 <input type="tel" placeholder="Porfavor especifica tu número de teléfono" name="telefono" id="telefono" required>
 </label>
 <label>
 <span>Email*:</span>
 <input type="email" placeholder="tuemail@servidor.com" name="email" id="email" required>
 </label>
 <label>
 <span>Mensaje:</span>
 <textarea id="mensaje" name="mensaje" placeholder="Comienza a escribir..." style="height:200px"></textarea>
 <input class="sendButton" type="submit" name="Submit" value="Enviar">
 
 </form>
 </div>
 </div>

2. Añade el CSS para cambiar el diseño o los estilos

Vamos a hacer que quede chulo mediante la creación de código CSS para el HTML. En especifico, el siguiente (ve las especificaciones dentro del código):

.wrapper {
 margin: 47px auto;
 max-width:580px;
}

#formularioontacto {
 text-shadow:0 1px 0 #FFF;
 border-radius:4px;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 background:#F9F9F9;
 padding:25px;

}

#ff label {
 cursor:pointer;
 margin:4px 0;
 color:#ed7700;
 display:block;
 font-weight:800;

}

input, textarea{
 display:block;
 width:90%;
 border-radius:4px;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 background-color:#f4f4f4;
 color:#000;
 border:1px solid #5f5f5f;
 padding:10px;
 margin-bottom:25px;
}

.sendButton {
 cursor:pointer;
 -moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
 -webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
 box-shadow:inset 0px 1px 0px 0px #fce2c1;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
 background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
 background-color:#ffc477;
 -webkit-border-radius:16px;
 -moz-border-radius:16px;
 border-radius:16px;
 border:1px solid #eeb44f;
 color:#ffffff;
 font-family:Arial;
 font-size:14px;
 width:25%;
 font-weight:bold;
 text-shadow:1px 1px 0px #cc9f52;
}
.sendButton:hover {
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
 background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
 background-color:#fb9e25;
}
Más información
  • Puedes cambiar el tamaño de los cuadros de texto alterando el valor de width: en la sección de “input” y  “textarea”.
  • Puedes alterar el espacio entre los campos manipulando el valor de margin-bottom: en el elemento “input” y “textarea”.
  • También puedes cambiar el tamaño del botón de envió con el atributo width: en los estilos de “.sendButton”.
  • Obviamente puedes personalizar el borde y demás cuestiones, sin embargo si eres principiante te recomiendo mantener esa estructura de estilos modificando solo lo anterior si lo deseas.
MIra:  Como obtener un informe o analisis SEO de tu web gratis

Ponlo en el archivo CSS de tu web, verificando que llame correctamente a cada elemento que aparece en el HTML.

Si te pierdes en este proceso, también puedes añadir este código CSS junto al HTML, metiendolo entre etiquetas <style> y </style>, aunque es una practica no muy recomendada.

3. Crea un simple archivo PHP para procesar la información

Esencialmente, vamos a utilizar un archivo PHP llamado “envio.php”, el cual sera el documento que se encargara de validar los datos de los campos, y de enviarlos a un servidor de correo electrónico, que sera el tuyo. Contendrá lo siguiente:

Checa las anotaciones indicativas dentro del código (en color Gris).
<?php
// A continuación se capturan los datos especificados del formulario
$name=$_POST['name'];
$telefono=$_POST['telefono'];
$email=$_POST['email'];
$mensaje=$_POST['mensaje'];

// Debes indicar tu correo electrónico, eliminando el ejemplo
$to = "tuemail@destino.com";

// Puedes cambiar el asunto por defecto y que datos apareceran en el email que te llegue
$subject = "Entrada del Formulario de Contacto";
$message = " Name: " . $name . "\r\n Teléfono: " . $telefono . "\r\n Email: " . $email . "\r\n Mensaje: " . $mensaje;

// Puedes cambiar el nombre del remitente que aparecerá en tu bandeja de entrada, la página de sucesión y el mensaje que ve el usuario al final.
$from = "FutureTutorials";
$headers = "From:" . $from . "\r\n";
$headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n"; 
if(@mail($to,$subject,$message,$headers))
{
 print "<script>document.location.href='https://www.todopatuweb.net/mensaje-de-formulario-enviado.html';</script>";
 
// Created by Future Tutorials
}else{
 echo "Error! Please try again.";
}
?>
Lo que debes hacer principalmente es colocar tu email en el lugar correspondiente.

Una vez listo, debes subir también este archivo a tu servidor hosting, de nuevo en la carpeta raíz de la web y colocar su dirección URL  en el atributo action (lo vimosen la primera parte del código HTML).

Después de todo esto, podrás incorporar perfectamente el HTML donde quieras que se muestre tu formulario de contacto exactamente y disfrutar de los resultados generados.

¿Tienes dudas o sugerencias?

No olvides comentar cualquier pregunta o sugerencia en la caja de comentarios respecto a la realización del complemento.

Crear formularios HTML5 sin meterse con códigos

Diseñar Formulario Gratis

Actualmente demasiadas cosas dentro del desarrollo web se pueden llevar a cabo sin la programación en código PHP, etc,  y obtienes el mismo resultado como si mediante esta se realizara.

Este es un “vídeotour” de como se trabaja de esta manera con el tipo de widget que buscas (ingles):

Ver vídeo

Las siguientes son potentes herramientas de creación de formularios HTML visual, gratis y demasiado fáciles de entender.

– Cognito Forms

Se trata de una de las herramientas de creación de formularios mas completas. Como otras del post se especializa solo en formas de contacto, así como también en los sistemas de “rating”, es decir en widgets para comunicar al usuario/cliente con el negocio o empresa.

Versión gratis

Numeró máximo de creaciones: Ilimitado

Número de campos por forma: Ilimitado

Mensajes al mes como máximo: 500

Premium:

$10 USD/mes – Plan PRO

$24 USD/mes – Plan Team

$99 USD/mes – Plan Enterprise

 

Probar ahora

Visita su espacio de ayuda.

 


– Form Builder by POWr

Es una gran herramienta, permite crear formas de una manera muy intuitiva con un montón de campos a la mano, ofrece muchas opciones de configuración y su instalación es demasiado agradable, puesto que te guía paso a paso.

Versión gratis:

Numeró máximo de creaciones: Ilimitado

Número de campos por forma: 6

Mensajes al mes como máximo: 25

Premium:

$7.19 USD/mes – Plan Premiun

$12.79 USD/mes – Plan PRO

$39.99 USD/mes – Plan Business

 

Probar ahora

Este es su centro de soporte.

 


– 123FormBuilder

Una de de las opciones mas famosas, sin duda, 123FormBuilder se ha posicionado como el gigante en la creación de formularios de manera visual y no solo de contacto, es uno de los plugins mas potentes aquí.

Versión gratis:

Numeró máximo de creaciones: 5

Número de campos por forma: 10

Mensajes al mes como máximo: 100

Premium:

$19 USD/mes – Plan Gold

$39 USD/mes – Plan Platinum

$79 USD/mes – Plan Corporate

 

Probar ahora

Aquí puedes obtener ayuda sobre su uso.

 


– Formstack

Es una aplicación genial, destinada únicamente a los gadgets de contacto, a diferencia de otras muchas, que ofrecen también otros complementos. Su constructor lo tiene todo, pruebalo.

Plan Bronze. $19 USD/mes

Numeró máximo de creaciones: 5

Número de campos por forma: Ilimitado

Mensajes al mes como máximo: 700

Premium:

$39 USD/mes – Plan Silver

$99 USD/mes – Plan Gold

$249 USD/mes – Plan Platinum

 

Probar ahora

Te dejo su centro de soporte.

 


– FormGet

Su configuración es muy completa, sin duda puede ser la que elijas, puesto que le hace frente a todas las demás, ofrece crear recopilaciones de datos de todo tipo, pero es premium.

Premium:

$97 USD/mes – Plan 2

$197 USD/mes – Plan 3

$297 USD/mes – Plan 4

 

Probar ahora

Aquí esta su espacio de soporte.

 


– GetSiteControl

Con esta herramienta podrás diseñar una forma de contacto flotante y con efectos visuales, ofrece muchas opciones de target y display, pero en otros aspectos no se compara positivamente con otras opciones.

Versión gratis:

Número máximo de creaciones: Ilimitado

Número de campos por forma: Ilimitado

Mensajes al mes como máximo: Ilimitados

Premium:

$19 USD/mes – Plan Plus

$29 USD/mes – Plan PRO

 

 

Probar ahora

Para saber como se utiliza checa este tutorial.

 


– JotForm

Se trata de un constructor fantástico, es realmente muy sencillo de usar y no perjudica mucho el tiempo de carga. Proporciona útiles miniwidgets para incluir en las formas como mapas. Es una de las mejores opciones.

Versión gratis:

Numeró máximo de creaciones: 5

Número de campos por forma: Ilimitado

Mensajes al mes como máximo: 100

Premium:

$19 USD/mes – Plan Bronze

$39 USD/mes – Plan Silver

$99 USD/mes – Plan Gold

 

Probar ahora

Aquí puedes obtener ayuda sobre su uso.

 


– Wufoo

Es una herramienta muy intuitiva y una de las veteranas aquí. Sirve para la creación de todo tipo de formas, ya sean de pago, de suscripción-registro o de contacto básico. Lo malo es que limita los mensajes a recibir.

Versión gratis:

Numeró máximo de creaciones: 5

Número de campos por forma: 10

Mensajes al mes como máximo: 100

Premium:

$19 USD/mes – Plan Started

$39 USD/mes – Plan Professional

$99 USD/mes – Plan Advanced

 

Probar ahora

Puedes encontrar su centro de ayuda aquí.

 


– Formularios de Google

Aunque viene del gigante de Internet es una opción un poco limitada en opciones de campos y personalización. Al final pues sirve para formularios de contacto básicos, ademas ofrece envíos ilimitados.

Versión gratis:

Numeró máximo de creaciones: Ilimitado

Número de campos por forma: Ilimitado

Mensajes al mes como máximo: Ilimitados

Premium (G Suite):

$5 USD/mes – Plan Basic

$10 USD/mes – Plan Business

$25 USD/mes – Plan Enterprise

 

Probar ahora

Visita su completo espacio de ayuda.

 


– Infiniforms

Es una nueva opción y a pesar de eso como programa de creación de formularios esta muy completo. Al ser reciente su nombre no hace mucho eco en Internet como otras opciones.

Versión gratis (Bronze): Número máximo de creaciones: Ilimitado

Número de campos por forma: Ilimitado

Mensajes al mes como máximo: 100

Premium:

$75 USD/mes – Plan Silver

$150 USD/mes – Plan Gold

$375 USD/mes – Plan Platinum

 

Probar ahora

Aquí encuentras su centro de ayuda.

 


– Typeform

Es una de las tres apps para diseñar formas de contacto mas famosas. Typeform es en verdad increíble y aunque como otros servicios esta en ingles, su extrema simplicidad hace que eso no sea un problema en absoluto.

Versión gratis

Número máximo de creaciones: Ilimitado

Número de campos por forma: 10

Mensajes al mes como máximo: 100

Premium:

$30 USD/mes – Plan PRO

$59 (empezando) USD/mes – Plan PRO+

 

 

Probar ahora

Y sin mas rollo este es su espacio de soporte.

 


– Zotabox

Una estupenda plataforma de plugins web. Zotabox ofrece lo necesario y mas que eso para mejorar una página web a nivel de conversión, pero también es una estupenda opción para lo requerido en el articulo.

Versión gratis:

Número máximo de creaciones: 1

Número de campos por forma: 4

Mensajes al mes como máximo: Ilimitados

Premium:

$9,99 USD/mes – Plan Started

$19.99 USD/mes – Plan Express

$49.99 USD/mes – Plan Platinum

 

Probar ahora

Visita su espacio de ayuda.

 


– SumoMe

Esta es otra famosa plataforma de widgets HTML dedicados a aumentar la conversión en webs o blogs por lo que entre sus ofertas se encuentra la creación de un formulario de contacto básico.

Versión gratis:

Número máximo de creaciones: 1

Número de campos por forma: 4

Mensajes al mes como máximo: Ilimitados

Premium:

$9,99 USD/mes – Plan Started

$19.99 USD/mes – Plan Express

$49.99 USD/mes – Plan Platinum

 

Probar ahora

Si necesitas ayuda haz clic aquí.

 


– Responster

Aun aquí, vemos increíbles opciones. Este programa también se centra en los gadgets de contacto especializados en la recopilación de feedback. Ofrece características espectaculares.

Versión gratis

Númeró máximo de creaciones: Ilimitado

Número de campos por forma: 10

Mensajes al mes como máximo: Ilimitados

[/symple_column]

Premium:

$39 USD/mes – Plan Plus

 

Probar ahora

Encuentra aqui su centro de ayuda.

 


– TellForm

Esta opción es de código abierto y se instala en el servidor, por lo tanto requiere de procesos mas técnicos. Aun así según entiendo es una aplicación a la que no le falta nada.

Premium:

N/A

 

 

 

Probar ahora.

En esta página puedes esta su ayuda.

 


– Getform

Otra opción increíble, Ofrece un modo de trabajo un poco distinto, creo que puede llegar a funcionar mas que bien, incluso su plan premium es uno de los mas baratos.

Versión gratis:

Número máximo de creaciones: Ilimitado

Número de campos por forma: Ilimitado

Mensajes al mes como máximo: 1000

Premium:

$9 USD/mes – Plan Premium

$ Variable/mes – Plan Enterprise

 

 

Probar ahora

Este es su lugar de apoyo.

 


– Zoho Forms

Zoho Forms es otra maravillosa herramienta. Es también una de las mejores opciones de este articulo, pues es tan potente y a la vez tan simple. Ofrece muchas opciones de personalización.

Versión gratis:

Número máximo de creaciones: 3

Número de campos por forma: Ilimitado

Mensajes al mes como máximo: 500

Premium:

$10 USD/mes – Plan Basic

$25 USD/mes – Plan Standard

$50 USD/mes – Plan Professional

$100 USD/mes – Plan Premium

 

Probar ahora

Te dejo su centro de ayuda.

 


– Foxyform

Un programa sencillo pero no por ello nada eficaz. La verdad es que aunque se ve muy simplón y así, no decepciona con todas las configuraciones que ofrece. Es una de las opciones en español mas utilizadas.

Versión gratis:

Número máximo de creaciones: 1

Número de campos por forma: 9

Mensajes al mes como maximo: Ilimitados

Premium:

N/A

 

 

 

Probar ahora

No tiene centro de soporte :(.

 


– FormtTitan

Una aplicación que también sirve para crear “landing pages”, es un poco nueva, pero se nota muy completa, la verdad tiene mucho potencial, puedes apostarle.

Versión gratis:

Numeró máximo de creaciones: 2

Número de campos por forma: Ilimitado

Mensajes al mes como máximo: 20

Premium:

$59 USD/mes – Plan Premium

$99 USD/mes – Plan Elite

$150 USD/mes – Plan Gold

 

Probar ahora

Aquí su lugar de ayuda.

 


Plugins exclusivos para hacer formularios HTML – PHP

A continuación están los widgets hechos especialmente para algún CMS, son más fáciles de instalar  y ofrecen una adaptación a cada programa muy buena.

El mundo de las “Add-ons” empieza a tomar gran relevancia dentro de los sistemas de desarrollo web, actualmente son varios los que ofrecen un repositorio o tienda de complementos.

Para WordPress

Se trata probablemente del mas conocido dentro del repositorio.

Uno de los complemento mejor adaptados al sistema de Automattic.

Vaya que es una de las opciones mas completas en cuanto a funciones.

Hablamos de un proyecto abierto, sin modelos premium.

Es una de las herramientas mas intuitivas y cómodas de utilizar.

Para Joomla

Es la extensión gratuita mas completa dentro del directorio.

Se trata de un widget gratuito muy bueno para lo requerido.

Form Maker ofrece muchas opciones de personalización en su editor.

Es una de las extensiones de su tipo mas veteranas.

Para Drupal

Fue uno de los primeros plugins en su tipo en aparecer para el CMS.

Aunque esta presente en otras plataformas, se adaptado completamente a Drupal.

Para Wix

Una herramienta demasiado fácil de usar y mejor aun, con el editor de Wix.

Desde los primeros pasos se expone como una aplicación muy intuitiva.

En verdad, probablemente la que tiene mas opciones.

Preguntas que puedes hacerte respecto al post:

¿Como insertar los universales en mi web?

Este tipo de plugins como cualquier otro se incorpora en una web mediante un simple código HTML, es decir cuando llegues en este caso a ver uno de estos, tan solo habrías de añadirlo en tu sitio para tener instalado tu gadget.

Por si aun hay problemas para lo anterior, te dejo un tutorial donde se muestra como insertar un código HTML en las plataformas mas populares de creación web.

¿Debo de pagar por crear los formularios?

No a la fuerza. Estas herramientas ofrecen versiones gratuitas, pero para conseguir mejores funciones o soporte de su parte, están sus planes de pago, que la verdad no son nada despreciables.

¿En donde puedo encontrar mas ayuda sobre estas apps?

Al final en la reseña de cada una, deje un enlace hacia su centro de soporte o su punto de contacto oficial.

¿Que mas le puede ayudar a mi web?

Mira, en TodopatuWeb te mostramos muchos widgets HTML de alta calidad. Explorarlos aquí.

¿Debería compartir este post?

Pues si crees que es útil y le serviría mucho a alguien mas, si. Gracias si lo haces :), pues ayudas a posicionar mejor los contenidos de este sitio web.

Si tienes problemas puedes siempre comentar o enviarme un email, un gran saludo webmaster.


https://www.todopatuweb.net/

Nacido en el segundo estado más marginado de México, es un joven emprendedor que se ha atrevido a desafiar las reglas del éxito. Desde muy pequeño fue encantado por las computadoras, hasta tal punto de pasar todo el día explorando el software que se le atravesara por su camino. Le encanto tanto el Diseño Web que se dio cuenta de los problemas que tenían muchas personas relacionadas al tema y a los 12 años creo un pequeño blog llamado "Patuweb" para ayudarlas, lo que actualmente es esta plataforma, para continuar con este texto habría que ver hasta donde llega. Creo a los 12 años "TodopatuWeb",

Subscribe