En este artículo hallarás los mejores trucos de Contact Form 7 para WordPress. Si tu misión es crear formularios de contacto fácilmente has llegado al sitio adecuado. Descarga también aquí un PDF para imprimir el post que incluye, además, dos trucos más.

Contact Form 7 es un plugin para añadir formularios de contacto para WordPress. Es una extensión muy popular y también la más fácil de configurar.

Otra de sus ventajas, y eso lo veremos especialmente en este artículo que estás leyendo, es que existe una gran cantidad de plugins (gratuitos y de pago) que se integran con él. Con ello, lograrás extender ampliamente las funciones y posibilidades.

Te detallaré, a continuación 4 trucos de Contact Form 7 para WordPress. Pero, atención, porque este artículo lleva un bonus muy interesante: la descarga de un PDF con la versión imprimible del post más 2 trucos más que solo verás en dicho PDF. ¿Cómo podrás acceder a ese PDF? ¡Muy fácil! Haciéndote suscriptor de la newsletter de Blogpocket. O si ya lo eres, simplemente escribiendo tu e-mail.

Los trucos de Contact Form 7 que hallarás en este artículo son los siguientes:

  1. Cómo integrar Contact Form 7 con PayPal. Esto te permitirá poner en marcha una pequeña tienda online o, como en el caso de la Escuela Infantil Gran Vía, poner en marcha una página de reservas de plaza online.
  2. Cómo integrar Contact Form 7 con Mailrelay. Una solución muy sencilla para poder capturar nuevos suscriptores con un formulario que presente más opciones que las que ofrecen los widgets estándar.
  3. Cómo redirigir a una página determinada de tu sitio después de que el usuario envíe el formulario. Contact Form 7 incluye una opción para hacer eso. Sin embargo, además de no ser trivial, yo he detectado fallos en dispositivos móviles. Por ello, te propondré aquí otra solución muy sencilla.
  4. Cómo añadir una checkbox con links al formulario. Un truco muy fácil de implementar; ya que por defecto, los checkboxes de Contact Form 7 no permiten incluir enlaces.
  5. Cómo aplicar un «look and feel» al formulario (*). El plugin Contact Form 7 no te permite cambiar el diseño de los formularios. Eso supone que todos los formularios hechos con Contact Form 7 sean iguales. A menos que apliques un poco de CSS y HTML. Este truco incluye un modelo para que puedas personalizar los formularios de Contact Form 7.
  6. Cómo conseguir que los formularios de Contact Form 7 validen como AMP (*). Si usas el formato AMP para acelerar las páginas de tu blog en las búsquedas en móviles (algo que te recomiendo absolutamente), entonces tendrás que aplicar este truco para que tus formularios de Contact Form 7 te sirvan también en la versión AMP.

(*) Estos dos trucos de Contact Form 7, los encontrarás solo en el PDF que puedes descargar libremente si eres suscriptor de Blogpocket. El PDF contiene además una versión imprimible de este artículo.

Instalación y configuración básica de Contact Form 7

No vamos a entrar en muchos detalles acerca de instalación del plugin Contact Form 7. La razón es bien simple: ¡Tú ya sabes instalar plugins de WordPress! ¿No es así? Entonces, debes acudir inmediatamente a mi curso de WordPress para principiantes.Y respecto a la configuración, Contact Form 7 presenta unas pocas pestañas, tal como puedes observar en la imagen siguiente.

Para crear un formulario nuevo, acude a la opción «Contacto > Añadir nuevo» (1). En la pestaña «Formulario», verás un modelo de formulario de contacto, por defecto, semejante al que se muestra en la imagen previa (2). Modifícalo usando la botonadura de opciones que aparece en la parte superior de la caja de edición y, finalmente, pulsa el botón «Guardar» (3).

Respecto al resto de pestañas, hay que decir:

  • Correo electrónico. Se usa para personalizar el mensaje que te llegará cuando el usuario envíe el formulario.
  • Mensajes. Aquí puedes personalizar todos los mensajes de aviso y error que le aparecerán al usuario, durante el proceso de relleno y envío del formulario.
  • Ajustes adicionales. En general, no necesitarás hacer uso de esta pestaña. Los usuarios avanzados pueden emplear código JavaScript para realizar, por ejemplo, redirecciones a páginas, una vez que el formulario se envía; o evitar que se envíe el correo electrónico.
  • PayPal. Esta pestaña se crea si instalas el plugin de integración con PayPal.
  • Redirect Settings. Esta pestaña también se crea solo si se instala el plugin de redirección, que veremos en uno de los trucos.

Un formulario de contacto básico

Es preciso indicar, en este momento, que Contact Form 7 está principalmente orientado al desarrollo de formularios de contacto. Sin embargo, con pequeños cambios e integraciones, es posible realizar cualquier tipo de formulario. Por ejemplo, se pueden implementar formularios opt-in para captar suscriptores, desarrollar páginas de reservas online, etc.

