Skip to main content
White or “invisible” text happens when a user enters information on a Form and their text is not visible. This is typically caused by the Form text color matching the background color. You can fix this by adjusting font color settings or using custom code.

​
Identify white or invisible text

You can confirm the text is white or invisible by highlighting the Form text field with your cursor after typing:

​
Change body font color settings

Fix the white or invisible text on your Form by changing your page’s body font color.

​
Change page font color settings

  1. Navigate to the Website tab from your Dashboard.
  2. Click Pages.
  3. Select the Website or Landing tab to locate your page.
  4. Select the title of your page to open the page editor.
  5. Select the Settings tab from the page editor.
  6. Select Style Guide.
  7. Locate the Fonts Colors section.
  8. Select the Body Font Color changer.
  9. Select a color other than White.
  10. Click Save:
Note: If you are using the Premier template, the setting in your page editor is called Typography and the color setting you need to change is called Font Color.

​
Use custom code to change Form text color

Important: Introducing custom code to your site can open you up to vulnerabilities and potential malware attacks. We recommend using vulnerability tools like VirusTotal or Snyk to scan any custom code that you intend to use and apply certain best practices to help reduce potential impact.
You can fix the white or invisible text on your Form by adding custom code to your Encore template pages.
  1. Navigate to the Website tab from your Dashboard.
  2. Click Pages.
  3. Select the Website or Landing tab to locate your page.
  4. Select the title of your page to open the page editor.
  5. Select the Settings tab from the page editor.
  6. Select Custom Code.
  7. Locate the CSS Code text box.
  8. Copy and paste the code snippet below in the CSS Code text box.
  9. Click Save:
.form-control {
color: #000000;
}
input#form_submission_name.form-control {
color: #000000;
}
input#form_submission_email.form-control {
color: #000000;
}
#000000 is the hex code for the color black. You can use a tool like Coolors to generate hex codes for other colors. Replace #000000 in the code snippet with your own hex codes.
Note: If you are using the Premier template, this option requires you to have code editor access to add the code snippet to the overrides.scss file located in your Assets directory. Learn how to access the code editor for more information.