Crea tu primer formulario web con el plugin Contact Form 7

By 4 septiembre, 2019 septiembre 25th, 2019 No Comments

Este es el plugin que más recomiendo utilizar para poder generar formularios web simples, como por ejemplo el típico formulario de contacto donde pedimos los datos básicos como Nombre y apellidos, teléfono de contacto, correo electrónico, asunto y mensaje.

El motivo principal para que recomiende este es por su facilidad de uso y su peso y su impacto de carga en WordPress que es prácticamente nulo, es decir no hace que tu web sea más lenta como ocurre con otros Plugins.

Te muestro una ejemplo de formulario de contacto hecho con este plugin que tengo en esta misma web.

  • Es un plugin súper útil, simple de usar y ligero
  • Se requiere de muy poco tiempo para aprender a usarlo
  • Puedes utilizar prácticamente cualquier tipo de elemento
  • Puedes darle cualquier tipo de diseño con CSS
  • Es completamente GRATIS

Descargamos el Plugin de Contact Form 7

Una vez tengas el fichero .zip descargado descomprímelo y súbelo por FTP al directorio de Plugins. Como alternativa también puedes subir tu Plugin mediante el mismo WordPress en la sección Plugins > Añadir nuevo te cuento más sobre esto en el artículo ¿Como subir y instalar un Plugin aWordPress?

Subimos el plugin a WordPress y lo activamos

Filezilla subir plugin contact form 7 para worpress

Asegúrate de subir en tu directorio de Plugins dentro de WordPress (wp-content/wp-plugins) la carpeta contact-form-7 y no el archivo .zip. Si utilizas FileZilla revisa que no te haya quedado en la pestaña de Transferencias fallidas ningún archivo sin subir. Si te hubiera quedado ahí alguno, simplemente dale al clic derecho y que lo vuelva a meter a la cola para que se suba correctamente.

Para activarlo dirígete a tu WordPress con la sesión iniciada y accede a la sección de Plugins, verás que hay uno si todo ha ido bien con el nombre Contact Form 7. Dale clic a activar y listo.

Creamos nuestro primer formulario de contacto

Para ello, iremos a la pestaña donde dice Contacto y luego Añadir nuevo. Una vez ahí veremos una pantalla como esta

Crear formulario de contact form 7 en WordPress

Lo primero que harmeos será darle un nombre, en este caso como estamos creando un formulario de contacto le llamaremos simplemente así Formulario de contacto.

Fijaros que en la parte superior aparece un mensaje indicando que hay una configuración errónea, el mensaje exactamente dice:

Una configuración errónea provoca fallos en el envío de los mensajes u otros problemas. Valida ahora tus formularios de contacto. » Validar la configuración de Contact Form 7

Esto es muy importante tenerlo en cuenta ya que sin esta validación de forma correcta lo más probable es que todos los correos que nos manden a través de ese formulario web vayan directamente a la carpeta de correo no deseado o SPAM. En el punto 4 que viene a continuación te cuento como hacerlo.

Añadir telefono de contacto en contact form 7 en wordpress

En la pantalla anterior Contact Form 7 nos genera por defecto como plantilla de formulario uno que contiene los datos de Tu nombre, Tu correo electrónico, Asunto y mensaje.

Imaginemos que queremos añadir un campo de texto para que los clientes nos pongan también el número de teléfono, entonces para hacerlo podemos añadir el codigo que marco en un rectángulo negro.

El parámetro number indica que debe ser un número

El filtro * justo después indica que debe ser un campo obligatorio

El atributo min indica el valor mínimo de dígitos

El atributo max indica el valor máximo de digitos

Veréis que en la parte superior hay varios tipos de campos que podemos usar en el formulario texto, número, correo electrónico, url… todos ellos tienen filtros específicos para asegurarnos que si pedimos un correo electrónico tenga por lo menos el formato de un correo y demás.

Configuramos el servidor de correo electrónico

Configurar correo Contact Form 7

Esta pantalla es muy simple pero a su vez debes darle cierta importancia ya que es quien procesa parte del envío del correo que vas a recibir en tu buzón.

En primer lugar debes la dirección de correo donde quieres recibir tus correos en el campo Para, da igual si este correo está en gmail.com, outlook.com, yahoo.com u en otro servidor.

En segundo lugar debes introducir la dirección del correo que va a mandar ese correo electrónico en el camp De, pero ojo aquí si es importante tener en cuenta el siguiente.

Debes respetar dos cosas primordiales para este Plugin:

  • El formato debe ser el siguiente El nombre de tu empresa o el tuyo propio <cuenta@correo.com>
  • El correo electrónico que envía debe ser con el mismo dominio de tu web, es decir con la misma extensión

En mi caso y para todos mis clientes uso una cuenta llamada smtp@elnombredeldominio.com por ejemplo en esta web utilizo esto:

Met El Idrissi <smtp@metelidrissi.com>

Una vez hecho esto es imprescindible utilizar otro plugin que gestiona tus envíos a través de tu servidor SMTP de modo que este se pueda autentificar y no lleguen esos correos a tu buzón no deseado. Este es el punto más crucial de todo este artículo de modo que no tientes a la suerte!

Ese plugin se llama Easy WP SMTP  y también es gratuito, te lo puedes bajar desde el repositorio de WordPress Plugin te dejo el enlace aquí.

En el Asunto recomiendo poner una frase fija y una variable para evitar que los correos se te apilonen en un mismo hilo, es decir en nuestro caso como es un formulario de contacto generico podriamos poner algo así como:

“Formulario de contacto enviado por [your-name]

Este último [your-name] permite que recibas en el asunto la variable que el usuario haya puesto en el campo “Tu nombre”.

En el campo Cabeceras adicionales simplemente introducir el campo:

Reply-To: [your-email]

Esto lo que hace es simplmente que cuando a ti te llegue un correo electrónico (o en el buzón que hayas puesta en el campo Para, el primero de todos que pusimos) al darle clic a Responder automáticamente se responda al usuario que te mandó el correo. Esto es muy útil para agilizar procesos, pero ojo hay gestores de correo que lo ignoran.

En el último campo simplemente maquetar el contenido tal como queremos que se reciba el correo.

Guardamos y listo, ya tenemos nuestro primer formulario de contacto!

Para incrustarlo en tu pagina de contacto uso el shortcode de tu formulario y pégalo donde quieras que aparezca.

Met El Idrissi

Met El Idrissi

Desarrollador web WordPress freelance y emprendedor tecnológico en aplicaciones web SaaS

Leave a Reply