> ## Documentation Index
> Fetch the complete documentation index at: https://help.kajabi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Corrige el texto blanco o invisible en tu Formulario

> Resuelve el texto blanco o invisible en un Formulario ajustando la configuración de color de fuente.

El texto blanco o "invisible" ocurre cuando un usuario ingresa información en un Formulario y su texto no es visible. Esto suele deberse a que el color del texto del Formulario coincide con el color de fondo. Puedes solucionarlo ajustando la configuración de color de fuente o usando código personalizado.

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/15wr884ql7" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

## Identifica el texto blanco o invisible

Puedes confirmar que el texto es blanco o invisible resaltando el campo de texto del Formulario con el cursor después de escribir:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/io5jizq7k1" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

## Cambia la configuración de color de fuente del cuerpo

Corrige el texto blanco o invisible en tu Formulario cambiando el color de fuente del cuerpo de tu página.

### Cambia la configuración de color de fuente de la página

1. Ve a la pestaña **Website** desde tu Panel de control.
2. Haz clic en **Pages**.
3. Selecciona la pestaña **Website or Landing** para ubicar tu página.
4. Selecciona el título de tu página para abrir el editor de páginas.
5. Selecciona la pestaña **Settings** del editor de páginas.
6. Selecciona **Style Guide**.
7. Ubica la sección **Fonts Colors**.
8. Selecciona el selector de **Body Font Color**.
9. Elige un color distinto de blanco.
10. Haz clic en **Save**:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/u9mabugb4p" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

<Note>
  **Nota:**
  Si usas la [plantilla Premier](../../website/pages/customizing-your-website-with-the-legacy-template-premier), la configuración en tu editor de páginas se llama **Typography** y la opción de color que debes cambiar se llama **Font Color**.
</Note>

## Usa código personalizado para cambiar el color del texto del Formulario

<Warning>
  **Importante:**
  Introducir código personalizado en tu sitio puede exponerte a vulnerabilidades y posibles ataques de malware. Recomendamos usar herramientas de análisis de vulnerabilidades como [VirusTotal](https://www.virustotal.com/gui/home/url) o [Snyk](https://snyk.io/) para escanear cualquier código personalizado que planees usar y aplicar ciertas [mejores prácticas](../../website/domains/code-based-customizations) para ayudar a reducir el impacto potencial.
</Warning>

Puedes corregir el texto blanco o invisible en tu Formulario agregando código personalizado a las páginas de tu plantilla Encore.

1. Ve a la pestaña **Website** desde tu Panel de control.
2. Haz clic en **Pages**.
3. Selecciona la pestaña **Website or Landing** para ubicar tu página.
4. Selecciona el título de tu página para abrir el editor de páginas.
5. Selecciona la pestaña **Settings** del editor de páginas.
6. Selecciona **Custom Code**.
7. Ubica el cuadro de texto **CSS Code**.
8. Copia y pega el siguiente fragmento de código en el cuadro de texto **CSS Code**.
9. Haz clic en **Save**:

```css theme={null}
.form-control {
color: #000000;
}
input#form_submission_name.form-control {
color: #000000;
}
input#form_submission_email.form-control {
color: #000000;
}
```

`#000000` es el código hexadecimal para el color negro. Puedes usar una herramienta como [Coolors](https://coolors.co/) para generar códigos hexadecimales de otros colores. Reemplaza `#000000` en el fragmento de código con tus propios códigos hexadecimales.

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/r5csg17r4d" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

<Note>
  **Nota:**
  Si usas la [plantilla Premier](../../website/pages/customizing-your-website-with-the-legacy-template-premier), esta opción requiere que tengas acceso al editor de código para agregar el fragmento al archivo overrides.scss ubicado en tu directorio Assets. [Aprende a acceder al editor de código](../../website/pages/how-to-access-the-code-editor) para más información.
</Note>