Guía Contact form 7: Crea formularios de contacto con autorespondedor fácilmente.

Este es el primer artículo en día lunes, aunque te parezca raro en Hostingroup decidimos publicar los lunes en vez de los martes para no haber muchos días de espera entre el segundo post de la semana y el primero de la próxima. Ya veremos en un par de meses los resultados.

Entrando al tema, hoy hemos preparado la guía contact form 7, si no conoces a este plugin (aunque lo dudo mucho), la función del plugin es crear formularios de contacto en nuestro wordpress (¿sigues sin usar wordpress? aquí 10 razones para elegir wordpress), ya que por defecto wordpress no trae formularios de contacto, además te enseñaremos a usar el autorespondedor de contact form que no es más que enviar un mensaje automático al usuario una vez rellene un formulario.

Guía Contact Form 7

Estos los pasos o las partes que realizaremos en la guía:

Instalar el plugin Contact Form 7
Creando el formulario
Configurar el destinatario del mensaje
Usando el autorespondedor
Instalar plugin WP Mail SMTP

Instalar el plugin Contact Form 7

El primer paso es obviamente instalar el plugin, esto es muy sencillo, se instala como cualquier otro plugin vas a wp-admin -> plugins -> Añadir nuevo y en el buscador escribes “contact form 7” y el primer resultado será el que instalaremos.

Una vez instalado y activado, pasaremos con la segunda parte de la guía contact form 7

Creando el formulario

Al activar el plugin verás como aparece una nueva opción en el menu lateral izquierdo llamada “contacto”, entras allí y verás creado ya un formulario de contacto, en este caso vamos a crear uno nuevo para que entiendas como hacerlo paso a paso, así que debes hacer clic en “añadir nuevo” que esta en la parte superior

En la siguiente pantalla te indicará que elijas el idioma, esta en español por defecto así que solo haces clic en el botón azul que dice “Añadir Nuevo” y aparecerás en el editor del formulario.

El panel de edición del formulario se divide en 5 bloques, el primero es el bloque “Formulario”.

Este bloque está dividido en dos columnas, en la columna izquierda está el campo de edición del formulario y en la columna derecha hay un listado de las opciones que se pueden agregar al formulario.

Por defecto la columna izquierda viene con un formulario ya elaborado, puedes usar ese si deseas, pero en este caso voy a borrar eso y armarlo desde cero.

El formulario tendrá 4 campos nombre, email, asunto y mensaje seguido del botón de enviar. Lo primero será saber que tipo de input o etiqueta es cada campo, en este ejemplo los tipos de etiqueta son:

campo nombre => campo de texto
campo email => email
campo asunto => campo de texto
campo mensaje => área de texto

Sabiendo esto, es momento de agregar los campos, el primer campo a agregar será el campo de texto así que en la columna derecha debes elegir la etiqueta “campo de texto”, al elegirlo te mostrará un cuadro con opciones para rellenar.

Te explico que hace cada campo:

Campo requerido: Si tildamos esta opción este campo será obligatorio de llenar.
Nombre: El nombre para identificar ese campo, puede ser cualquiera, por defecto el plugin de agrega un nombre al azar.
id: Si queremos que este input tenga un id aca se lo colocamos (opcional)
class: Si queremos que este input tenga una clase aca lo colocas (opcional)
size: Ancho del campo, seguro que tu theme ya tiene definido eso en el css así que no hay necesidad de colocar un ancho (opcional)
maxlenght: Máximo de caracteres que se pueden introducir en el campo (opcional)
Valor por defecto: Si quieres que el campo ya tenga un dato introducido lo puedes colocar aca.
Usar texto como marcador: Si quieres que el campo tenga un placeholder, es decir un texto que no sea un valor que diga “escribe tu nombre aquí” llena el valor por defecto y tilda esta opción.
shortcode largo: Es para pegarlo en el editor del formulario, es decir en la columna izquierda.
shortcode corto: Te servirá más adelante.

El mismo paso repítelo con todos los campos, al final tendrás algo parecido a esto:

Por último debes agregar el botón de enviar, en este caso el botón solo tiene tres opciones, las dos primeras son las mismas que en los otros campos y la etiqueta es el texto que figurará en el botón, algo como “Enviar Mensaje”

Listo, ya hemos acabado con la primera parte, ahora veremos como quedo el formulario, para ello debes guardar el formulario haciendo clic en el botón azul de Guardar, además le puedes colocar un nombre a ese formulario haciendo clic en el texto “Sin título” y colocando el que quieras, yo le pondré “MiFormulario”.

Al guardar el formulario, automáticamente te generará un shortcode que lo podrás pegar en cualquier página donde quieras agregar el formulario.

Ahora a ver como quedo el formulario, en mi caso el formulario quedo así:

TIP: Seguramente te diste cuenta que los campos están muy juntos, bueno pues no te preocupes arreglarlo es muy sencillo, para ello solo tienes que editar el formulario nuevamente y cada campo colocarlo entre la etiqueta «» quedandote de esta forma:

[text* nombre placeholder «Ingresa tu nombre»]

[email* email «Ingresa tu email»]

[text asunto placeholder «Escribe el asunto de tu mensaje»]

[textarea* comentario placeholder «Escribe tu comentario»]

[submit «Enviar Mensaje»]

Guardan los cambios y listo los campos ya están separados.

Configurar el destinatario del mensaje

