Cómo Cambiar el Color de Fondo del Campo de Correo Electrónico

El diseño de su formulario juega un papel importante en qué tan profesional y confiable se ve su tienda.

Un cambio simple como actualizar el color de fondo de un Campo de Correo Electrónico puede ayudar a:

• Coincidir con la identidad de su marca
• Mejorar la legibilidad
• Crear una mejor jerarquía visual
• Hacer que sus formularios de contacto se vean más modernos y pulidos

Antes de empezar

Asegúrese de contar con lo siguiente:

• Una página creada en GemPages
• An elemento Campo de Correo Electrónico agregado a su formulario
• Acceso al editor de GemPages

No se requieren conocimientos avanzados de programación.

Paso 1: Seleccione el Elemento Campo de Correo Electrónico

Abra su página en el editor de GemPages. Haga clic en el elemento Campo de Correo Electrónico que desea personalizar. Esto garantiza que el estilo personalizado solo se aplique al campo seleccionado.

Paso 2: Abra el Panel de Código Personalizado

Haga clic derecho en el elemento Campo de Correo Electrónico seleccionado. Luego elija: Código personalizado. El panel de Código Personalizado aparecerá.

Paso 3: Añada el código CSS

Pegue el siguiente código en el editor de Código Personalizado:

ElementClass input {

  background-color: xxxxx !important;

}

Notas Importantes

1. Debe reemplazar ElementClass con el nombre de clase real de su elemento Campo de Correo Electrónico.

Puede encontrar este nombre de clase en la esquina superior izquierda del panel de Código Personalizado.

Ejemplo:

.gf-input-123 input {

  background-color: #f5f5f5 !important;

}

2. Reemplace xxxxx con el color que desea utilizar.

Ejemplo:

background-color: #000000 !important;

o

background-color: #f5f5f5 !important;

Cómo Encontrar un Código de Color:

Si aún no tiene un código de color, puede usar herramientas gratuitas como:

• Google Color Picker
• HTML Color Picker
• Coolors
• Adobe Color

Estas herramientas le permiten elegir colores visualmente y copiar códigos HEX al instante.

Ejemplos de códigos HEX:

• #ffffff → Blanco
• #000000 → Negro
• # f3f3f3 → Gris claro
• #1a73e8 → Azul

Resultado: