Etiqueta: plugin Página 1 de 4

El plugin Contact Form 7 tiene un fichero de CSS para dar estilos mínimos al formulario pero estos no siempre concuerdan con la estética de nuestra Web. Sigue los pasos de este artículo para que puedas aplicar tus propias líneas de CSS y hacer que tu formulario luzca perfecto.

Desgranando el HTML

Lo primero que tendrás que hacer es entender el HTML que genera este plugin con sus correspondientes clases, para que luego puedas atacarlas desde tu tema hijo o bien desde el personalizador.

El formulario básico

A modo de ejemplo voy a transcribir parte de la estructura de HTML que general el Contact Form 7 y sus respectivas clases:

<form class="wpcf7-form"> <!-- (1) -->
    <p><!-- (2) -->
        <label> Tu nombre (obligatorio)<br><!-- (3) -->
            <span class="wpcf7-form-control-wrap your-name"><!-- (4) -->
                <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required"><!-- (5) -->
            </span>
        </label>
    </p>
    <p>
        <input type="submit" value="Enviar" class="wpcf7-form-control wpcf7-submit"><!-- (6) -->
    </p>
</form>

Como podrás ver, agregué un par de comentarios en el HTML para explicar cada uno de los puntos:

1. Puedes ver que todo el formulario está agrupado bajo el elemento <form> con la clase .wpcf7-form la cual te servirá para atacar los estilos en forma general.
   Por ejemplo, podrías asignarle el atributo display: grid para cambiar la estructura general del mismo.
2. Cada campo y hasta el botón de enviar se encierran automáticamente con un elemento <p>. Poco más que agregar aquí.
3. Los campos que damos de alta en el Administrador de WordPress (a excepción del botón enviar) se encierran dentro de la etiqueta label.
4. A su vez, cada campo se encierra en un span con algunas clases que nos facilitarán su selección para aplicar estilos. Las clases que se agregan son:
   • wpcf7-form-control-wrap: clase genérica para representar cualquier campo.
   • [campo name del input]: agrega también una clase dinámica con el mismo nombre del atributo name del input. En el ejemplo, agrega la clase your-name.
5. Ahora sí ya estás en el input mismo, donde CF7 agrega una serie de clases en forma automática, a saber:
   • wpcf7-form-control: clase genérica para todos los campos.
   • wpcf7-text: clase con el tipo de campo configurado en el Administrador de WordPress (más adelante te mostraré las clases de los otros tipos de campos).
   • wpcf7-validates-as-required: CF7 agregará esta clase en caso de que el campo sea obligatorio.

Las clases para cada tipo de campo de Contact Form 7

• Campo de texto => wpcf7-text
• Campo de email => wpcf7-email
• Campo de URL => wpcf7-url
• Campo de teléfono => wpcf7-tel
• Campo numérico => wpcf7-num
• Campo fecha => wpcf7-date
• Campo de textarea => wpcf7-textarea
• Campo desplegable => wpcf7-select
• Campo de verificación => wpcf7-checkbox
• Botones de selección => wpcf7-radio
• Campo de aceptación => wpcf7-acceptance
• Campo de archivo => wpcf7-file

Mensajes

Tanto como si el formulario se envía correcta o incorrectamente, el plugin genera un mensaje con una estructura de HTML definida y algunas clases que podrás utilizar para modificar su estilo.

Mensaje de éxito

<!-- mensaje de éxito -->
<form class="wpcf7-form sent">
    <div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok">Gracias por tu mensaje. Ha sido enviado.</div>
</form>

Aquí puedes ver el HTML del mensaje exitoso que genera el plugin además de agregar la clase sent al formulario.

Mensaje de error

<!-- mensaje de error -->
<form class="wpcf7-form invalid">
    <div class="wpcf7-response-output wpcf7-display-none wpcf7-validation-errors">Uno o más campos tienen un error. Por favor, revísalos e inténtalo de nuevo.</div>
</form>

Al igual que el mensaje anterior, el plugin genera un HTML específico para el mensaje y también agrega la clase invalid al formulario.

