Los formularios de contacto son sumamente importantes para las páginas web. Es un canal de comunicación con nuestros clientes y una forma de recabar información y datos de los mismos.
Hay muchos complementos para WordPress especializados en la creación de formularios. Sin embargo, si utilizas el Tema Divi (nuestro tema favorito para WordPress), dispones ya (sin instalar nada adicional) de un módulo muy completo para agregar formularios de contacto.
Hoy veremos cómo configurarlo correctamente, todos los tipos de campos que se pueden crear: campos de texto, de textos largos, selectores despegables, casillas de verificación, Botones de Radio, etc.
Además, como bonus extra, un súper truco para agregar una función que el formulario de contacto de Divi, no tiene por defecto: Cómo mandar con el formulario, la URL desde dónde se está enviando el mensaje.
El Tema Divi
De más está decir que somos Divilovers y para realizar éste tutorial necesitas un sitio web WordPress con el tema Divi instalado.
Si deseas empezar a trabajar con éste potente tema en tus proyectos web, o si ya lo tienes instalado pero sin licencia, nuestros amigos de Rapihosting (Unos excelentes proveedores de Hosting para WordPress por cierto) nos ofrecen su servicio de instalación y activación de licencias oficiales para tu sitio.
Al tener una licencia activa podrás tener acceso a: Actualizaciones automáticas del tema y todas las funciones completas desbloqueadas. Todo por un súper bajo precio. Dale un vistazo desde aquí.
Cómo Crear y configurar formularios de contacto en Divi
Agregar uno es tan fácil como añadir el módulo formulario de contacto. Y ya tendremos uno básico en nuestro constructor visual.
Por el momento sólo tendrá tres campos: Name, Email y Message, pero puede ofrecer mucho más. Ni bien ingresamos a la configuración del módulo, podemos ver los ítems de cada uno de los campos y al final un símbolo de “+” para añadir nuevos campos. Vamos a añadir uno para ver sus opciones.
Configurando el nuevo campo del formulario
Lo primero que se nos pide es crear un nombre identificador para el campo. Esto es importante, ya que es el nombre con el cuál llamaremos más adelante a los datos guardados en este campo. Ya que es un identificador, es recomendable no utilizar caracteres extraños para no confundirse.
Por otro lado, el título, es el nombre con el que se verá el campo.
Más abajo, en la siguiente pestaña llamada “Opciones de Campo”, podemos elegir el tipo de campo. El que viene por defecto es el de campo de entrada. Éste tipo de campo se utiliza para ingresar texto corto. Entre las opciones que permite se encuentran: definir una longitud mínima y máxima y seleccionar que tipos de símbolos se pueden incluir.
El campo de correo electrónico es lo mismo, pero especial para ingresar emails. Y el área de texto, se utiliza para que el usuario pueda ingresar textos más grandes. Cabe mencionar que éste campo permite el uso de saltos de línea. Los siguientes tres tipos de campos son para especificar opciones múltiples.
Campos de opciones múltiples en el formulario de contacto de Divi
Los últimos tres tipos de campos son de opciones múltiples. La configuración de los tres es similar. Al momento de crear un campo y asignarle alguno de los tres tipos, nos aparecerán casilleros para asignar cada una de las opciones elegibles. Cada casillero puede moverse, duplicarse, eliminarse y ser enlazado. Para el ejemplo voy a agregar las opciones: opción 1, Opción 2 y Opción 3.
Lo que diferencia a los tres tipos de campos de opción múltiple es la presentación:
La casilla de verificación: Nos permite seleccionar las opciones mediante checks, se caracteriza porque se pueden elegir varias opciones a la vez.
Botones de Radio: Similar al anterior, pero sólo puede elegirse una de las opciones.
Seleccionar Despegable: Nos muestra las opciones en una pestaña despegable como dice su nombre. También sólo puede elegirse una opción a la vez.
Mensaje de éxito y Botón del Formulario de Contacto
En la pestaña de texto podemos configurar un título para el formulario, aunque personalmente yo prefiero agregarle títulos con el módulo texto.
Además, podemos agregar un mensaje que aparecerá una vez que el formulario haya sido enviado. Podemos utilizar mensajes como: “Tu mensaje ha sido enviado con éxito” o “Gracias por contactarnos”.
También nos da la opción de cambiar el texto que aparecerá en el botón de enviar.
IMPORTANTE, Configuraciones de correo
Ésta parte es sumamente importante, definirá a dónde se enviará el mensaje del formulario y qué datos se enviarán.
El buzón a dónde llegará el mensaje podemos definirlo en la casilla de “dirección de correo electrónico”, yo prefiero utilizar el correo corporativo de mi web, pero puede usarse cualquiera.
Más abajo en la sección “patrón del mensaje” debemos llamar al contenido de cada uno de los campos para que sean enviados. Es muy frecuente el envío de correos erróneos por una incorrecta configuración de ésta sección. Para ver cómo debe ser la estructura correcta a utilizar, puedes hacer click al símbolo de “?” que te dará las pautas correctas.
Para llamar a los datos de algún campo, debemos escribir su identificador entre porcentajes dobles. Por ejemplo, el identificador del primer campo por defecto era: Name, así que llamaremos a los datos escritos en él con un: %%Name%%
Yo suelo escribir un título descriptivo antes del dato, para saber qué campo estoy viendo. Por ejemplo: Nombre: %%Name%%
De ésta manera, podemos llenar los datos de todos los campos. Utilizando sólo los campos por defecto, se vería así:
Redirección y protección antispam
Hay casos en los que querrás redirigir a tus usuarios a determinado sitio, luego de que haya enviado el formulario. Para lograr esto deberás activar la opción de la pestaña redirigir y simplemente ingresar la url a dónde quieres que redirija.
Por otro lado, Divi trae por defecto una protección astispam básica que recomiendo encarecidamente activar, para evitar recibir correos de bots. Si deseas una solución de captcha más compleja, también tienes la opción de sincronizarlo con el servicio de recaptcha de Google. Si tienes una cuenta, claro.
BONUS: Truco para saber desde qué URL se envía el formulario de Divi
Ésta es una función que poseen otros plugins de formulario de contacto, pero Divi no lo trae de manera nativa. Sin embargo, podemos implementarlo de una manera sencilla con éste truco. Si tienes varios formularios de contacto en tu sitio web, te va a venir de maravilla el poder rastrear desde qué url se envía el mensaje. Y cuáles utilizan más tus usuarios.
PASO 1:
Lo primero que haremos será crear un nuevo campo para que se almacene los datos de la url. Ya vimos al inicio del post cómo agregar campos. Le pondremos de identificador y de título: link.
PASO 2:
Agregar el módulo código y copiar y pegar en él, el siguiente fragmento de código:
Para que puedan visualizar el snippet de éste tutorial, solo dejen su correo en el formulario de abajo y hagan click al botón: “Ver códigos”.
Y automáticamente serán visibles…
Adicionalmente, se te enviará a tu bandeja de entrada un mail de confirmación para ser añadido a mi lista de correos. Es opcional, pero déjame decirte que con la comunidad de mi lista comparto nuevos trucos, códigos, tutoriales, promociones y sorteos de productos de mi Tienda de elementos y layouts para Divi. Además que tenemos una comunicación más directa para compartir y resolver dudas. 🙂
Gracias por solicitar suscribirte, pero aún falta un paso…
IMPORTANTE – ¡Aún no estás suscrito a mi lista!
Revisa tu bandeja de entrada, se te ha enviado un correo de confirmación. Confirma tu correo para ser parte de la comunidad de mi lista y compartirte nuevos tutoriales, artículos, códigos, recursos, promociones y comunicarnos directamente 🙂
Pdta: Ya puedes ver los códigos del tutorial debajo de éste mensaje
<script>
(function( $ ) {
$(document).ready(function(){
var URLactual = window.location;
document.querySelector('p[data-id="link"] input').setAttribute('value', URLactual);
});
})( jQuery );
</script>
<style>
p[data-id="link"] {
margin-bottom:0px;
height:0px;
}
p[data-id="link"] input {
visibility:hidden;
height:0px;
}
</style>
Una vez que pegues el código en tu módulo, te quedará de la siguiente manera:
PASO 3:
Regresando al formulario, debemos agregar el campo link al patrón del mensaje para que la url sea enviada junto con el formulario. Recordemos que el identificador del campo que creamos también era “link”, así que para agregar su dato, debemos escribir %%link%%
¿Cómo me llegará el mensaje del formulario de Contacto de Divi?
Probemos, voy a rellenar los datos de un formulario de ejemplo. Completamos el captcha y le daré a enviar. Si configuraste todo bien, debería aparecer el mensaje de éxito que aprendimos a configurar al inicio del post.
Ahora, al revisar la bandeja de entrada, me llega de ésta forma:
Como pueden ver, aparecen todos los datos ingresados al formulario, perfectamente ordenados y la URL desde dónde se envió el mensaje. Genial, cierto.
Tengo más tutoriales así de interesantes, dale un vistazo más abajo.
Nos vemos (¿leemos?) en el próximo post.
Hola Victor! Gracias por el tutorial.
¿Puede ser qué código agregado sobre cargue un poco más al servidor del hosting o ralentice algún proceso de envío del formulario?
Gracias.
Hola amigo Marcelo, No, simplemente añadimos un campo más al formulario con javascript a nivel de usuario, por lo demás el envío a nivel de servidor no se ve afectado.