How to Fix White or Invisible Text on Your Form

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?
• Change the body font color settings on your page
• Use custom code to change only the text color of your form

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:

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

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.

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!