Con más de un millón de instalaciones activas, Contact Form 7 es, con mucho, uno de los complementos de WordPress más populares de la historia. Su popularidad probablemente tiene mucho que ver con la verdad detrás de su descripción: «Simple pero flexible».
Contact Form 7 le permite crear múltiples formularios de contacto utilizando nada más que un simple marcado HTML (que genera para usted). Una vez creado, cada formulario se puede implementar rápidamente colocando su código abreviado correspondiente donde desea que aparezca el formulario; en la página, publicación o área de widgets. Los mensajes enviados a través de los formularios se envían a la dirección de correo electrónico proporcionada en la configuración del complemento y el spam se combate mediante el soporte para CAPTCHA y Akismet .
El Formulario de contacto 7 es tan simple que parece que literalmente cualquiera puede usarlo de manera efectiva. El estilo también pretende ser simple. Pero quizás demasiado simple para algunos. De forma predeterminada, el complemento Contact Form 7 no aplica estilo a sus formularios. Cualquier estilo que tengan es el resultado de los estilos predeterminados presentes en la hoja de estilo de un tema de WordPress.
Por lo general, resulta en algo bastante básico, como esto:
Desafortunadamente, este tipo de formulario, si bien es simple y flexible, puede no estar tan bien diseñado como los demás elementos del sitio web. Dejando a muchos usuarios felices buscando alternativas al Formulario de contacto 7 con más opciones de estilo. Sin embargo, afortunadamente, con solo un poco de CSS, no se necesita una alternativa de complemento.
En la publicación de hoy, voy a compartir una serie de consejos que abrirán una amplia variedad de posibilidades de estilo de Contact Form 7 para cualquier persona, utilizando cualquier tema.
Suscríbete a nuestro canal de Youtube
Dónde editar su formulario de contacto 7 CSS (y por qué)
Es importante que al agregar CSS personalizado no lo agregue a la hoja de estilo de Contact Form 7 o su tema principal. Cualquier cambio o adición que realice allí se sobrescribirá tan pronto como se actualice el tema y/o el complemento.
En su lugar, querrá agregar el CSS a continuación al CSS de su tema hijo . También puede usar la función de CSS personalizado en Jetpack , o si su tema proporciona una sección en su panel de administración para CSS personalizado, también puede usarla.
Bien, ahora que sabemos dónde colocar los estilos que veremos a continuación, ¡comencemos!
Cómo crear estilos de formulario para todo el sitio
Comencemos por hacer algunas modificaciones generales que se aplicarán a todo el formulario. Podemos hacer esto usando el selector de clases .wpcf7 y luego agregando estilos debajo de él.
(También me gustaría recomendar encarecidamente que coloque el encabezado comentado que he escrito a continuación dentro de su hoja de estilo para indicar dónde comienzan los estilos de su Formulario de contacto 7).
|
01
02
03
04
05
06
07
08
09
10
|
/* Contact Form 7 Styles---------------------------------*/.wpcf7 {background-color: #F0F0F0;border: 5px solid #666666;} |
Después de agregar el código anterior a su hoja de estilo, cada formulario que cree con Contact Form 7 tendrá los estilos de fondo y borde que acaba de definir. A continuación se muestra un ejemplo.
Como puede ver, hay algunos problemas de espacio. Para solucionar esto, deberá ajustar los márgenes entre el borde y los elementos del formulario interno. Puedes hacer esto con el siguiente código.
|
01
02
03
04
05
06
07
|
.wpcf7-form {margin-left: 25px;margin-right: 25px;margin-top: 25px; |
En mi sitio de prueba, esto resultó en lo siguiente:
Nota: estos estilos pueden afectar sus formularios de formas ligeramente diferentes debido al hecho de que lo más probable es que estemos trabajando con diferentes temas. Eso no significa que este código no funcione para usted, solo que es posible que tenga que modificar un poco los números para que las cosas funcionen correctamente para su sitio.
Cómo crear estilos de campo de formulario para todo el sitio
Una de las solicitudes más comunes que tienen las personas cuando se trata de diseñar el Formulario de contacto 7 es cómo pueden ajustar el ancho de los campos. Particularmente el área de mensajes que no se extiende muy lejos.
El siguiente código extenderá el área del mensaje al ancho deseado (cuando se ajuste). Establecí el mío en el ejemplo para el 95%, ya que eso es lo que se veía mejor en mi caso de uso imaginado. También puede configurarlo para que se adapte a sus necesidades, utilizando un porcentaje o un recuento fijo de píxeles.
|
01
02
03
04
05
|
.wpcf7-textarea {width: 85%;} |
También puede ajustar el ancho de los otros campos ajustando el selector de clase de entrada .
|
01
02
03
04
05
|
.wpcf7 input {width: 50%;} |
Si no desea ajustar todos sus campos de entrada con los mismos criterios, puede profundizar un poco seleccionando solo aquellos que le interesan. En el ejemplo a continuación, opté por cambiar mis campos de texto para que mi botón de envío tampoco se ve afectado.
|
01
02
03
|
.wpcf7-text {width: 50%;} |
Después de todos los cambios anteriores, pude diseñar el formulario que ves a continuación.
Personalmente, no quería cambiar el color de mi botón, pero creo que probablemente sea otro deseo común. Entonces, si desea modificar el color de su botón, puede usar el CSS a continuación para experimentar.
|
01
02
03
04
05
06
07
|
.wpcf7-submit {background: #555555;color: #ffffff;} |
Con estos bits de CSS en su lugar, cada formulario creado con el Formulario de contacto 7 se verá como la imagen final de arriba. Pero, ¿qué sucede cuando desea que una forma en particular se vea diferente de todas las demás?
Cómo diseñar un formulario específico
Obtener el ID de CSS específico requerido para realizar ediciones de estilo en un formulario específico puede ser un poco molesto, pero es posible con algunos retoques.
Lo primero que querrá hacer es agregar el código abreviado del formulario en su sitio y obtener una vista previa. (Notará que dentro de ese código abreviado hay un número para la identificación, pero en realidad no es la identificación completa que necesitará).
Luego, utilizando la función de elemento de inspección de Google Chrome o algo similar en otro navegador, eche un vistazo al código del formulario. Al usar esto, encontrará la identificación del formulario completo.
En mi caso, el número de identificación en mi shortcode era 4407 . El ID completo resultó ser wpcf7-f4407-p4405-o1 . Lo que significaba que podía hacer más ediciones, solo en ese formulario específico, usando el código a continuación con varios criterios que diferían de la configuración de todo mi sitio.
|
01
02
03
04
|
#wpcf7-f4407-p4405-o1 {background-color: #333333;border: 5px solid #0074A2;} |
Cómo diseñar campos específicos
Puede hacer lo mismo con campos específicos. En lugar de rastrear una clase o ID de CSS específica en su navegador, todo lo que tiene que hacer es agregarlo en el generador de formularios.
Cuando genere una etiqueta para colocarla en el generador de formularios, notará que hay dos opciones para crear una ID, una clase o ambas.
En este ejemplo, elegí crear una clase llamada campo personalizado . Si hace lo mismo (o algo similar), podrá diseñar solo ese campo usando su nueva identificación (o clase) como tengo a continuación.
|
01
02
03
04
05
06
07
|
#customized-field {color: #ffffff;border: 2px solid #333333;} |
De forma predeterminada, las casillas de verificación y los radios se muestran de izquierda a derecha.
Pero debido a una preferencia personal o un caso de uso específico en el que podría ser preferible mostrarlos de arriba a abajo, puede usar una de las dos opciones a continuación.
Para mostrar sus casillas de verificación o botones radiales de arriba a abajo ya la izquierda, use esto.
|
01
02
03
|
.wpcf7-list-item {display: block;} |
Para mostrar sus casillas de verificación y botones radiales de arriba a abajo y a la derecha, use esto. También asegúrese de que cuando genere la etiqueta para esta opción, elija la casilla de verificación «etiquetar primero».
|
01
02
03
04
05
06
07
|
.wpcf7-list-item {display: table-row;}.wpcf7-list-item * {display: table-cell;} |
Sugerencia adicional: cómo eliminar títulos de campo y usar texto de marcador de posición en su lugar
Este consejo no requiere el uso de CSS como los otros anteriores, sino más bien un ajuste simple al marcado utilizado en el generador de formularios Contact Form 7.
A veces no es necesario tener títulos de campo, especialmente cuando puede colocar texto de marcador de posición dentro de los propios campos que explican qué información pertenece allí.
Si ese es el caso en su sitio, entonces todo lo que tiene que hacer es eliminar los títulos en el generador de formularios y agregar texto de mantenimiento de posición como lo hice en el ejemplo a continuación.
|
01
02
03
04
05
06
07
|
<p></p><p>[email* your-email placeholder "Email Address"]</p><p></p><p>[textarea your-message placeholder "Talk to me"]</p> |
El resultado es una forma más limpia con menos desorden.
En conclusión
Espero haber mostrado en los ejemplos anteriores que el complemento Contact Form 7 es altamente personalizable. Es cierto que requiere un poco de retoques, pero para un complemento gratuito que podría esperarse.
Creo que la falta de opciones de estilo predeterminadas es una gran parte de por qué el complemento funciona tan bien para tantos. Por lo tanto, es justo que cualquiera que obtenga mucho valor de él y quiera más estilo se dedique unos minutos a incluir una versión de uno de los ejemplos de código anteriores.
¿Tiene algún consejo de estilo de Contact Form 7 propio? ¿Algún favorito que hayas usado que te gustaría compartir? ¡Déjanos una línea en los comentarios a continuación!
Miniatura del artículo a través de Dmitry Lemon5ky // shutterstock.com