Ejemplos de modificaciones

Cambios en el formulario

¿Qué tal si agregamos borde, cambiamos de color y ponemos un poco de sombra? Así quedaría el CSS final.

.wpcf7-form {
    background-color: #ffffff;
    border: 3px solid #000000;
    box-shadow: 0px 9px 21px 6px rgba(0,0,0,0.5);
    padding: 2em;
    overflow: none !important;
}

Campos con bordes animados

Ya sabes que tienes clases que afectan a todos los campos independientemente del tipo que sean. Vamos a hacer uso de esta clase para darle un toque más original al formulario.

.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-textarea {
    background-color: transparent ;
    border-bottom: 1px solid #001;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    margin-bottom: 40px;
	outline: none;
	transition: 0.4s border;
}
.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-textarea:focus,
.wpcf7-form .wpcf7-text:hover,
.wpcf7-form .wpcf7-textarea:hover {
	border: 1px dashed #001;
}

Editando el mensaje de éxito

Podemos darle al mensaje de éxito un toque más parecido a las alertas de Bootstrap. Como verás, solo basta con atacar a la clase wpcf7-mail-sent-ok que es la que se agrega al mensaje en cuanto el formulario se envía correctamente.

.wpcf7-mail-sent-ok {
    background-color: #d4edda;
    border: 2px solid #c3e6cb;
    border-radius: .55rem;
    display: block;
    color: #155724;
    font-family: roboto;
    margin-bottom: 1rem;
    padding: .75rem 1.25rem;
    position: relative;
}

Como puedes ver, la estructura de HTML puedes modificarla fácilmente desde el configurador de formularios y la estética puedes cambiarla con algunas líneas de CSS seleccionando las clases que Contact Form 7 agrega automáticamente.

Ánimo y a ajustar los colores de esos formularios 💪🏻

Ya hemos visto en el artículo anterior cómo crear nuevos formularios con Contact Form 7, pero esta configuración solamente envía correos y muestra en pantalla mensajes de éxito o error.

Pero mediante el uso de un plugin extra puedes guardar en base de datos todos los mensajes que se envíen a través de estos formularios.

¿Por qué deberías guardar los mensajes en la Base de Datos?

Te listo a continuación algunas ideas de por qué deberías implementar esta solución:

• Problemas de correo: Los servidores de correos pueden tener fallos o caídas impidiendo que los emails lleguen a su destino. Con esta solución podrías tener una copia del mensaje en tu base de datos, a pesar de que no te haya llegado ningún correo.
• Exportar información: Tal vez necesites guardar estos datos para luego exportarlos y hacer algún seguimiento o análisis específico.
• Libreta de direcciones: Tal vez necesites armar una agenda de todas las personas que te contactan para luego hacer un seguimiento (como un CRM).

Para todas estas situaciones usaremos el plugin «Flamingo» el cual se adapta a la perfección al «Contact Form 7» ya que está desarrollador por el mismo programador (Takayuki Miyoshi). Puedes descargarlo siguiendo este enlace ⬇️

No tendrás que configurar NADA

Tal como lo lees, para utilizar este plugin no tienes que hacer nada más que instalarlo.

Una vez instalado, se creará un nuevo menú llamado «Flamingo» con los siguientes submenús:

Libreta de direcciones

En esta pantalla verás solamente los datos personales de las personas que envían sus mensajes a través de los distintos formularios de tu página Web.

En caso de que una persona envíe más de un formulario, no se duplica el registro, pero sí que se actualiza la columna de «Historial», desde donde podrás acceder a cada uno de los mensajes enviados.

También tienes el botón de «Exportar» el cual te permite rápidamente descargar todos los contactos en un fichero con formato .CSV tal como se muestra a continuación. ⬇️

"Correo electrónico","Nombre completo","Nombre","Apellidos"
"jperez@gmail.com","Juan Pérez","",""
"mgelves@gmail.com","mgelves","",""
"pgonzalez@gmail.com","Pedro González","",""
"wapuu@wordpress.example","Un comentarista de WordPress","",""