La imagen que precede a estas líneas, muestra el código correspondiente a un formulario básico. El usuario deberá teclear su nombre y su email. Además, debe escribir un mensaje de texto y hacer clic en el botón «Enviar». El asterisco indica qué campos será obligatorio rellenar. Mientras que las variables donde se guardarán esos datos son «your-name», «your-email» y «your-message». Estas variables podrán usarse dentro de la pestaña «Correo electrónico» y personalizar, así, el mensaje que se recibirá cuando el usuario envíe el formulario, haciendo clic en «Enviar».

Una vez que has creado el formulario, ¿cómo lo insertas en tu sitio Web? Muy fácil: vete a la lista de formularios en «Contacto» y copia el shortcode correspondiente (ver imagen siguiente).

El correo electrónico por defecto

Ya sabemos cómo crear un formulario nuevo y cómo añadirlo a tu Web. Pasemos, ahora, a tratar un poco la pestaña correspondiente al correo electrónico.

¿Cuándo se envía este email y quién es el destinatario? Este correo electrónico se enviará cuando el usuario haga clic en el botón «Enviar» (o como tú quieras llamarlo). Su destinatario eres tú, el dueño o administrador del sitio Web.

Para que el correo se envíe y el destinatario lo reciba correctamente, hay que tener cuidado en la configuración, dentro de la pestaña «Correo electrónico».

El texto puede ser cualquiera. Recuerda que puedes usar las variables «your-name», «your-email» y «your-message».

Pero debes prestar especial atención a los campos «Para» (destinatario) y «De» (emisor). ¡Cuidado! porque tanto el emisor como el receptor eres tú mismo. O mejor dicho, tu emisor es WordPress y el receptor es la cuenta de correo que uses habitualmente (o una creada especialmente para este propósito).

En el campo «De», puedes dejar el valor que la instalación de WordPress haya puesto por defecto o, mejor, puedes usar tu cuenta de email del servidor (no conviene usar la de Gmail, Yahoo, etc.). Cuando instales WordPress en tu servicio de alojamiento Web, debes crear también una cuenta del estilo «info@miblog.com» (si tu dominio es «miblog.com»). Usa esa dirección de correo electrónico como emisor del formulario.

La cuenta de correo del campo «Para» puede ser una de Gmail, Yahoo, etc. Aquí sí. Usa en este campo tu cuenta de correo habitual o una creada especialmente para este cometido.

Trucos de Contact Form 7 para WordPress

Y, después de esta breve introducción al plugin Contact Form 7, vamos a ver los trucos que te permitirán sacarle mucho más provecho.

1. Cómo integrar Contact Form 7 con PayPal.

Contact Form 7 se integra con el plugin CF7 – PayPal Add-on de forma que es posible desarrollar una pequeña tienda online.

Realmente, el formulario para las reservas online, de la Escuela Infantil Gran Vía, es un formulario de contacto, sin mensaje de texto, hecho con Contact Form 7. Aparentemente, y exceptuando que tiene un diseño propio, codificado con CSS y HTML, y que posee un checkbox con dos links, su creación no tiene nada de especial. Sabríamos desarrollarlo con todo lo explicado hasta el momento.

Sin embargo, cuando el usuario hace clic en el botón «Reservar» suceden dos cosas:

  1. Se presenta la página de PayPal para que el usuario haga login.
  2. Se envía un correo de aviso al administrador del sitio Web para que sepa que hay una tentativa de reserva (hay que darse cuenta de que el usuario puede cancelar el proceso de pago, a través de PayPal o que el pago no se produzca por cualquier razón).

El plugin «Contact Form 7 – PayPal Add-on» es el encargado de realizar todo el proceso.

En primer lugar, veamos como se configura la pestaña «PayPal» del formulario (ver figura siguiente).

Simplemente, hay que indicar que el formulario se integra con PayPal y personalizar tanto el mensaje que aparecerá en la página de login de PayPal (la descripción del producto) como el precio.

Por otra parte, hay que personalizar las opciones de funcionamiento de PayPal. Para ello, hay que ir al enlace «Settings» del plugin «Contact Form 7 – PayPal Add-on», dentro de la lista general de plugins instalados.

Una vez que hayas activado PayPal en un formulario, recibirás un email tan pronto como el usuario haga clic en el botón de «enviar» (o «Reservar» en nuestro caso de ejemplo). Ese email debería ser un aviso de que alguien ha hecho uso del formulario para entrar en PayPal. Una vez que el pago se haya producido, deberías recibir una notificación del pago desde PayPal con los detalles de la transacción.

En el apartado «Language & Currency» configuraremos tanto el idioma como la moneda a usar

Lógicamente, en pruebas (modo «sandbox»), PayPal no cargará ninguna compra. Pero podrás comprobar el funcionamiento general. En este caso, escribe el email con el cual harás login en PayPal, dentro del campo «Sandbox Account».

Una vez superado el periodo de pruebas, cambia el switch en «Sandbox Mode», seleccionando la opción «Off (Live Mode)» y rellena el campo «Live account» con el mail correspondiente a tu cuenta de PayPal.

