Cómo crear un formulario HTML

Conocer la opinión de tus clientes es vital, y una forma fácil y rápida de obtener sus comentarios es a través de un formulario en tu sitio web. Si deseas ahorrar un poco de inversión en su creación, puedes recurrir a la programación para lograrlo. 

Si has intentado crear un formulario HTML para tu sitio web, pero no has tenido éxito, descuida: sabemos que el uso de código puede ser atemorizante, pero con un paso a paso de cómo hacerlo, seguro lo comprenderás rápidamente.

Antes de decirte cómo desarrollarlo, es indispensable que conozcas un poco del lenguaje básico que estarás manejando en materia de HTML. De lo contrario, podrías sentirte un poco perdido acerca de qué significa y para qué funciona cada etiqueta y atributo. Por ello, empecemos con un poco de teoría. 

4 elementos de un formulario HTML

Un formulario HTML no requiere tantas etiquetas y atributos, siempre y cuando lo mantengas con un formato básico. Los elementos que necesitas son los siguientes: 

1. Form

Sus etiquetas son <form> y </form>

Dentro de ellas se colocan todos los atributos necesarios para dar estructura a tu formulario. Los cuales son: 

• Action: especifica la acción asociada al formulario.
• Method: indica el método de acceso de la acción del formulario.
• Enctype: determina el tipo de codificación nombre/valor.

2. Input 

Su etiqueta es <input>

Cuenta con diferentes tipos de entrada:

• Texto: se expresa como <input type=text> y es por defecto la entrada de una sola línea. También puede tener otros atributos: <input maxlenght> que limita los campos a introducir; <input size> para indicar el espacio a disponer para cada campo y finalmente <input value> que indica el valor inicial de campo. 
• Caja de selección: se expresa como <input type=checkbox> y sirve para representar opciones como «Sí/No». 
• Botón: su etiqueta es <input type=radio>, representa un conjunto de varios elementos de este tipo con el mismo nombre con un campo de selección múltiple. 
• Botón de envío: se expresa como <input type=submit> y representa la opción de lo que tiene que hacer el usuario. En este caso, enviar el formulario. 

3. Select 

Su etiqueta es <select>

Se utiliza para reducir una lista de valores, por ejemplo:

• Multiple: indica que puede haber más de una opción.
• Name: nombre de campo.
• Size: número de ítems visibles.

4. Text area 

Su etiqueta es <textarea>

Representa el espacio donde puedes colocar todo el texto que requieras y puede tener los siguientes atributos: 

• Cols: número de columnas visibles.
• Name: nombre del campo.
• Rows. Número de líneas visibles.

Una vez conocida y comprendida esta información, continuamos con las indicaciones para crear un formulario HTML de forma rápida y sencilla. 

1. Usa PHP para crear tu página

Al momento de crear tu página web en donde habilitarás tu formulario, en lugar de utilizar la extensión .html, escribe .php. Al hacer esto, el servidor sabrá alojar el PHP que escribas, en vez de guardar la página HTML vacía. Agrega un nombre como «formulariodecontacto.php». Una vez creada y guardada, podrás comenzar a desarrollar tu formulario.

2. Realiza tu formulario con código HTML

En este paso debes escribir el código HTML para crear el formulario. Para hacerlo ocupa las etiquetas y atributos que te compartimos anteriormente. Si no estás del todo seguro de cómo incluirlos, te compartimos un código de formulario básico:

Con este formulario podrás solicitar el nombre y correo electrónico del usuario, el área que le interesa contactar, la razón por la que te contacta y también le puedes proporcionar un cuadro de texto en blanco para que pueda colocar su mensaje. Incluye un CTA que indica dónde enviar su solicitud. Cópialo y cambia los datos que desees. 

<form action=»contact.php» method=»post»>
  <div class=»elem-group»>
    <label for=»name»>Nombre</label>
    <input type=»text» id=»name» name=»visitor_name» placeholder=»Nombre de ejemplo» pattern=[A-Zsa-z]{3,20} required>
  </div>
  <div class=»elem-group»>
    <label for=»email»>Correo electrónico</label>
    <input type=»email» id=»email» name=»visitor_email» placeholder=»ejemplo@email.com» required>
  </div>
  <div class=»elem-group»>
    <label for=»department-selection»>Área a contactar</label>
    <select id=»department-selection» name=»concerned_department» required>
        <option value=»»>Selecciona un área</option>
        <option value=»billing»>Facturación</option>
        <option value=»marketing»>Marketing</option>
        <option value=»technical support»>Servicio al cliente</option>
    </select>
  </div>
  <div class=»elem-group»>
    <label for=»title»>Motivo de contacto</label>
    <input type=»text» id=»title» name=»email_title» required placeholder=»Problema/Consulta» pattern=[A-Za-z0-9s]{8,60}>
  </div>
  <div class=»elem-group»>
    <label for=»message»>Solicitud</label>
    <textarea id=»message» name=»visitor_message» placeholder=»Escribe tu mensaje aquí.» required></textarea>
  </div>
  <button type=»submit»>Enviar mensaje</button>
</form>

3. Habilita el envío del formulario a un correo electrónico

Una vez que realices una vista previa de tu formulario para cerciorarte de que todo aparezca justo como lo deseas, es tiempo de crear las instrucciones para que cuando el usuario haga clic en «Enviar», el formulario se mande por mensaje de correo electrónico hasta tu bandeja.

Para ello, regresa al inicio de tu código y arriba de él agrega un código más, será el que habilite esta acción. Copia y pega el siguiente código:

<?php

if($_POST[«message»]) {

mail(«your@email.address», «Here is the subject line»,

$_POST[«insert your message here»]. «From: an@email.address»);

}

?>

Recuerda cambiar los datos por tu información de contacto para que así el formulario llegue directamente a tu bandeja de entrada. Te explicamos la función de este código de manera desglosada: «mail» envía el formulario completo como un correo electrónico a «your@email.address» (o sea el correo electrónico que elijas para recibir los formularios), lo que sigue en el código es la línea de asunto. En el párrafo siguiente posterior puedes escribir «copia del mensaje de correo electrónico» y enviará desde la dirección de correo que escojas.

Al final todo tu código debe lucir de manera similar a la imagen: 

Una vez que se envía el formulario, la página te mandará los datos por automático. De esta manera, ya habrás creado un formulario básico para tu sitio web.  

Ten en cuenta que el código HTML puede llegar a ser muy complejo, sobre todo si no cuentas con experiencia en programación. Por lo tanto, puedes optar por otra forma de hacer tu formulario. Algunas de ellas son utilizando un CRM como HubSpot, el cual cuenta con una herramienta para crear un formulario online gratis que cumple con estas y más funciones. 

Ahora que conoces lo básico para hacer un formulario HTML, tómate el tiempo necesario para comprender su funcionamiento y creación. Como lo mencionamos, el uso de código puede ser complejo, pero con un poco de práctica y consejos, podrás estar realizando formularios personalizados como todo un profesional.