Contact Form 7 + Forms 3rd party + Mailrelay

Formularios de suscripción, un aspecto indispensable de cualquier plan de email marketing, pero no siempre son fáciles de insertar en nuestra web y que se adapten bien ¿Verdad? Pues hoy vamos a ver como hacerlos con el plugin Contact Form 7. ¿Qué? ¿Qué el plugin Contact Form 7 no sirve para formularios de suscripción? Vaya, […]

Formularios de suscripción, un aspecto indispensable de cualquier plan de email marketing, pero no siempre son fáciles de insertar en nuestra web y que se adapten bien ¿Verdad? Pues hoy vamos a ver como hacerlos con el plugin Contact Form 7.

¿Qué? ¿Qué el plugin Contact Form 7 no sirve para formularios de suscripción?

Vaya, es verdad, sirve para hacer formularios de contacto

Pero ¿Y si hubiera alguna forma de emplearlo con este fin?

La hay, y se llama Forms 3rd party integration

Este plugin añade la opción de integrarse con servicios externos, como Mailrelay, a varios plugins de creación de formularios para WordPress, en concreto:

Contact Form 7: https://wordpress.org/plugins/contact-form-7/
Ninja Forms: https://ninjaforms.com/
Gravity Forms: http://www.gravityforms.com/

En concreto para este ejemplo vamos a utilizar el Contact Form 7 porque … porque es el que tenía ya instalado en  mi WordPress de pruebas 🙂

Paso 1. Integrando  Contact Form 7 + Forms 3rd party + Mailrelay

Dando por hecho que ya tienes instalado el plugin Contact Form 7 lo siguiente que tenemos que instalar es el plugin «Forms: 3rd-Party Integration» así que ve al menú de plugins de tu wordpress e instálalo:

forms-3rd-party-1

Una vez instalado aparecerá en tu lista de plugins:

forms-3rd-party-2

Es imprescindible que tengas instalado Contact Form 7, Ninja Forms o Gravity Forms si no, no te servirá de nada este plugin.

Paso 2. Crear o editar un formulario

Vamos a necesitar crear un formulario o modificar uno que ya tengamos.

Lo puedes hacer desde el menú «Contacto» si utilizas Contact Form 7:

forms-3rd-party-3

Crear o editar un formulario es muy sencillo, ya que se hace de forma completamente visual, solo tienes que pinchar en el elemento que quieres añadir:

forms-3rd-party-4

Hemos creado 3 campos:

– Un campo de texto para el nombre (your-name)
– Un campo de tipo email para el … email (your-email)
– Un campo de tipo acceptance, que es un checkbox que el usuario ha de marcar para que se permita enviar el formulario (ideal si es necesario que el usuario acepte las condiciones)

Fíjate que arriba en la imagen aparece un shortcode, copialo, lo vamos a necesitar en seguida.

Y con eso ya está, guarda el formulario tal cual.

Paso 3. Añadiendo el formulario a la web

Para añadir el formulario a la web vamos a utilizar el shortcode que copiamos antes.

Y para situarlo utilizaremos un widget, así que vamos al menú «Apariencia» -> «Widgets«:

forms-3rd-party-5

Vamos a utilizar un widget de tipo «Texto«, puedes situarlo en el área de widgets que desees:

forms-3rd-party-6

Asegurate de pegar correctamente el shortcode, guarda, y en la parte pública de tu WordPress deberías de ver algo similar a esto:

forms-3rd-party-7

La ventaja del Contact Form 7 es que utiliza los mismos estilos que tu plantilla, por lo que no desentonará con la misma.

Fíjate en el checkbox de «acceptance» que añadimos, mientras no se marque no permitirá el envío del formulario.

Como ves ha sido muy fácil añadir un formulario a nuestro WordPress.

¿Cómo haremos que este formulario envíe los suscriptores a Mailrelay?

Paso 4. Sincronizando Contact Form 7 con Mailrelay

Aquí es donde entra en juego el plugin Forms 3rd party integration, para acceder al mismo iremos al menú «Contacto» -> «3rparty Services«:

forms-3rd-party-8

Para configurar correctamente esta sección vamos a necesitar la URL de nuestro formulario de suscripción de Mailrelay.

La que podemos ver en el menú «Formulario de suscripción» -> «Obtener código«:

forms-3rd-party-9

Copia la URL que va dentro del «action» del formulario.

Vuelve a tu WordPress y donde estabamos, sobre la mitad de la página verás una sección que indica «3rd-Party Service: Service 1«:

forms-3rd-party-10

Service Name -> indicamos el nombre que le queremos dar al servicio
Submission URL -> aquí has de poner la URL del formulario de Mailrelay, la que hemos copiado antes
Attach to Forms -> aquí indicamos a que formularios vamos a asociar este servicio, en este caso solo tenemos uno, pues a ese.

La siguiente sección es la más importante: Mapping

forms-3rd-party-11

El mapping es donde le indicamos qué campos del formulario «enlazan» con qué campos del otro servicio, en este caso Mailrelay.

La primera columna la vemos luego.

La segunda es una etiqueta, a nivel interno, para nosotros.

La tercera es el campo del formulario del Contact Form 7.

Y la cuarta es el campo de Mailrelay.

Así tenemos estos datos:

Campo «your-name» -> iría al campo «name» de Mailrelay
Campo «your-email» -> iría al campo «email» de Mailrelay

Y así con todos

Pero fíjate en la tercera línea, está marcada en el campo «is value?» (es un valor). Esto quiere decir que es un valor fijo que enviamos, un valor que el usuario no introduce, en este caso el valor es el grupo de Mailrelay al que vamos a meter a este suscriptor.

El grupo tiene ID 1, es el valor que ponemos, y en campo indicamos «groups[]«.

Con esto ya lo tenemos todo y podemos guardar.

Paso 5. Lo probamos

Si enviamos el formulario, se creará un nuevo suscriptor en Mailrelay:

forms-3rd-party-12

Y también nos enviará el contacto por email:

forms-3rd-party-13

¡Ya está!

Es muy práctico porque el Contact Form 7 es muy fácil de manejar para crear los formularios, además permite muy fácilmente:

– Añadir campos obligatorios
– Añadir un captcha
– Etc.

Nota: puedes cambiar los textos de envío en la edición del formulario, en el menú «Mensajes«, por si en lugar de «enviado» quieres poner «suscrito» 🙂

La verdad es que es un plugin muy útil, y con la posibilidad de enviar los datos a Mailrelay que nos da el plugin Forms 3rd party integration, tenemos una combinación perfecta para crear formularios cómodamente.

¡Espero que te sea útil!

Deja una respuesta

Tu dirección de correo electrónico no será publicada.