Cómo cambiar el color de las cajas en contact form 7 en que se ponen los datos personales  

Hola

Puedes probar con el siguiente código CSS

.wpcf7-form input[type="text"],
.wpcf7-form textarea{
	background-color:yellow;
  color:blue;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form textarea:focus{
	background-color:red;
  color:white;
}

Puedes cambiar los colores de acuerdo a lo que deseas, puedes agregar este código al final de algún archivo CSS por ejemplo del archivo style.css de tu theme.

Saludos.

Hola Jhon,

Gracias por tu respuesta, pero debo informarte que no ha dado resultado. Lo he probado en styles.css del plugin contact form 7, en el mismo archivo, pero de mi tema hijo (Epik), también lo he probado en el archivo css del propio plugin de woocommerce y hasta del genesis, pero en ninguno de los casos ha sido posible obtener alguna variación.

Tienes alguna sugerencia?. Muchas gracias.

Saludos.

Hola,

En el caso del contact form 7 no es necesario aplicar los estilos sobre un fichero particular. El propio plugin tiene una opción para agregar el código que te envió Jhon en los ajustes adicionales.

Verifica si agregando el código en este apartado y coméntanos si te ha funcionado.

Hola Jhonny,

Muchas gracias por tu respuesta, pero además, por parecer algo muy sencillo. Hubiera sido maravilloso si me hubiera funcionado, pero siento decirte que no se observan cambios al realizar lo que me sugieres.

No entiendo el por qué no funciona, ya que la verdad, si todos los cambios CSS del contact form 7 se pueden realizar de esta manera es bastante fácil.

Me puedes decir el por qué es posible que no me funcione?. Mi tema es el Epik de Genesis. Por otro lado, tengo la duda de si algún plugin puede ocasionar este tipo de incidencia, como lo es por ejemplo, el Jetpack, aunque lo he desactivado y continúa todo igual.

Quedo a la espera de vuestra respuesta. Gracias.

Saludos.

Hola,

Actualmente tienes tu web en mantenimiento, por lo que no podemos analizar los estilos CSS que se están aplicando al formulario.

Tendrías que volver a publicar la web para que lo podamos revisar.

Perdona Pablo, ahora ya he activado de nuevo la página. Gracias.

Saludos.

Hola

He probado el código en esta url en donde aparece un formulario, y si que funciona, ver imagen
Contenido solo visible a usuarios registrados

Veo que has agregado un nuevo campo de mail, puedes complementar agregando esto al código, quedaría:

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea{
	background-color:yellow;
	color:blue;
}
 
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus{
	background-color:red;
  	color:white;
}

Ubica este archivo
/wp-content/themes/epik/style.css

Y agrega el código anterior al final, refresca tu navegador o limpia la cache para ver los cambios

Saludos.

Hola Jhon,

Ahora ya he logrado que se generen las variaciones, sin embargo, hay dos detalles: por un lado, que para poder ver efectivos los cambios, requiero refrescar el navegador y si lo hago desde una nueva ventana de incognito, en lugar de tener que refrescar, debo cerrar la pestaña o navegador como incognito y volver a abrir y escribir de nuevo la url. De esta forma sí que se observan los cambios. Es esto un poco raro, no os parece?.
Por otro lado, lo que aún no se cambia, es el color de fondo que se queda en las cajas de la información después de escribirse la misma, es decir, cuando escribo Guillermo, el fondo se queda en amarillo. Necesito cambiar ese color que se queda. Cómo puedo arreglarlo?. Muchas gracias por vuestra ayuda.

Saludos.

Hola

El código que te envíe tienes colores de yellow y red que debes cambiar, actualmente ya veo que has cambiado los colores correctamente.
Contenido solo visible a usuarios registrados

Entiendo que ya solucionaste tu problema.

Con respecto al tema de la cache, siempre que estes trabajando con cambios CSS tendrás que limpiar la cache, ya que de otro modo no verás los cambios inmediatamente, puedes configurar un navegador de desarrollo y configurarlo para que elimine la cache periódicamente o usar algún tipo de complemento de navegador, si vas a seguir haciendo cambios también te recomiendo usar : Google Chrome Canary o Firefox Developer Edition como navegadores.

Saludos.

Hola Jhon,

Muchas gracias por la respuesta y valiosa ayuda. Al final creo, que lo dejaré como está, ya que continúa quedándose en color amarillo después de cumplimentarse la información solicitada. Creo que sería necesario añadir otro código en el mismo fichero styles.css del theme, pero no sé cuál sería. De todas maneras, muchas gracias.

Un saludo.

Hola

He realizado una prueba de envío de datos y no veo cuadros amarillos, debe ser algo nuevamente de la cache de tu navegador, te sugiero usar un navegador como Firefox, limpia la cache de ser necesario.

Lo que creo que debes destacar es que el usuario acepte los terminos y condiciones, ya que no se nota mucho, si tienes dudas adicionales sobre esto último que te comento, abre un nuevo hilo de discusión con el título adecuado, de esta manera mantenemos orden en el foro.

Saludos.