[Cómo] Cambiar el color del texto del marcador de posición del formulario de contacto 7

¿Sabía que el Formulario de contacto 7 le permite cambiar el color del texto del marcador de posición?

Si alguna vez ha utilizado el Formulario de contacto 7, es posible que haya notado que tiene un color de texto de marcador de posición predeterminado. Puede personalizar el texto del marcador de posición utilizando las opciones integradas de Contact Form 7, ¡o incluso personalizarlo con CSS!

Este artículo mostrará cómo cambiar el color del texto del marcador de posición del formulario de contacto 7 y proporcionará ejemplos de código para ambos métodos.

Hemos descubierto que muchos clientes en nuestro foro de soporte tienen problemas para configurar o cambiar el color de fuente del texto del marcador de posición del formulario de contacto 7.

El formulario de contacto 7 es uno de los complementos de WordPress más populares en la actualidad, lo que le permite crear formularios de contacto básicos o complejos en su sitio de WordPress. Ya hemos escrito cómo corregir errores en el envío de mensajes del Formulario de contacto 7.

Le mostraremos cómo personalizar el color del texto con código personalizado: si no está familiarizado con la codificación pero necesita un complemento de creación de formularios más simple y fácil de usar, pruebe WPForms.

CSS para texto de marcador de posición CF7

::-webkit-input-placeholder { /* WebKit browsers */
    color: #000 !important;
    opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000 !important;
    opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #000 !important;
    opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #000 !important;
    opacity: 1;
}

Utilice la etiqueta! Important

La etiqueta "! Important" se utiliza para garantizar que no se apliquen otros estilos a estos selectores CSS. Esto asegura que el estilo funcione. Si desea que el estilo se use solo en los campos del formulario de contacto 7, puede usar esto:

.wpcf7 :: - webkit-input-placeholder {/ * Navegadores WebKit * / color: # 000! important; opacidad: 1; }

Si necesita exponer un formulario de contacto específico en su sitio sin alterar otros formularios de contacto 7, busque el identificador del formulario de la siguiente manera:

Haga clic con el botón derecho en el elemento en cuestión y seleccione Inspeccionar elemento. Accesos directos: F11 (Windows) o CMD + MAYÚS + C (MAC) Busque el ID y reemplace 'wpcf_id' con él en este código:

#wpcf_id :: placeholder {color: # 000! important; opacidad: 1; }

¡No dude en dejar un comentario o hacer una pregunta a continuación!

Sobre la autora

Escrito por: David AtardSitio web: https://www.linkedin.com/in/dattard/Correo electrónico: David@collectiveray.com

David ha trabajado en la industria digital y en línea durante los últimos 21 años. Tiene una amplia experiencia en las industrias de software y diseño web utilizando WordPress, Joomla y los nichos que los rodean. Ha trabajado con agencias de desarrollo de software, empresas de software internacionales, agencias de marketing locales y ahora es Jefe de Operaciones de Marketing en Aphex Media, una agencia de SEO. Como consultor digital, su objetivo es ayudar a las empresas a obtener una ventaja competitiva utilizando una combinación de su sitio web y las plataformas digitales disponibles en la actualidad. Su combinación de experiencia en tecnología combinada con una sólida visión para los negocios aporta una ventaja competitiva a sus escritos.