Avisos
Vaciar todo

[Resuelto] CSS CONTACT FORM 7 - UN FORMULARIO EN ESPECIFICO  

 
Lucas
 Lucas
Usuario activo

Hola,

 

Necesito dar estilo al primer formulario que hay en el post, ¿sabéis cómo podría hacerlo? Me interesa background-color y padding

 

https://nave8.com/los-espectaculos-mas-buscados-en-google-2023/  

Captura

 

Contenido solo visible a usuarios registrados

Respondido : 19/01/2024 11:27 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Lucas.

Revisa si es esto lo que buscas:

div#wpcf7-f10916-p10892-o1 {
background-color: aqua;
color: #fefefe;
padding: 0 10px 0 10px;
}
#wpcf7-f10916-p10892-o1 label {
color:#fefefe;
}

 

Tendrás que modificar colores y padding para adaptarlo a lo que buscas.

Tienes una tabla de colores en este enlace:

-> https://htmlcolorcodes.com/es/tabla-de-colores/

 

Un Saludo

Respondido : 19/01/2024 11:49 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Lucas
 Lucas
Usuario activo

vale! Sí eso me ha valido. 

 

 

Lo que me gustaría es que el formulario apareciese en el final del post, acabo de incluirlo el de abajo y veo que no coge el estilo del de arriba ya que cambia la numeración #wpcf7-f10916-p10892-o2.

 

Sabrías decirme que puedo hacer para que tengan el mismo estilo.  Veo que en Contactform me deja meter campos. También te adjunto un par de imagenes que cada form me deja poner por si pudiese ayudar.

Captura1
Captura2

 

Respondido : 19/01/2024 12:18 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Lucas.

Solo tendrias que cambiar el ID del formulario " #wpcf7-f10916-p10892-o2 "

Cada formulario tiene un ID y si quieres modificar solo uno de los formularios podemos utilizar ese ID para tener configuraciones personalizadas en cada uno.

div#wpcf7-f10916-p10892-o2 {
background-color: aqua;
color: #fefefe;
padding: 0 10px 0 10px;
}

div#wpcf7-f10916-p10892-o2 label {
color:#fefefe;
}

 

Un saludo

Respondido : 19/01/2024 12:26 pm

Lucas
 Lucas
Usuario activo

@pepesoler ok . Pero podrian tener de alguna manera todos los formularios (que monto en el blog) el mismo id para no tener que ir incluyéndolo?

Respondido : 19/01/2024 12:31 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Lucas.

Puedes crear una clase y utilizarlas en CSS.

Tenemos el siguiente ShortCode que es el que carga el formulario ( Es un ejemplo )

[contact-form-7 id="92b281m" title="titulo formulario"] 

A ese ShortCode le podemos añadir una clase por ejemplo blog :

[contact-form-7 id="92b281m" title="titulo formulario" html_class="blog"] 

Ya tenemos nuestra clase blog creada que podremos utilizar para los estilos de este formulario:

.wpcf7-form .blog {
background-color:azure;
}

 

Tiens también plugin para poder dar estilos al formulario:

-> https://wordpress.org/plugins/customizer-block-cf7/

-> https://wordpress.org/plugins/cf7-styler/

 

Un saludo

Respondido : 19/01/2024 2:14 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Lucas
 Lucas
Usuario activo

ok! muchas gracias por la ayuda!

Respondido : 22/01/2024 10:47 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Lucas.

Nada, gracias a ti 😀 

Cualquier consulta que tengas no dudes en comunicarlo.

 

Un saludo

Respondido : 22/01/2024 10:54 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación