Como crear un formulario

Crear formularios en HTML – Para poner en tu web

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 además 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 artículo extenso que he preparado para que tú puedes aprender lo mejor posible. Si tienes tiempo compártelo, gracias.

Tipos de formularios HTML según su fin

  • De contacto
  • De registro
  • De reservación
  • De pago
  • De suscripción
  • Tipo Quiz

En otra ocasión explicaré cada uno detalladamente, por lo que ahora nos enfocaremos en lo que estás 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 negocio o el vendedor.

Pero la realidad es que, hasta el día de hoy, los formularios de contacto tradicionales siguen ocupando la etiqueta de “indispensable”, por lo que no es recomendable dejar de emplearlos en tu web.

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 ver que no es nada del otro mundo).

1. Crear el HTML del formulario y configuralo como quieras

En tu editor HTML y en donde quieras que se muestre, empieza añadiendo la etiqueta del elemento estándar para todo formulario HTML: “<form>” con un nombre y una ID.

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

Lo que escribirás será esto:

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

El atributo action sera el encargado de enviar los datos temporales del formulario estático a un archivo PHP y este se encargará 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 poner los campos utilizaremos los elementos HTML: “label”, “input”, “textarea” y “<span>” para el texto que los acompañara.

Mas info
  • Dentro de los elementos HTML “label” indicas que subelemento se está requiriendo gracias al atributo: for, por ejemplo el de nombre (name).
  • En los elementos “input”, el atributo type te está diciendo para que tipo de información está 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.

El código final del HTML del formulario de contacto es el siguiente, (tomando en cuenta que envolvimos todo en 2 contenedores (div’s):

<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="Por favor 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>
<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>

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 darle estilos al HTML. Recuerda que puedes modificarlo a gusto, con el propósito de que concuerde visualmente con tu web. En específico, el siguiente:

.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; }
Mas info
  • 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.

Ponlo en el archivo CSS general 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, metiéndolo entre etiquetas <style> y </style>, aunque es una práctica no muy recomendada.

3. Sube a tu servidor el archivo PHP para enviar los datos a tu email

Descarga el siguiente archivo, edítalo con el bloc de notas y reemplaza “tuemail@destino.com” (sin borrar las comillas) por el correo electrónico al que quieres que lleguen los datos.

