How to Fix White or Invisible Text on Your Form

Updated

Learn to fix text that appears white or invisible on your Form.

In this article:

What does white or invisible text on a Form look like?

White or "invisible" text is when a user enters their information on a page form and their text is not visible.

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

Change the body font color settings on your page

You can fix the white or invisible text on your form by changing your page's body font color.

To change your page's font color settings:

  • Navigate to the Website tab from your Dashboard.
  • Click Pages.
  • Select the Website or Landing tab to locate your page.
  • Select the title of your page to open the page editor.
  • Select the Settings tab from the page editor.                   
  • Select Style Guide.
  • Locate the Fonts Colors section.
  • Select the Body Font Color changer.
  • Select a color other than White.
  • Click Save:

Note:
If you are using the Premier template, the setting in your page editor will be called Typography and the color setting you will need to change will be called Font Color.

Use custom code to change only the text color of your form

Warning:
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.

To add custom code to your Encore template page to change only the text color of your form:

  • Navigate to the Website tab from your Dashboard.
  • Click Pages.
  • Select the Website or Landing tab to locate your page.
  • Select the title of your page to open the page editor.
  • Select the Settings tab from the page editor
  • Select Custom Code.
  • Locate the CSS Code text box.
  • Copy and paste the code snippet below in the CSS Code text box.
  • Click Save:

Code Snippet:

.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. Just be sure to replace #000000 in the code snippet with your own hex codes.

Note:
If you are using the Premier template, this option will require you to have code editor access in order to add the code snippet to the overrides.scss file located in your Assets directory. See how to access the code editor for more information.

And that’s how you can fix white or invisible text on a Form! Please vote below and let us know if you found this article helpful. We value your feedback. Thanks for being the best part of Kajabi!

Did you find this article helpful?