Y, finalmente, proporciona las páginas a las que se devolverá control, por parte de PayPal, en los dos siguientes casos

  • Cancel URL: Página que se mostrará si el usuario va a PayPal y hace clic en el botón de cancelar el proceso. Por ejemplo: «https://www.miblog.com/cancel».
  • Return URL: Página que se visualizará si el usuario va a PayPal y el pago se completa satisfactoriamente. Ejemplo: «https://www.miblog.com/thankyou».

PayPal permite el pago por tarjeta bancaria pero el usuario debe igualmente hacer login en su cuenta o crear una. Esto puede suponer un problema, según el caso. Téngase en cuenta que esta integración con PayPal es muy básica y solo servirá si el propósito no es muy ambicioso. Para configurar un método de pago online más completo (incluidas los pagos por transferencia bancaria u otros medios -bitcoin, etc.-), habrá que emplear otros plugins o aplicaciones.

2. Cómo integrar Contact Form 7 con Mailrelay

La integración con el servicio de email marketing Mailrelay (o cualquier otro) se puede realizar muy fácilmente con el plugin Forms: 3rd-Party Integration.El método es muy sencillo, aunque hay que tener un poco de cuidado en la configuración. Pero siguiendo los pasos siguientes no tendrás ningún problema.

Primero, crea un formulario con Contact Form 7 normalmente.

Luego, acude al enlace «Settings», que verás debajo del plugin «Forms: 3rd-Party Integration» en la lista de éstos.

En el primer apartado («Global values») escribe solo tu email en el campo «Email». Este email se usará como destino de notificaciones si se produce algún error.

A continuación expande el apartado «3rd Party Service» y añade un nuevo servicio haciendo clic en el botón «Add another service». Escribe el nombre del servicio que usarás, en el campo «Service name». En nuestro caso, pon «Mailrelay».

Después en el campo «Submissión URL» escribe la URL que verás en el parámetro «Action» correspondiente al código del formulario de Mailrelay. En este servicio, será del estilo: «https://miblog.ip-zone.com/ccm/subscribe/index/form/?language=es». Obtener esta URL entrando en tu cuenta de Mailrelay y yendo a la opción «Formularios de suscripción > Obtener código».

Ten en cuenta que, en Mailrelay, esa URL admite parámetros. Por ejemplo, el idioma («language=es») o el grupo concreto de suscripción («groups[]=id», donde id es el número correspondiente al grupo de suscriptores). Como carácter de separación entre parámetros, usa «&». Sin embargo, en el caso del grupo de suscriptores no lo añadas como parámetro, porque eso se hará dentro del apartado «Mapping».

Finalmente, en este apartado, selecciona dentro de «Attach to Forms» el formulario de Contact Form 7 al que se asociará el nuevo servicio.

Ahora, expande la sección «Mapping».

Nótese cómo se especifica, en este ejemplo, el grupo de suscriptores con id=2 y los nombres de las variables (nombre y email) correspondientes al formulario en Mailrelay. Eso hace posible que cuando se rellenen el nombre y la dirección de email, en el formulario de Contact Form 7, y se envié éste, se grabe un nuevo suscriptor en la base de datos de Mailrelay. Concretamente, dentro del grupo de suscriptores con id=2.

Te recomiendo la lectura del post CF7 + Forms 3rd party + Mailrelay, del blog de Mailrelay, donde se explica con todo lujo de detalles esta integración.

3. Cómo redirigir a una página determinada de tu sitio después de que el usuario envíe el formulario

El plugin CF7 – Success Page Redirects sirve para presentar al usuario una página inmediatamente después de que haga clic en el botón de «enviar» del formulario de Contact Form 7.Con ello, se puede medir la relación entre el número de usuarios que han visto el formulario y aquellos que lo han enviado.

Para configurar este plugin, simplemente tienes que seleccionar una de tus páginas en el desplegable que aparece en la pestaña «Redirect Settins», dentro del formulario concreto que estés usando

4. Cómo añadir una checkbox con links al formulario

Si regresas al truco número uno y echas un vistazo a la imagen con el formulario de la página de reservas online de la Escuela Infantil Gran Vía, observarás que aparecen dos campos de tipo «checkbox» (casilla de verificación). Uno de ellos, lleva dos links: uno para ver la política de privacidad y otro para revisar las condiciones generales de la reserva online.El formulario solo se puede enviar si marcas esa casilla. Pero revisemos el código correspondiente a un campo de tipo «checkbox».

En el código que se puede ver en esta imagen, aparecen dos campos de tipo «checkbox». En ambos casos, no se ha incluido ningún enlace porque no se puede insertar código HTML dentro del texto que va entre las comillas.

¿Cómo hacemos, entonces, para que el usuario pueda hacer clic en la política de privacidad o en las condiciones generales, dentro de un texto que aparezca en la misma línea, a la derecha del checkbox?

El truco es muy sencillo y consiste en dividir la línea en dos partes: la primera, un checkbox con un texto sin links y, la segunda a la derecha de aquella, un HTML con los enlaces.

Un articulo escrito por Antonio Cambronero