Estilizar Formularios de Contacto en WordPress
Tabla de contenidos
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.
HTML para CF7
*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>CSS Completo
/* - 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;
}
Estilo CSS para Bordes
dotted- Defines a dotted borderdashed- Defines a dashed bordersolid- Defines a solid borderdouble- Defines a double bordergroove- Defines a 3D grooved border. The effect depends on the border-color valueridge- Defines a 3D ridged border. The effect depends on the border-color valueinset- Defines a 3D inset border. The effect depends on the border-color valueoutset- Defines a 3D outset border. The effect depends on the border-color valuenone- Defines no borderhidden- Defines a hidden border
Estilos extra
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:
HTML para CF7
*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>CSS Completo
/* - 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;
}
Estilo CSS para Bordes
dotted- Defines a dotted borderdashed- Defines a dashed bordersolid- Defines a solid borderdouble- Defines a double bordergroove- Defines a 3D grooved border. The effect depends on the border-color valueridge- Defines a 3D ridged border. The effect depends on the border-color valueinset- Defines a 3D inset border. The effect depends on the border-color valueoutset- Defines a 3D outset border. The effect depends on the border-color valuenone- Defines no borderhidden- Defines a hidden border
Estilos extra
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
HTML para CF7
*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>CSS Completo
/* - 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;
}
Estilo CSS para Bordes
dotted- Defines a dotted borderdashed- Defines a dashed bordersolid- Defines a solid borderdouble- Defines a double bordergroove- Defines a 3D grooved border. The effect depends on the border-color valueridge- Defines a 3D ridged border. The effect depends on the border-color valueinset- Defines a 3D inset border. The effect depends on the border-color valueoutset- Defines a 3D outset border. The effect depends on the border-color valuenone- Defines no borderhidden- Defines a hidden border
Estilos extra
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!
HTML para CF7
*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>CSS Completo
/* - 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;
}
Estilo CSS para Bordes
dotted- Defines a dotted borderdashed- Defines a dashed bordersolid- Defines a solid borderdouble- Defines a double bordergroove- Defines a 3D grooved border. The effect depends on the border-color valueridge- Defines a 3D ridged border. The effect depends on the border-color valueinset- Defines a 3D inset border. The effect depends on the border-color valueoutset- Defines a 3D outset border. The effect depends on the border-color valuenone- Defines no borderhidden- Defines a hidden border
Estilizar más cosas
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.
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!
