Sigue este blog vía RSS, en el Fediverso en @acambronero@www.blogpocket.com, o vía email.

You don’t speak Spanish? Explore a selection of Blogpocket posts in English

Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente

TRUCOS-CF7-BANNER Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente

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.

Si quieres ver este plugin en acción, te recomiendo visitar la página de contacto del sitio Web de la Escuela Infantil Gran Vía, de cuya puesta en marcha -en su versión WordPress.org- (migrándolo desde Blogger) soy responsable.

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:

  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 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

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.

contact-form-7-1-1 Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente
Cómo crear un formulario nuevo

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.

contact-form-7-2 Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente
Código de 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).

contact-form-7-5 Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente
Dónde encontrar el shortcode correspondiente a un formulario.

Veamos, a continuación, el formulario de contacto de la Escuela Infantil Gran Vía.

contact-form-7-3 Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente
El formulario de contacto usado en 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.

contact-form-7-6 Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente
Campos a rellenar: emisor y receptor del email.

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).

contact-form-7-7 Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente
El formulario de reservas online de la Escuela Infantil Gran Vía.

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).

contact-form-7-8 Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente
Configuración de la pestaña «PayPal» para un formulario integrado con ese medio de pago.

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 (ver imagen siguiente).

contact-form-7-9 Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente
Configuración del idioma y la moneda a usar.

A continuación, viene el apartado «PayPal account». Aquí, especificaremos si estamos en pruebas (modo «sandbox») o si funcionamos en real (cuenta «Live»).

contact-form-7-10 Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente
Modo real o funcionamiento en pruebas.

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).

contact-form-7-11 Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente
Páginas de retorno desde PayPal.
  • 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. Por ejemplo, podrías usar un código semejante al siguiente.

contact-form-7-12 Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente
Código para un formulario de captura de nuevos suscriptores.

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.

contact-form-7-13 Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente
Mapeo del plugin 3rd Party con un formulario de Mailrelay.

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.

Mailrelay es un servicio de email marketing excelente, especialmente enfocado a la sencillez de uso y configuración; y a la eficacia.

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

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 (ver imagen siguiente).

contact-form-7-14 Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente
Selección de la página a mostrar si el formulario se envía satisfactoriamente.
Esta operación se puede llevar a cabo, sin la instalación de un plugin como el que se ha propuesto aquí. Sencillamente, colocando una instrucción de JavaScript dentro de la pestaña «Ajustes adicionales». En el siguiente artículo se revisan todas las soluciones que existen para mostrar una página tras el envío de un formulario de Contact Form 7: Redirect to a Thank You Page with WordPress CF7.

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

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». Lo tienes en la imagen siguiente.

contact-form-7-15 Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente
Código de un formulario con checkboxes sin links.

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.

contact-form-7-16 Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente
Código de un formulario con un checkbox con links.

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?

Para leer los dos trucos restantes, descarga el PDF de este post. Para ello, suscríbete a mi lista de correo y en el boletín de bienvenida obtendrás el enlace a la página de descargas.

Si ya eres suscriptor, accede a la página de descarga desde el último boletín recibido.

Obtén el PDF de este post «Trucos de Contact Form 7», con dos trucos extra, suscribiéndote a mi lista de correo (haz clic en la imagen siguiente)

SUSCRIBETE Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente

¿Estás buscando hosting?
SiteGround es el hosting de Blogpocket ¡pruébalo!:SITEGROUND-EL-HOSTING-QUE-ME-GUSTA Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente
Responder en Mastodon (requiere usuario en esa plataforma)

Puedes usar tu cuenta de Mastodon para responder a este post de

Copia y pega esta URL (https://www.blogpocket.com/?p=55992) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.

Icono de Mastodon

9 respuestas a «Trucos de Contact Form 7 para WordPress: haz formularios de contacto fácilmente»

  1. Hola,
    Estaba revisando sus artículos son muy interesantes, en mi blog tengo cosas similares Agencia de Marketing Digital en Mexico.
    Es posible que desee considerar vincular a mi blog de su página y yo al suyo
    De cualquier manera, seguire leyendo su sitio.
    Muchas Gracias
    Roberto

    1. Muchas gracias por el feedback. Saludos :))

  2. Una manera mucho más sencilla de redireccionar a una página de gracias es colocar este pequeño código en el apartado «ajustes adicionales» cuando creas un formulario de contacto:

    on_sent_ok: «location = ‘https://www.tudominio.com/gracias/’;»

    Saludos!

    1. Hola Mónica. Gracias por el tip pero yo lo probé y en dispositivos móviles detecté fallos. Por eso opté por recomendar el plugin. Saludos 🙂

  3. Alberto

    Hola, Antonio.
    Te sigo desde hace años, aunque no había tenido ocasión aún de escribir.
    Así que, primeramente, darte las gracias por la cantidad de información que compartes y tu trabajo.

    Y a propósito de este artículo, y en concreto del plugin que integra con Paypal, ¿sabes si es posible tomar la cantidad de un campo del formulario de ContactForm en lugar de introducir un valor fijo?

    Gracias y un saludo.

    1. Alberto

      Hola de nuevo.
      Me respondo a mí mismo, ya que he visto en la información del plugin que esa opción es posible en la versión de pago pero no en la gratuita.
      Al parecer, según el propio autor del plugin, en la versión gratuita del plugin podría probarse la opción de introducir 0 como cantidad y Paypal pediría a la persona usuaria el importe, pero no sería una opción recomendable por la propia PayPal…

      1. Gracias Alberto por el comentario y por la aportación. Me alegro de que mi información te haya resultado útil. Un saludo :))

  4. Naskicet

    Me gusta

    1. Gracias por el feedback :))

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido