Configurar Contact Form 7 es una tarea simple si se conocen los fundamentos básicos de este plugin. En este tutorial vamos a aprender a hacer la configuración inicial de Contact form 7 (CF7). Si el plugin ya está instalado en la web, verás la opción “Contact” en el menú de la izquierda. De no ser así, puedes instalarlo desde la opción “Plugins”, con el botón “agregar nuevo”.
Si damos click en “Contact”, podremos ver una lista con todos los formularios que tengamos creados. Al instalar el plugin, verás que se crea un formulario por defecto. Lo primero que vamos a hacer es colocar este formulario en una página para ver el ejemplo que CF7 nos da. Hay dos formas de hacer esto; la primera es copiar el shortcode y pegarlo en la página. La segunda es usando un bloque de Gutenberg; para ello buscamos el bloque de Contact Form 7, el cual lista de manera automática todos los formularios de la web. Seleccionamos uno y publicamos la página. Los estilos serán distintos dependiendo del tema.
Podemos incluso hacer una prueba; sin embargo, recibiremos un mensaje de error debido a que aún no hemos hecho las configuraciones pertinentes. Volvamos a “Contact” y abramos el formulario. En la ventana de edición, veremos cuatro pestañas: Form, Mail, Messages y Additional Settings. Volveremos a cada una de estas pestañas después de aprender acerca de los tags de CF7.
Para efectos de este tutorial y para hacer las cosas fáciles, definiremos los tags como códigos especiales que nos ayudan a definir elementos en CF7. La sintaxis básica de un tag es una palabra o un grupo de palabras encerradas en corchetes. El plugin va a sustituir estos tags por distintos elementos como componentes HTML, correos, nombres etc.
Si un tag tiene más de una palabra, es porque el elemento que representa necesita valores, opciones o nombres para funcionar correctamente. Contact Form 7 reconoce dos tipos de tags, los form-tags y los mail-tags.
Los form-tags representan componentes HTML dentro del formulario de contacto. Contact Form 7 va a sustituir estos tags por inputs de manera dinámica. La sintaxis para los form-tags es la siguiente.
Los mail tags representan un dato específico, puede ser un dato ingresado por el usuario desde el formulario de contacto o algún otro como el mail del administrador del sitio. Los mail-tags están formados por una sola palabra.
Al configurar Contact form 7 podemos agregar distintos tipos de campos a nuestros formularios; desde los más básicos que podemos encontrar en cualquier formulario hasta opciones más avanzadas. Esta amplia gama de opciones hace que este plugin sea muy flexible y de gran ayuda, sobre todo si consideramos que es una opción gratuita. En general CF7 clasifica los form tags como sigue:
Aunque en general las opciones son prácticamente las mismas para todos los form tags, hay algunas que son específicas para algunos en especial. Puedes visitar los enlaces de cada tipo para ver más información acerca de los mismos y ejemplos detallados. Más adelante en este tutorial veremos un ejemplo de forma práctica.
Los generadores de form tags nos facilitan el trabajo de configurar Contact Form 7. En la parte superior de la pestaña Forms, podemos ver un conjunto de botones de color azul. Cada uno lleva por nombre un tipo de campo. A estos botones se les conoce como generadores de form-tags. Si damos clic en alguno de ellos podremos ver una pequeña ventana con las opciones disponibles para cada tipo de campo. En la parte de abajo de la ventana veremos el tag que resulta de combinar dichas opciones. Esta es una opción práctica para generar form-tags, aunque hay algunas opciones que solo se pueden implementar por medio de código.
Ahora que ya sabemos qué son los tags, podemos regresar a las pestañas que encontramos en la ventana de edición.
CF7 nos permite configurar varios aspectos de nuestros formularios de contacto y para ello el plugin nos da distintas opciones de configuración organizadas en pestañas dentro de cada formulario. Adicionalmente, otros plugins basados en CF7 agregan pestañas en esta parte.
Navegar y encontrar las opciones que queremos configurar resulta fácil. Podemos encontrar opciones para personalizar los elementos de cada formulario, opciones para el envío de la información, opciones para configurar o definir los mensajes que se muestran al usuario con cada envío entre otras.
Desde la pestaña Form podremos modificar, añadir y quitar elementos del formulario. A estos elementos se les llama campos. Podemos decir que cada campo se compone de dos partes. Por un lado está la etiqueta o label, que es lo que visualmente nos indica el nombre del elemento. Tenemos también el input o el área en la que nuestros usuarios ingresarán sus datos. Contact form 7 nos da la siguiente sintaxis:
Para ver más claramente los elementos que componen cada campo podemos separarla de la siguiente manera:
Así vemos que lo que está entre los html-tags <label></label> es la etiqueta o el nombre del campo y lo que tenemos aquí [] es el input o área para ingresar los datos.
Aquí es donde haremos uso de los form-tags para crear distintos tipos de inputs. Por ejemplo, CF7 nos da este campo:
[text* your-name]
Recordemos que la primera parte es el tipo de input y la segunda es el nombre. Podemos agregar más opciones como un identificador o id, una clase css e incluso un valor o placeholder. Tendríamos algo como lo siguiente:
[text* my-test id:test-id class:test-class placeholder “test”]
Y podremos ver el input en el formulario de la siguiente manera:
Una forma más fácil sería seleccionar una opción de la parte de arriba. Haciendo clic sobre alguno de estos elementos, podremos ver las opciones que se pueden agregar y el plugin genera el form-tag automáticamente.
Desde la pestaña Mail podremos modificar la configuración del correo que se enviará. Aquí podemos ver las siguientes opciones:
To: Indica el mail al que se enviará la información. Aquí puedes poner tu correo electrónico directamente o usar una mail-tag. Por defecto, Contact Form 7 usa el mail-tag [_site_admin_email] que hace referencia a la dirección de correo del administrador principal del sitio. Cuando una persona llena el formulario de contacto, CF7 toma los datos para enviarlos y si sustituirá dinámicamente esta etiqueta por el mail correspondiente. Es necesario poner una dirección de correo electrónico que contenga tu dominio para que todo funcione adecuadamente.
From: Aquí puedes poner el orígen del mail, así se mostrará en tu bandeja de entrada. El plugin usa el mail-tag [_site_title] el cual sustituirá por el nombre del sitio; este mail-tag es opcional.
Subject: El asunto del correo. Así aparecerá en tu bandeja de entrada. Por defecto este Contact Form 7 usa el tag [your-subject] que hace referencia a un campo que existe en el formulario.
Additional headers: Información adicional para cada correo que se envíe.
Message body: Esta es la parte más importante de esta pestaña. En este apartado se va a definir el mensaje del correo. Aquí se puede combinar text, código html y mail-tags. Lo más importante es poner las mail-tags que corresponden a la información que queremos recaudar de nuestros usuarios; aunque también podemos poner otro tipo de datos como el título de la web, la url etc. Esto es útil en caso de que vayamos a recibir información de varias webs.
Desde la pestaña messages podremos editar los mensajes que el plugin le muestra al usuario, como el de error que vimos al hacer la prueba. Aquí basta con cambiar los textos y dar click en el botón guardar.
Si los mensajes en esta pestaña aparecen en inglés, es debido a la configuración de idioma de tu cuenta. Para cambiar el idioma de los mensajes es necesario ir al menú usuarios y en el submenú perfil cambiar la opción de idioma a Español. Cabe mencionar que los mensajes de los formularios que creaste antes de este cambio no se modificarán. Para tener un formulario con los mensajes en Español tendrás que crear uno nuevo.
Aunque CF7 no nos permite usar etiquetas HTML en los mensajes, sí nos da la posibilidad de usar mail tags. Por ejemplo podemos personalizar el mensaje de agradecimiento poniendo el nombre que el usuario nos acaba de proporcionar, así como su correo electrónico. Lo podemos hacer de la siguiente manera:
Al enviar su información satisfactoriamente, el usuario verá el mensaje de esta manera:
La última pestaña nos permite agregar snippets o pequeñas partes de código para personalizar el comportamiento de CF7.
Por defecto Contact form 7 soporta los siguientes snippets adicionales:
Modo subscribers-only ( subscribers_only. true ) .- Esta opción te permitirá asegurarte que solo usuarios que tengan una sesión activa puedan enviar el formulario en cuestión. Si esta opción está activa los usuarios que no hayan iniciado sesión podrán ver el formulario pero si intentan enviarlo verán un mensaje informando que necesitan iniciar sesión.
Modo demo ( demo_mode: on ) .- Si especificas esta opción, el formulario pasará a estar en modo demo. En este modo de configuración, el plugin omitirá el proceso de envío de correo y sólo mostrará el mensaje de envío satisfactorio. Esta opción es útil si estás trabajando en la configuración del formulario y deseas hacer pruebas sin recibir todos estos mails con información de prueba.
Opción skipping mial ( skip_mail: on ) .- Esta opción funciona prácticamente igual que demo_mode. La principal diferencia es que además de evitar el envío de correo; el modo demo también omite otras funciones como la de guardar la información en la base de datos con el plugin Flamingo. Adicionalmente tenemos la posibilidad de agregar opciones para complementar el comportamiento del add on Flamingo, pero este es un tema que trataremos en otro artículo acerca de cómo guardar la información de Contact Form 7 en la base de datos.
Opción Acceptance as validation ( acceance_as_validation: on ) .- Por defecto, un checkbox de aceptación se comporta distinto a otros campos; un checkbox de este tipo no envía un mensaje de error incluso si el checkbox no ha sido marcado. Si se proporciona esta opción, los checkboxes de aceptación se comportarán igual que los demás campos.
Aunque en un principio configurar Contact Form 7 puede parecer una tarea abrumadora debido a la gran cantidad de opciones; al final resulta fácil si se conocen algunos conceptos centrales en los que se basa este plugin. Siempre será necesario e incluso recomendable experimentar y revisar este artículo y la documentación de manera constante con el fin de dominar CF7 y sacarle todo el provecho posible. Usar una u otra opción dependiendo de las necesidades del proyecto en el que se quiera implementar.
Además de todas estas opciones, el plugin viene también con una cantidad razonable de hooks. Podemos usar también estos hooks si se requiere hacer aplicar alguna funcionalidad que no se incluya por defecto. En este punto cabe mencionar también que hay una buena cantidad de add ons o plugins adicionales que nos pueden ayudar. Un ejemplo es Flamingo, que nos permite guardar la información de los usuarios en la base de datos de nuestra instalación de WordPress. Flamingo se acopla al 100% a CF7 ya que ambos fueron programados por el mismo autor.
Como podemos ver, configurar Contact Form 7 es una tarea fácil. CF7 es un plugin muy completo y flexible. La única desventaja es que se necesitan algunos conocimientos básicos de html para poder aprovechar todas las funcionalidades que tiene. En otros artículos ahondaremos más en las funcionalidades de CF7, así como en los add-ons que también nos permiten hacer cosas muy interesantes.