Una vez terminado el formulario lo siguiente será indicarle al plugin a que correo queremos que envíe los datos llenados por el usuario en el formulario, obviamente queremos que estos datos se envíen a nuestro correo para poder leer el mensaje del usuario y poder contestarle.

Para hacer esto debes ir nuevamente al cuadro de edición del formulario y esta vez ir al bloque dos “E-mail” donde deberás llenarlo con los datos del formulario como figura en esta imagen:

Aquí te explico cada campo:

Para: El correo a donde quieres enviar los datos, es decir tu correo.
De: email que se le dirá a tu cliente de email (gmail, hotmail, etc) que envió ese correo, aquí tienes que poner tu correo porque si pones otro correo como el del usuario puede que gmail o hotmail tomen el correo como suplantación de identidad y no lo recibas.
Asunto: Asunto o título del correo
Encabezados adicionales: Indicas a que correo quieres enviar tu respuesta en caso lo hagas, es decir si abres el correo, lo lees y le das a “responder”, esa respuesta se enviará al correo indicado allí.
Archivos Adjuntos: Si quieres adjuntar algún archivo (opcional)
Usar contenido html: Si quieres usar códigos html en el mensaje (opcional)
Cuerpo del mensaje: El mensaje que se enviará a tu correo, aquí deben figurar los datos que envió el usuario, es aquí donde entra al juego el shortcode corto indicado antes, ya que será el que indique el campo y valor a agregar.

Seguramente que no guardaste el shortcode corto porque no te lo dije pero tranquilo que es muy fácil saber cual es, el shortcode corto es simplemente el nombre que tiene el campo, en este caso al campo nombre le pusimos como nombre “nombre” por lo que el shortcore sería [nombre], a email le pusimos “email” así que sería [email] y así sucesivamente.

Si no recuerdas el nombre que le pusiste al campo tampoco hay problema, solo mirá el shortcode largo y verás que indica cual es su nombre:

[text* nombre placeholder «Ingresa tu nombre»] -> El nombre siempre estará después del tipo de campo, en este caso el nombre es “nombre”.

Guardas los cambios y acabaste esta parte.

Con esto ya puedes usar el formulario de contacto tranquilamente, pero hay ocasiones en las que querrás enviar un mensaje automático apenas el usuario rellena el formulario, algo así como envías un mensaje que diga “gracias por contactarnos lo atenderemos en 24 horas”, para ello debes usar el autorespondedor del plugin.

Usando el autorespondedor

Esta parte de la guía contact form 7 es opcional, si no quieres agregar una respuesta automática al usuario cuando rellena el formulario no tienes porqué configurar esto, pero si lo deseas te enseñare como hacerlo.

Esta parte se configura en el bloque 3 llamado “E-mail (2)”, para usarlo debes activar la casilla que dice “usar email(2)”

Al tildar la casilla verás que aparecen varios campos para llenar que son los mismos que en el caso anterior con la única diferencia que estos datos son los que recibirá el usuario y no tu, por lo tanto debes configurarlo para el usuario, ¿que quiero decir con esto? que por ejemplo en la casilla “Para” debes colocar el email del usuario, es decir el shortcode [email], en “de” colocar tu email y tu nombre y así con los demás, el resultado será como en la siguiente imagen:

Instalar Plugin WP Mail SMTP

Si vas a usar el autorespondedor te recomiendo encarecidamente que también instales este plugin y es que el plugin envía el correo al usuario vía la función de php mail() que no es bien visto por los servidores de correo, por lo tanto hay muchas probabilidades de que el correo llegue a spam.

En cambio si instalamos el plugin y lo configuramos correctamente el mensaje se enviará por un entorno seguro siendo casi seguro que llegue a la bandeja de entrada del usuario.

La instalación es igual que con todos los plugins, vas a wp-admin -> plugins -> añadir nuevo y buscas el plugin “wp mail smtp”, lo instalas y lo activas.

Ahora debes ir a Ajustes -> Email y llenar los campos de SMTP Option como en la siguiente imagen:

Explico rápidamente cada campo:

SMTP Host: La url del servidor smtp de tu hosting wordpress, esto lo puedes ver en cPanel en la parte de emails “configurar cliente email” o preguntale a tu proveedor de hosting.
SMTP Port: Puerto que usa el servidor smtp, por defecto es 765 si vas a encriptar el correo con TLS.
Encryption: Esta opción indica si quieres encriptar o no el correo, lo recomendable es que sí y con TLS, ya se dejó de usar SSL debido a su última vulnerabilidad poodle.
Authentication: Si vas a autenticar tu correo o no, elige que sí para no terminar en spam.
Username y password: El usuario y contraseña de tu correo.

Una vez hecho esto puedes hacer una prueba para confirmar que los datos estan correctos, para ello está la opción “Send a Test email” donde debes colocar el correo a donde enviarás un mensaje de prueba.

Si llegaste hasta aquí !Felicidades¡ ya terminaste de configurar correctamente el plugin gracias a la guía contact form 7.

Ahora te pido un favor, si te pareció bueno el articulo por favor compártelo en tu red social así le puede ayudar a alguno de tus amigos.

¿Quieres la mejor velocidad, seguridad y estabilidad para tu WordPress? Ya no tienes que buscar más que en Hostingroup te ofrecemos el mejor hosting para wordpress de latinoamérica! La migración es gratis.