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.
En este sitio también he tenido la suerte de colaborar en el desarrollo e implantación de su página de reservas online, la primera de la que goza una escuela infantil en España, según afirma Sergio Vázquez, quien ha realizado el asesoramiento SEO del sitio y el diseño de la estrategia para la página de reservas
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:
- 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.
- 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.
- 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.
- 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.
- 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.
- 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 podrás descargar libremente próximamente desde aquí. El PDF contiene además una versión imprimible de este artículo.
Instalación y configuración básica de Contact Form 7
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
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).
Veamos, a continuación, el formulario de contacto de la Escuela Infantil Gran Vía.
En esta imagen, observarás; primero, que el «look and feel» no es el que ofrece Contact Form 7 por defecto. Hemos aplicado un poco de CSS+HTML y eso lo veremos en uno de los trucos.
Por otra parte, aparecen dos campos de tipo «checkbox», cuyo código no está en el que hemos visto, un poco más arriba, en el ejemplo de un formulario de contacto básico. Además, uno de esos «checkboxes» lleva un link. Eso lo veremos también en otro de los trucos.
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». Observa la imagen siguiente.
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.
Como ejemplo, seguimos en la página de reservas online de la Escuela Infantil Gran Vía (ver imagen siguiente).
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:
- Se presenta la página de PayPal para que el usuario haga login.
- 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.
En el apartado «Language & Currency» configuraremos tanto el idioma como la moneda a usar (ver imagen siguiente).
A continuación, viene el apartado «PayPal account». Aquí, especificaremos si estamos en pruebas (modo «sandbox») o si funcionamos en real (cuenta «Live»).
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 (ver figura siguiente).
- 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».
2. Cómo integrar Contact Form 7 con Mailrelay
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. Por ejemplo, podrías usar un código semejante al siguiente.
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».
En la imagen siguiente se muestra una posible configuración de este apartado.
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.
En Blogpocket hallarás un par de post acerca de este servicio: Cómo crear una Newsletter con Mailrelay y Email marketing usando Mailrelay.
3. Cómo redirigir a una página determinada de tu sitio después de que el usuario envíe el formulario
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 (ver imagen siguiente).
La solución del plugin, descrita en este truco, es la que me ha funcionado a mí en todos los casos, incluyendo dispositivos móviles. El plugin Contact Form 7 – Success Page Redirects no recarga nada WordPress y no ha dado ningún problema en las pruebas que yo he realizado ni en la instalación de la Escuela Infantil Gran Vía.
4. Cómo añadir una checkbox con links al formulario
El formulario solo se puede enviar si marcas esa casilla. Pero revisemos el código correspondiente a un campo de tipo «checkbox». Lo tienes en la imagen siguiente.
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. Mira el código, a continuación, correspondiente al formulario de la Escuela Infantil Gran Vía.
Se ha remarcado en rojo el código correspondiente al checkbox. Como ves, solo posee un texto que dice «Sí». El resto de la línea es el HTML necesario para escribir un texto con los dos links.
Fácil ¿no?
Si ya eres suscriptor, accede a la página de descarga desde el último boletín recibido.
Deja una respuesta