Mensajes Entrantes

Desde esta pantalla podrás ver y gestionar todos los mensajes que envían los usuarios a través de tus formularios.

Estos son algunos de los puntos más importantes de esta pantalla:

1. Asunto: Por defecto Flamingo guarda el «Asunto» del formulario como título de los mensajes.
2. Canal: Esta columna indica cuál es el formulario de origen del mensaje. Si haces clic en él puedes filtrar los mensajes por formularios.
3. Exportar: Al igual que la página anterior puedes exportar los mensajes en un fichero con formato .CSV el cual tiene la siguiente estructura:

"your-name","your-email","your-subject","your-message","file-298","Fecha"
"Juan Pérez","jperez@gmail.com","2do email que envío","Este es el segundo email que envío para revisar el historial.","","2020-05-05T15:49:44+00:00"
"Juan Pérez","jperez@gmail.com","Prueba con fichero","Envío un formulario con una imagen.","600_162649732.jpeg","2020-05-05T15:25:41+00:00"
"Pedro González","pgonzalez@gmail.com","Prueba de envío","Este es el cuerpo del mensaje","","2020-05-05T15:22:43+00:00"

Cómo cambiar los campos de los mensajes entrantes

Como te contaba en el punto anterior, los campos de los mensajes entrantes se guardan a partir de los campos [your-subject], [your-name] y [your-email] que se crean por defecto cada vez das de alta un nuevo formulario.

Pero podrías cambiar estos valores para que se ajusten a los campos que hayas creado para tu proyecto. Solo tienes que ir a la pestaña de «Ajustes Adicionales» del formulario en cuestión y agregar el siguiente código pero con el ID de tus propios campos:

flamingo_email: "[email-usuario]"
flamingo_name: "[nombre-usuario]"
flamingo_subject: "[titulo-de-mensaje]"

Abro con este artículo el primero de una serie donde te estaré explicando la sencillez y robustez del plugin «Contact Form 7» para que puedas crear todo tipo de formularios y aprendas cómo manipular los datos que se envían a través de él.

Vamos a comenzar desde lo más sencillo que es cómo añadir un simple formulario a nuestra página Web.

Cómo añadir un nuevo formulario

En primer lugar tendrás que instalar y activar el plugin «Contact Form 7» en tu WordPress. Una vez instalado, sigue los siguientes pasos para agregar un nuevo formulario a tu página Web:

1. Ve a Contacto » Añadir nuevo. Un vez que se cargue la página estarás en la pestaña «formulario» donde podrás configurar los siguientes valores:

1. Título: Aquí tendrás que especificar un título para el formulario.
2. Campos disponibles: El plugin Contact Form 7 pone a tu disposición un conjunto de campos para que te sea muy simple armar tus formularios. Te detallo algunos de ello para que los conozcas:
   • Texto: Es el más simple de todos. Agrega un campo de texto donde el usuario puede escribir libremente.
   • Correo Electrónico: Este campo validará que el contenido tenga el formato correcto para un correo electrónico.
   • Fecha: Este campo despliega un calendario para que el usuario seleccione una fecha.
   • Área de texto: Es una caja de mayor tamaño para que el usuario pueda escribir texto libremente.
   • Menú desplegable: Este campo permite agregar un conjunto de valores para que el usuario elija uno o más de ellos desde un selector desplegable.
   • Aceptación: Agrega una simple casilla de verificación que debe estar marcada para poder enviar el formulario.
   • Cuestionario: Podemos agregar una pregunta simple al formulario para evitar el envío de SPAM. Ejemplo 2+2? = 4
   • Archivo: Este campo permite al usuario cargar un fichero para agregar al formulario.
   • Enviar: Es el botón que enviará el formulario con todos los campos anteriormente configurados.
3. Cuerpo del formulario: Aquí podrás modificar el HTML del formulario en caso que necesites agregar algún elemento extra o una clase de CSS. Como podrás ver, los campos se agregan con formato de shortcode.

