Seleccionar página

Estilizar Formularios de Contacto en WordPress

Estilizar Formularios de Contacto en WordPress

Muy buenas Gente! Os traigo un nuevo capítulo del curso de maquetación y diseño web Gratuíto, donde ésta vez os dejaré un recurso para diseñar 4 tipos distintos de formularios para vuestra web.

Además, con códigos CSS para que podáis añadir vuestro toque favorito y IMPORTANTE, cumpliendo con la LEY de España de adquisición de datos y además protegiendo de SPAM gracias a ReCaptcha de Google.

Sin más, os dejo a continuación los códigos para cada uno de los estilos de formularios de ésta clase del curso:

1. Formulario en línea ó barra lateral sin imagen

Para éste tipo de formulario discreto y en línea para que ocupe poco contenido en vuestra web, pero posible de personalizar, tanto para situarlo en mitad del contenido de vuestra web como para el espacio de la barra lateral.

*VER EL VÍDEO DE YOUTUBE ABAJO PARA ENTENDER COMO AÑADIR LOS CAMPOS CON CONTACT FORM 7

<div class="formulariolinea">
<p style="font-size:18px; font-weight:700;">¡Suscríbete Aqui!<p>
<label> **AÑADIR TEXTO** </label>
<label> **AÑADIR EMAIL** </label> 
<label>[submit "Enviar"] </label>
<span>**AÑADIR ACEPTACION** + He leído y acepto la <a href="https://tuweb.com/politica-de-privacidad/">Política de Privacidad</a> </span>
</div>
/* - Formulario Linea 1 - */
 .formulariolinea{
     background:#ecffef;
     text-align:center;
     border-radius:20px;
     box-shadow: 0 3px 0.7rem 1px #C1BCC1;
     padding:1rem;
     margin-bottom: 2rem;
 }
 .formulariolinea .wpcf7-submit {
     padding-top:12px;
     padding-bottom:12px;
     background: #b5e4bc;
     border: 1px solid #89ad8a;
     border-radius: 0px;
     margin-top: 8px;
     width:100%;
     font-size:15px;
     text-transform:uppercase;
     font-weight:700;
 }
 .formulariolinea label{
     width:90%;
 }
 .formulariolinea span{
     width:100%;
 }
 .formulariolinea .wpcf7-submit:hover{
     background:black;
     border: 1px solid black;
     color:white;
 }
 .formulariolinea p{
     margin:0px;
 }
 .formulariolinea img{
     text-align:center!important;
     max-width:210px;
 }
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

Puedes personalizar también los estilos como colores, sombras y demás como comento en el vídeo, para editar las propiedades del CSS, como por ejemplo:

border: 4px dotted black;

2. Formulario en línea con imagen

Éste formulario en línea en tu contenido podrás añadirlo con una imagen al lateral de éste para darle una personalización aún más llamativa:

*VER EL VÍDEO DE YOUTUBE ABAJO PARA ENTENDER COMO AÑADIR LOS CAMPOS CON CONTACT FORM 7

<div class="formulariolinea2">

<img src="https://www.tuweb.com/wp-content/uploads/tufoto.png"></img>

<div class="form2">
<p style="font-size:18px; font-weight:700;">¡Suscríbete Aqui!<p>
<label> **AÑADIR TEXTO** </label>
<label> **AÑADIR EMAIL** </label> 
<label>[submit "Enviar"] </label>
<span>**AÑADIR ACEPTACION** + He leído y acepto la <a href="https://tuweb.com/politica-de-privacidad/">Política de Privacidad</a> </span>
</div>
</div>
/* - Formulario Linea 2 - */
 .formulariolinea2{
     background:#ecffef;
     text-align:center;
     border-radius:20px;
     box-shadow: 0 3px 0.7rem 1px #C1BCC1;
     padding:1rem;
     margin-bottom: 2rem;
     padding-right: 2rem;
 }
 .formulariolinea2 .wpcf7-submit {
     padding-top:12px;
     padding-bottom:12px;
     background: #b5e4bc;
     border: 1px solid #89ad8a;
     border-radius: 0px;
     margin-top: 8px;
     width:100%;
     font-size:15px;
     text-transform:uppercase;
     font-weight:700;
 }
 .formulariolinea2 label{
     width:100%;
 }
 .formulariolinea2 span{
     width:100%;
     text-align: left;
 }
 .formulariolinea2 .wpcf7-submit:hover{
     background:black;
     border: 1px solid black;
     color:white;
 }
 @media (min-width: 600px){
 .formulariolinea2 {
     columns:2;
     column-gap: 0px;
 }
 }
 .formulariolinea2 img{
     text-align:center;
     max-width:220px;
 }
 .formulariolinea2 p{
     margin:0px;
 }
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

Puedes personalizar también los estilos como colores, sombras y demás como comento en el vídeo, para editar las propiedades del CSS, como por ejemplo:

border: 4px dotted black;

3. Formulario para Widget barra lateral con imágen

Para crear un formulario en tu barra lateral personalizado y con una imagen para que llame algo más la atención, te dejo a continuación el siguiente código

*VER EL VÍDEO DE YOUTUBE ABAJO PARA ENTENDER COMO AÑADIR LOS CAMPOS CON CONTACT FORM 7