Ahora súbelo a la carpeta raíz de tu página web (no de tu servidor), procurando mantener el mismo nombre “envio.php”. Por ejemplo en WordPrees (la carpeta se titula “public_html”

Finalmente, en el HTML en “action=”envio.php”, por si las moscas pon la URL de tu sitio web completa al inicio, osea:

https://www.miweb.com/envio.php”

Por ejemplo, en mi caso esa sección del código quedaría así:

<form name=”primerformulario” id=”ff” method=”post” action=”https://www.todopatuweb.net/envio.php”>

De todas maneras, si el archivo PHP no está disponible para descargar, puedes copiarlo desde aquí.

Recuerda revisar la carpeta de SPAM de tu correo porque normalmente llegan ahí los mensajes, si quieres que esto deje de pasar añade el remitente a tu lista de “Contactos” o de “Remitentes seguros”.

¿Tienes dudas o sugerencias?

No olvides comentar cualquier pregunta o sugerencia en la caja de comentarios respecto al procedimiento y también si te ha gustado el contenido del post. 🙂

Herramientas para crear formularios HTML5 sin programar

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.

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 más 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.

 

Precios (pagado al año):
  • Individual – $0
  • Pro  – $9/mes
  • Team – $19.2/mes
  • Enterprise – $79.2/mes
Precios (pagado al mes):
  • Individual – $0
  • Pro  – $10/mes
  • Team – $24/mes
  • Enterprise – $99/mes
Precios (pagado c/6 meses):
  • Individual – $0
  • Pro  – $10/mes
  • Team – $21.6/mes
  • Enterprise – $79.2/mes
Características principales:

– Zoho Forms

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

 

Precios (pagado al año):
  • Básico: $8/mes
  • Estándar: $20/mes
  • Profesional: $40/mes
  • Prémium: $80/mes
Precios (pagado al mes):
  • Básico: $10/mes
  • Estándar: $25/mes
  • Profesional: $50/mes
  • Prémium: $100/mes
Características principales:

– Paperform

Su oferta de paquetes de pago es una de las mejores si se le compara entre las grandes soluciones de esta lista, ofrece una interfaz realmente agradable. bastante diferente del modo habitual de crear simples formularios.

 

Precios (pagado al año):
  • Essentials – $12.50/mes
  • Pro – $32.50/mes
  • Agency – A partir de $82.50/mes
Precios (pagado al mes):
  • Essentials – $15/mes
  • Pro – $39/mes
  • Agency – A partir de $99/mes
Características principales:

– 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, además ofrece envíos ilimitados.

 

Precios (pagado al año):
  • Gratis: $0

G Suite (solo aumenta el almacenamiento)

  • Basic: $4.16/usuario/mes
  • Business: $10/usuario/mes
  • Enterprise: $25/usuario/mes
Precios (pagado al mes):
  • Gratis: $0

G Suite (solo aumenta el almacenamiento)

  • Basic: $5/usuario/mes
  • Business: $10/usuario/mes
  • Enterprise: $25/usuario/mes
Características principales:

– 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.

 

Precios (pagado al año):
  • Free: $0
  • Plus: $15.83/usuario/mes
Precios (pagado al mes):
  • Free: $0
  • Plus: $19/usuario/mes
Características principales:

– 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.

 

Precios (pagado al año):
  • Started: $0
  • Bronze: $15.83/mes
  • Silver: $32.5/mes
  • Gold: $82.5/mes
Precios (pagado al mes):
  • Started: $0
  • Bronze: $19/mes
  • Silver: $39/mes
  • Gold: $99/mes
Precios (pagado c/2 años):
  • Started: $0
  • Bronze: $15.04/mes
  • Silver: $30.87/mes
  • Gold: $78.37/mes
Ver características

 


– 123FormBuilder

Una de las opciones más 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 más potentes aquí.

 

Precios (pagado al año):
  • Básico- $0
  • Gold – $20.8/mes
  • Platinum – $37.5/mes
  • Profesional – $70.8/mes
Precios (pagado al mes):
  • Básico- $0
  • Gold – $24.99/mes
  • Platinum – $44.99/mes
  • Profesional – $84.99/mes
Ver características

 


– 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.

 

Precios (pagado al año):
  • FREE – $0
  • STARTED – $14.08/mes
  • PROFESSIONAL – $29.08/mes
  • ADVANCED – $74.08/mes
Precios (pagado al mes):
  • FREE – $0
  • STARTED – $19/mes
  • PROFESSIONAL – $39/mes
  • ADVANCED – $99/mes
Ver características

 


– Typeform

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

 

Precios (pagado al año):
  • BASIC: $0
  • PRO: $30/mes
  • PRO+: $59/usuario/mes
Precios (pagado al mes):
  • BASIC: $0
  • PRO: $35/mes
  • PRO+: $70/usuario/mes
Ver características

 


– Zotabox

Una estupenda plataforma de plugins web. Zotabox ofrece lo necesario y más 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 artículo.

 

Precios (pagado al año):
  • FREE FOREVER: $0
  • STARTER: $3.49/mes
  • EXPRESS: $6.99/mes
  • PLATINUM: $17.49/mes
Precios (pagado al mes):
  • FREE FOREVER: $0
  • STARTER: $4.99/mes
  • EXPRESS: $9.99/mes
  • PLATINUM: $24.99/mes
Ver características

 


Plugins adaptados para ciertos CMS’s

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 más conocido dentro del repositorio.

Uno de los complemento mejor adaptados al sistema de Automattic.

Se popularidad se puede respaldar por sus caracteristicas tan completas.

Entra dentro de los mejores por su potencia y capacidad de tenerla en un editor sencillo.

Para Joomla

Es la extensión gratuita más 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 más veteranas.

Para Drupal

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

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

Para Wix

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

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

En verdad, probablemente la que tiene más opciones.

Preguntas que puedes hacerte respecto al post:

¿Cómo 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 aún hay problemas para lo anterior, te dejo un tutorial donde se muestra como insertar un código HTML en las plataformas más 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.

¿Que más le puede ayudar a mi web?

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

9 Comentarios para “Crear formularios en HTML – Para poner en tu web”

Deja tu propio comentario