Define todos los campos que necesites y al finalizar no olvides hacer clic en el botón «Guardar» para registrar todos los cambios.

¿Cómo se envía el formulario?

Por defecto el plugin envía el formulario al correo electrónico del Administrador del WordPress, pero por supuesto que tanto esta dirección como el contenido del email puede ser configurado desde la pestaña «Correo electrónico».

Haz clic en esta pestaña o bien utiliza las fechas del teclado (⬅️➡️) para desplazarte entre ellas.

A continuación te detallo para qué sirve cada campo:

1. Etiquetas: Cualquier campo que agregues al formulario en la pestaña «Formulario» tendrá un nombre único (ID) que luego podrás utilizar en el correo o bien en los mensajes (que veremos más adelante) que devuelvas a la Web.
   Como puedes ver, en este formulario tenemos a disposición los campos [fc-nombre], [fc-email], [fc-mensaje] y [fc-archivo].
2. Para: En este campo podrás especificar a qué dirección de correo quieres enviar el formulario. Puedes agregar más de un destinatario separándolos por coma, ejemplo: tu-email@gmail.com, otro-email@gmail.com, email-nro-3@gmail.com.
3. De: Esta campo será el remitente del correo. Para evitar que vaya a la carpeta de SPAM usa un correo con el mismo dominio que la Web desde donde se emite.
4. Asunto: Define un título para el correo. Ej. «Nuevo Contacto desde la Web mi-web.com»
5. Cabeceras adicionales: Aquí podrás agregar todas las cabeceras adicionales de correo que necesites. Por ejemplo:
   • Para agregar un email en copia (CC) usa la cabecera Cc: otro-email@gmail.com.
   • Para agregar un email en copia oculta (CCO) usa la cabecera Bcc: otro-email@gmail.com.
6. Cuerpo del mensaje: Define aquí como quieres recibir el correo electrónico con todos los campos del formulario. Como ves en el ejemplo, puedes mezclar texto con las Etiquetas vistas en el punto 1.
   En el caso que agregues etiquetas HTML, no olvides marchar la casilla de «Usar contenido del tipo HTML».
7. Archivos adjuntos: En el caso que el usuario pueda subir archivos a tu formulario podrás agregarlos como ficheros adjuntos al correo utilizando este campo. Basta simplemente con que agrueges la etiqueta del campo como ves en el ejemplo.
8. Correo electrónico (2): Ten en cuenta que todas las configuraciones anteriores son para el correo que te llegarán a ti, pero puedes activar esta casilla para enviar un segundo correo a quién desees.
   Puede usar este segundo correo para configurar una respuesta automática al usuario que te envió el formulario o bien enviar una copia con otras configuraciones a otra persona.
   Los campos que se despliegan son iguales a los que ya he detallado.

Mensajes de éxito o validación

En la pestaña «Mensajes» podremos configurar todos los tipos de mensajes que el formulario pueda devolver.

No voy a detenerme a explicar cada campo porque es muy simple de entender. Cada fila corresponde a un tipo de mensaje de éxito o error que pueda devolver el formulario.

Lo que sí voy explicarte son los valores que aquí puedes o no utilizar:

• Etiquetas HTML: No está permitido el uso de etiquetas HTML, de hecho si lo haces te aparecerá un mensaje de advertencia.
• Etiquetas de campos: Puedes utilizar las etiquetas de campos del formulario, de manera tal que podrás personalizar los mensajes con los datos introducidos, por ejempleo: Gracias [fc-nombre] por enviarnos tu mensaje.

Añade el formulario a tus páginas o entradas

Muy bien, ya tenemos el formulario configurado, ahora es momento de mostrarlo en la página Web.

Lo único que tienes que hacer es copiar el «shortcode» del formulario y pegarlo en cualquier entrada o página de tu Web utilizando el bloque «Shortcode» de Gutenberg.

Una vez que guardes los cambios, visita la entrada o página para verificar el correcto funcionamiento del formulario.