<div class="formulariowidget">
<img src="https://www.tuweb.com/wp-content/uploads/tufoto.png"></img>
<p style="font-size:18px; font-weight:700;">¡Suscríbete Aqui!<p>
<label> **AÑADIR TEXTO** </label>
<label> **AÑADIR EMAIL** </label> 
<label>[submit "Enviar"] </label>
<span>**AÑADIR ACEPTACION** + He leído y acepto la <a href="https://tuweb.com/politica-de-privacidad/">Política de Privacidad</a> </span>
</div>
/* - Formulario widget - */
 .formulariowidget{
     background:#ecffef;
     text-align:center;
     border-radius:20px;
     box-shadow: 0 3px 0.7rem 1px #C1BCC1;
     padding:1rem;
     margin-bottom: 2rem;
 }
 .formulariowidget .wpcf7-submit {
     padding-top:12px;
     padding-bottom:12px;
     background: #b5e4bc;
     border: 1px solid #89ad8a;
     border-radius: 0px;
     margin-top: 8px;
     width:100%;
     font-size:15px;
     text-transform:uppercase;
     font-weight:700;
 }
 .formulariowidget label{
     width:90%;
 }
 .formulariowidget span{
     width:100%;
 }
 .formulariowidget .wpcf7-submit:hover{
     background:black;
     border: 1px solid black;
     color:white;
 }
 .formulariowidget p{
     margin:0px;
 }
 .formulariowidget img{
     text-align:center!important;
     max-width:210px;
 }
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

Puedes personalizar también los estilos como colores, sombras y demás como comento en el vídeo, para editar las propiedades del CSS, como por ejemplo:

border: 4px dotted black;

4. Formulario de contacto genérico para mensajes

Para que nuestros formularios genéricos, tengan algo más de gracia y salero, podemos personalizarlos de ésta manera para que tengan algo de colorido y estilo!

*VER EL VÍDEO DE YOUTUBE ABAJO PARA ENTENDER COMO AÑADIR LOS CAMPOS CON CONTACT FORM 7

<div class="formulariogenerico">
<p style="font-size:18px; font-weight:700;">Contacta con nosotros aquí<p>
<label> **AÑADIR TEXTO** </label>
<label> **AÑADIR EMAIL** </label>
<label> **AÑADIR CAMPO TEXTO** </label>
<label>[submit "Enviar"] </label>
<span>**AÑADIR ACEPTACION** + He leído y acepto la <a href="https://tuweb.com/politica-de-privacidad/">Política de Privacidad</a> </span>
</div>
/* - Formulario Generico - */
 .formulariogenerico{
     background:#ecffef;
     text-align:center;
     border-radius:20px;
     box-shadow: 0 3px 0.7rem 1px #C1BCC1;
     padding:1rem;
     margin-bottom: 2rem;
 }
 .formulariogenerico .wpcf7-submit {
     padding-top:12px;
     padding-bottom:12px;
     background: #b5e4bc;
     border: 1px solid #89ad8a;
     border-radius: 0px;
     margin-top: 0px;
     width:100%;
     font-size:15px;
     text-transform:uppercase;
     font-weight:700;
     width:100%;
 }
 .formulariogenerico label{
     width:80%;
     margin-bottom:10px;
 }
 .formulariogenerico span{
     width:100%;
 }
 .formulariogenerico .wpcf7-submit:hover{
     background:black;
     border: 1px solid black;
     color:white;
 }
 .formulariogenerico p{
     margin:0px;
 }
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

Mira el vídeo para ver como se editan los colores, efectos y demás incluídos en el CSS, como por ejemplo:

border: 4px dotted black;

Cómo cumplir la ley de privacidad en nuestros formularios de contacto

Para cumplir con la LOPD (Ley Oficial de Protección de Datos) Vigente en 2021, debemos de añadir en cada formulario en el que acepten haber leído la política de privacidad donde se indique la recogida y tratamiento de datos según lo establece la ley.

Para ello es necesario añadir en cada formulario la opción de “acceptance” o Aceptación tal y como se muestra en los ejemplos anteriores, donde debéis crear el texto “He leído y acepto la Política de Privacidad” incluyendo un enlace hacia vuestra página de dichas políticas.

Formulario inline cumpliendo la LOPD

Cómo evitar SPAM y configurar ReCaptcha V3

Para añadir la opción para que Google verifique si quien nos quiere contactar es un humano y no un bot, debemos de instalar la propiedad Recaptcha, en éste caso configuraremos la versión V3.

Podéis registraros y empezar a configurar vuestras propiedades de Recaptcha en la siguiente web:

https://www.google.com/recaptcha/admin

Debéis iniciar sesión con vuestra cuenta de Google y dar de alta una nueva propiedad como os muestro en el vídeo que os dejo a continuación, ¡Al lío señores!

Sobre el Autor

FernanTEC

💻Apasionado del mundo tecnológico así como de la ingeniería y en general, de todo tipo de herramientas y/o gadgets que nos faciliten la vida. Intento transmitir de manera práctica cómo poder sacarle provecho! espero que te sirva de ayuda! 😉

Deja una respuesta

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

PROMOCIÓN FERNANTEC

APROVECHA ÉSTA OFERTA CON SERED:
🚀 2 MESES GRATIS 🚀
Código de DESCUENTO: FernanTEC
CLICK EN LA OFERTA:

sered oferta 2 meses gratis

O UN 10% ANUAL
🚀10% DESCUENTO🚀
Código de DESCUENTO: AnualTEC
CLICK EN LA OFERTA:

sered oferta DESCUENTO ANUAL

TEMAS WORDPRESS

orbital theme oferta orbital theme oferta