Consigue mejores formularios: trucos de Contact Form 7

Leonor Cañuelo4 febrero, 201710min14670
trucos-de-contact-form-7.png

Seguro que estás acostumbrado a hacer numerosos formulario de contacto para tu web o la de otras personas, y seguro que conoces Contact Form 7.

Pero, ¿sabes todo lo que puedes hacer con este plugin? Contact Form 7 tiene numerosos secretos ocultos, ¡sigue leyendo para conocerlos todos!

En este post te cuento unos ‘truquitos’ muy muy interesantes para mejorar y personalizar tus formularios de contacto, con el plugin Contact Form 7.

Si no sabes de lo que estoy hablando, aquí tienes un listado de los plugins de WordPress más importantes y que tienes que instalar sí o sí en tu página web, entre los que se encuentra Contact Form 7.

 

Trucos con código html

Si sabes algo de código html y css, seguro que has podido aplicar diferentes estilos a tus formularios, ya que el plugin Contact Form 7 lo que te ofrece es un cuadro de texto libre en el que puedes introducir lo que quieras.

Pues bien, además de todas las casillas que aparecen arriba del cuadro de texto, puedes introducir diferentes líneas de código simples para poder darle formato a tu formulario (párrafos, listas, tablas, etc.).

Aquí puedes ver un listado de códigos html básicos para este tipo de formularios.

 

¿Cómo redireccionar a una página de agradecimiento tras enviar un formulario?

Esta pregunta es una de las más realizadas a la hora de hacer un formulario, y más aún si nuestro objetivo final es que los usuarios rellenen el  formulario y queramos medir las conversiones en Analytics o Adwords.

Es muy simple. Lo primero que tenemos que hacer es crear la página de “Gracias” de igual manera que creamos cualquier otra página.

En esta página colocaremos los códigos de seguimiento de Analytics o Adwords.

¿Y cómo hago que cuando los usuarios envíen el formulario les lleve a la página de gracias? Tenemos que pegar el siguiente código html en el apartado “Ajustes Adicionales” del plugin Contact Form 7:

on_sent_ok: “location = ‘/gracias’;”

 Recuerda introducir exactamente la url de tu página de agradecimiento entre las comillas simples.

 

Casilla para aceptar Términos y Condiciones

Seguro que te has dado cuenta que entre los numerosos códigos que puedes introducir en tu formulario con este plugin no aparece típica casilla de verificación para aceptar los Términos y Condiciones.

Y además, no puedes utilizar una casilla de verificación normal, ya que en este caso, el formulario no debería enviarse hasta que el usuario no acepte la cláusula de Términos y Condiciones.

Pues es muy sencilla de colocar, sólo tienes que copiar este código en el cuadro de texto donde estás construyendo tu formulario:

[acceptance terminos-condiciones] Acepto los <a href=”/terminos-condiciones” target=”_blank”> términos y condiciones</a>

 Recuerda que, al igual que pasaba con la página de gracias, tienes que haber creado previamente la página de “Términos y Condiciones” y debes poner en el código la url exacta de dicha página.

 

Mi formulario de contacto tiene un diseño diferente al de mi plantilla

Bueno, bueno,… esto pasa a menudo en algunas plantillas de WordPress, y es un rollo intentar hacer que se parezca el diseño en el cuadro de texto con código html y css.

Pues bien, la solución es bien sencilla, aunque dependerá del tema que tengas instalado. En este caso te enseño cómo hacerlo con la plantilla Divi.

Tienes que ir a Divi > Opciones del Tema, bajas hasta el final de la página y en CSS personalizado copias el siguiente código:

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {

background-color: #eee !important;

border: none !important;

width: 100% !important;

-moz-border-radius: 0 !important;

-webkit-border-radius: 0 !important;

border-radius: 0 !important;

font-size: 14px;

color: #999 !important;

padding: 16px !important;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

.wpcf7-submit {

color: #8B3C90 !important;

margin: 8px auto 0;

cursor: pointer;

font-size: 20px;

font-weight: 500;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

padding: 6px 20px;

line-height: 1.7em;

background: transparent;

border: 2px solid;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

-moz-transition: all 0.2s;

-webkit-transition: all 0.2s;

transition: all 0.2s;

}

.wpcf7-submit:hover {

background-color: #eee;

border-color:#eee;

padding: 6px 20px !important;

}

 Recuerda cambiar los códigos de color por los de tu página web.

Opciones-Divi

 

En otras plantillas, como por ejemplo Bridge, no te tienes que preocupar de esto, ya que automáticamente se te establece tu diseño por defecto.

 

¿Cómo puedo enviar un correo electrónico automático cuando los usuarios envían un formulario de contacto?

Esto es muy simple y no es como tal un truco de Contact Form 7, ya que en verdad es una funcionalidad del plugin. El problema es que mucha gente no lo sabe.

En el apartado “Correo Electrónico” de los ajustes del plugin puedes ver que hay una casilla para activar el correo electrónico 2.

Una vez activas esta casilla, se te despliega un apartado exactamente igual que el que has rellenado para el email que te llega a ti cuando alguien te contacta.

En esta ocasión lo que tienes que hacer es rellenarlo para que llegue al email de esa persona. Por tanto, fijándote en los códigos que has utilizado en los diferentes campos del formulario, puedes redactar un email para esa persona totalmente personalizado.

formulario Contact 7 ejemplo

 

Cómo añadir más destinatarios con Contact Form 7

Hay ocasiones en las que queremos que cuando nuestros usuarios rellenen un formulario queremos que este email llegue a más de un correo electrónico. En este caso, puedes añadir varias direcciones de correo electrónico en copia.

¿Y cómo lo hacemos? En la sección de Encabezados Adicionales, debes añadir:

CC:direcciondeemail@email.com o BCC:direcciondeemail@email.com, si quieres que el email llegue en copia o en copia oculta, respectivamente.

 

¿Qué te han parecido estos trucos?

Estos son algunos de los trucos más usados para personalizar y mejorar tus formularios de contacto, pero seguro que existen muchos más.

¿Conoces alguno más? ¿Te han parecido útiles estos trucos? ¿Ya los utilizabas?

¡Cuéntamelo todo en los comentarios! 😉

Leonor Cañuelo

Diseñadora web y experta en Marketing Digital y Social Media. Amante de la música, la informática y las nuevas tecnologías. Actualmente haciéndome un huequito en el mundo online con mi blog leonorcanuelo.com


Sígueme en Feedly

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies