# Contact form 7: validación color borde campo

**URL:** <https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755>\
**Category:** Plugins\
**Created:** [15 Abril, 2021 20:44 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755 "2021-04-15T20:44:45Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![mparraud](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/mparraud/32/3233_2.png) [@mparraud](https://foro.wpargentina.org/u/mparraud)\
**Post date:** [15 Abril, 2021 20:44 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/1 "2021-04-15T20:44:45Z")

</div>

Estoy armando un formulario y me piden que para los campos requeridos, si no los llenan, y envian, el borde de esos campos se ponga rojo.

Bueno, lo hice con CSS

```
.wpcf7-form {
	.wpcf7-not-valid{ border-color: red !important; }
	}

```

Lo que pasa es que, para los campos que son del tipo `select` no me lo toma y no entiendo por qué!

¿Alguna idea?

---

<div class="post-metadata">

**Author:** ![Mariano\_Genco](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/mariano_genco/32/1988_2.png) [@Mariano\_Genco](https://foro.wpargentina.org/u/Mariano_Genco)\
**Post date:** [16 Abril, 2021 16:48 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/2 "2021-04-16T16:48:11Z")

</div>

> [@mparraud](#):
>
> ```auto
> .wpcf7-form {
> .wpcf7-not-valid{ border-color: red !important; }
> }
> 
> ```

El codigo que presentas esta mal. Deberia ser:

.wpcf7-form .wpcf7-not-valid{ border-color: red !important; }

Podrías pasar el link donde se encuentra el formulario? Así puedo inspeccionar y ver las clases. Saludos!

---

<div class="post-metadata">

**Author:** ![mparraud](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/mparraud/32/3233_2.png) [@mparraud](https://foro.wpargentina.org/u/mparraud)\
**Post date:** [16 Abril, 2021 20:14 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/3 "2021-04-16T20:14:07Z")

</div>

Mariano, tenes razon, copie mal el codigo

Aca esta un formulario:

[https://defensadelpublico.gob.ar/formulario-consejo-asesor-test/](https://defensadelpublico.gob.ar/formulario-consejo-asesor-test/)

si lo mandas sin llenar ningun campo, vas a ver qeu te marca todos en rojo menos el de select. Y, si miras el código, figura como not valid. Algo está pisándolo.

Gracias!!

---

<div class="post-metadata">

**Author:** ![wayramarketing](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/wayramarketing/32/2030_2.png) [@wayramarketing](https://foro.wpargentina.org/u/wayramarketing)\
**Post date:** [16 Abril, 2021 23:22 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/4 "2021-04-16T23:22:45Z")

</div>

Hola, la clase que le pone borde al select está en un elemento padre. No se si vas a poder seleccionarlo desde CSS, quizás tenes que usar JS.

El borde está en “form .styled-select:before”

Espero te oriente un poco.  
Saludos!

---

<div class="post-metadata">

**Author:** ![Mariano\_Genco](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/mariano_genco/32/1988_2.png) [@Mariano\_Genco](https://foro.wpargentina.org/u/Mariano_Genco)\
**Post date:** [18 Abril, 2021 05:35 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/5 "2021-04-18T05:35:37Z")

</div>

```
.wpcf7-form-control .wpcf7-select .wpcf7-validates-as-required .wpcf7-not-valid{
border-color: #ff1952 !important;
}

```

Fíjate si te toma este.

Colócalo en Apariencia → Personalizar → CSS ( En el caso que sea un template que te deje. No se cual estas usando)

---

<div class="post-metadata">

**Author:** ![mparraud](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/mparraud/32/3233_2.png) [@mparraud](https://foro.wpargentina.org/u/mparraud)\
**Post date:** [19 Abril, 2021 10:26 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/6 "2021-04-19T10:26:52Z")

</div>

mm… nop, no anda. creo que va por donde dice wayramarketing, pero me supera.

gracias!

---

<div class="post-metadata">

**Author:** ![mparraud](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/mparraud/32/3233_2.png) [@mparraud](https://foro.wpargentina.org/u/mparraud)\
**Post date:** [19 Abril, 2021 10:47 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/7 "2021-04-19T10:47:50Z")

</div>

Gracias wayramarketing ¿Conoces a alguien que sepa de JS como para hacerlo?

---

<div class="post-metadata">

**Author:** ![wayramarketing](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/wayramarketing/32/2030_2.png) [@wayramarketing](https://foro.wpargentina.org/u/wayramarketing)\
**Post date:** [20 Abril, 2021 01:01 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/8 "2021-04-20T01:01:03Z")

</div>

Hola, podés probar con este código:

(() =\> {  
let style = `  
.border-error:before {  
border: 2px solid red !important;  
}  
`;

```
document.head.insertAdjacentHTML("beforeend", style);

document.addEventListener( 'wpcf7invalid', () => {
    setTimeout(() => {
        const $selects = document.querySelectorAll('.styled-select');
         $selects.forEach( el => {
             if( el.querySelector(".wpcf7-not-valid") ) {
                 el.classList.add('border-error');
             }
         })
    }, 200 )

}, false );

```

})();

Avisame cualquier duda.

Saludos!

Juan Manuel  
Wayra Digital

---

<div class="post-metadata">

**Author:** ![mparraud](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/mparraud/32/3233_2.png) [@mparraud](https://foro.wpargentina.org/u/mparraud)\
**Post date:** [20 Abril, 2021 10:06 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/9 "2021-04-20T10:06:04Z")

</div>

Juan Manuel, gracias por tu ayuda, intenté probar ese código insertándolo desde el inspector de Chrome, pero intuyo que estoy haciendo algo mal.

 ![image](https://foro.wpargentina.org/uploads/default/original/2X/7/7ca19551c6f95dde5e0f387a43938b47c2177324.jpeg)

---

<div class="post-metadata">

**Author:** ![Mariano\_Genco](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/mariano_genco/32/1988_2.png) [@Mariano\_Genco](https://foro.wpargentina.org/u/Mariano_Genco)\
**Post date:** [20 Abril, 2021 14:07 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/10 "2021-04-20T14:07:15Z")

</div>

Agregaste el código con codesnippet?(el de Wayra)

---

<div class="post-metadata">

**Author:** ![mparraud](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/mparraud/32/3233_2.png) [@mparraud](https://foro.wpargentina.org/u/mparraud)\
**Post date:** [20 Abril, 2021 17:16 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/11 "2021-04-20T17:16:26Z")

</div>

no, lo hice directo en chrome como muestro en la imagen

---

<div class="post-metadata">

**Author:** ![wayramarketing](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/wayramarketing/32/2030_2.png) [@wayramarketing](https://foro.wpargentina.org/u/wayramarketing)\
**Post date:** [20 Abril, 2021 22:36 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/12 "2021-04-20T22:36:53Z")

</div>

Hola, para probarlo en el navegador podés ir a las herramientas de desarrollador de Chrome de la página en cuestión, presionar Ctrl + Shift + P y escribir “Create new Snippet”, luego pegas el código ahí y apretas el play que aparece abajo a la derecha.  
Una vez hecho eso envías el formulario y debería marcar el error. Así lo probé yo y funcionó.

Luego para agregarlo en el sitio deberías usar algún plugin que te permite agregar javascript, como por ejemplo:

> **[Insert Headers and Footers](https://es.wordpress.org/plugins/insert-headers-and-footers/)**
>
> Este plugin te permite añadir scripts al header y footer de tu blog directamente en los archivos wp\_head y wp\_footer de tu instalación WordPress.

Avisame si tenés alguna duda.

Saludos!

Juan Manuel

---

<div class="post-metadata">

**Author:** ![Lucas\_Bonomo](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/lucas_bonomo/32/1765_2.png) [@Lucas\_Bonomo](https://foro.wpargentina.org/u/Lucas_Bonomo)\
**Post date:** [21 Abril, 2021 13:01 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/13 "2021-04-21T13:01:45Z")

</div>

Hola Miguel, a ver si te sirve. Yo probé pegando directamente un bloque de HTML en el post (solo para probar).

```
<style>
input[type="email"].wpcf7-not-valid, 
input[type="text"].wpcf7-not-valid {
	border: 3px red solid;
	background-color: #ffc0cb3b;
}
</style>

```

 ![Screenshot_2021-04-21 Editar la página Wigou — WordPress](https://foro.wpargentina.org/uploads/default/original/2X/9/9583991f93e75811aaf9173034484bcbf454678b.png)

Podes ver el formulario andando en:  
[https://iiwsob7dw.lucasbonomo.com/formulario/](https://iiwsob7dw.lucasbonomo.com/formulario/)

---

<div class="post-metadata">

**Author:** ![mparraud](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/mparraud/32/3233_2.png) [@mparraud](https://foro.wpargentina.org/u/mparraud)\
**Post date:** [22 Abril, 2021 19:35 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/14 "2021-04-22T19:35:31Z")

</div>

Claro, funcionar en un contact form 7 funciona bien. El tema acá es que es una web desarrollada por otra persona y con un theme a medida, y no me toma el css

---

<div class="post-metadata">

**Author:** ![mparraud](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/mparraud/32/3233_2.png) [@mparraud](https://foro.wpargentina.org/u/mparraud)\
**Post date:** [22 Abril, 2021 19:36 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/15 "2021-04-22T19:36:00Z")

</div>

Oh, Juan Manuel, gracias. Lo pruebo mañana y te cuento.

---

<div class="post-metadata">

**Author:** ![mparraud](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/mparraud/32/3233_2.png) [@mparraud](https://foro.wpargentina.org/u/mparraud)\
**Post date:** [21 Marzo, 2022 19:13 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/16 "2022-03-21T19:13:06Z")

</div>

> [@Lucas\_Bonomo](#):
>
> ```auto
> input[type="email"].wpcf7-not-valid, 
> input[type="text"].wpcf7-not-valid {
> border: 3px red solid;
> background-color: #ffc0cb3b;
> }
> 
> ```

el tipo de campo con el que tengo problema es Select (que puede ser un menu desplegable)

---

<div class="post-metadata">

**Author:** ![mparraud](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/mparraud/32/3233_2.png) [@mparraud](https://foro.wpargentina.org/u/mparraud)\
**Post date:** [22 Marzo, 2022 11:10 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/17 "2022-03-22T11:10:33Z")

</div>

no se si lo pegué mal o que, pero a mi no me funcionó.

Este es el código que pegué:

```auto
(() => {
let style = `
.border-error:before {
border: 2px solid red !important;
}
`;

document.head.insertAdjacentHTML("beforeend", style);

document.addEventListener( 'wpcf7invalid', () => {
    setTimeout(() => {
        const $selects = document.querySelectorAll('.styled-select');
         $selects.forEach( el => {
             if( el.querySelector(".wpcf7-not-valid") ) {
                 el.classList.add('border-error');
             }
         })
    }, 200 )

}, false );

})();

```

---

<div class="post-metadata">

**Author:** ![Lucas\_Bonomo](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/lucas_bonomo/32/1765_2.png) [@Lucas\_Bonomo](https://foro.wpargentina.org/u/Lucas_Bonomo)\
**Post date:** [22 Marzo, 2022 14:20 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/18 "2022-03-22T14:20:57Z")

</div>

Hola @mparraud, tenes una URL para pasarnos?

---

<div class="post-metadata">

**Author:** ![mparraud](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/mparraud/32/3233_2.png) [@mparraud](https://foro.wpargentina.org/u/mparraud)\
**Post date:** [24 Marzo, 2022 00:04 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/19 "2022-03-24T00:04:54Z")

</div>

[https://defensadelpublico.gob.ar/reclamos-contenidos-de-medios/](https://defensadelpublico.gob.ar/reclamos-contenidos-de-medios/)

---

<div class="post-metadata">

**Author:** ![Ojosdenebulosa](https://foro.wpargentina.org/user_avatar/foro.wpargentina.org/ojosdenebulosa/32/2521_2.png) [@Ojosdenebulosa](https://foro.wpargentina.org/u/Ojosdenebulosa)\
**Post date:** [24 Marzo, 2022 19:33 UTC](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755/20 "2022-03-24T19:33:48Z")

</div>

Es que el problema acá es que no te está acutalizando el campo con la clase “wpcf7-not-valid” entonces no podes afectar el campo con un color específico para cuando esa situación se sucede. La cuestión de como resolver esto es que conocimiento tenés para implementar y los accesos con los que contas

[Página siguiente](https://foro.wpargentina.org/t/contact-form-7-validacion-color-borde-campo/3755.md?page=2)