Tech Resources
< All Topics

Fix Text Color Visibility Issues on Forms

Resolve Text Color Visibility Issues on Forms

Here’s how to fix text color visibility problems on forms by adjusting CSS within your website’s settings:

Access and Edit Funnel Page:

  1. Navigate to the website’s funnel section.
  2. Select the specific funnel you are troubleshooting.
  3. Click “Edit” on the funnel page to access settings.

Adjust CSS:

4. Locate the custom CSS section within the page settings.

5. If you find the CSS limited (e.g., only 15 lines), copy CSS below which has more extensive code (~71 lines).

6. Paste the copied CSS over the existing CSS in the funnel being edited.

Update and Verify:

7. Save the changes and publish the updated funnel.

8. Refresh the funnel page to view changes.

9. Test the form by clicking through each question to ensure all text is visible and legible.

Apply Changes to Other Forms:

10. Repeat these steps for any other pages with forms to maintain consistency across the site.


#section-RhjdlNEwc .c-row>.inner .c-column {
    padding-left: 0;
    padding-right: 0;

@media screen and (max-width: 767px) {
    #section-RhjdlNEwc .c-row {
        padding-left: 0 !important;
        padding-right: 0 !important;

    #section-RhjdlNEwc .c-row>.inner .c-column>.inner {
        padding: 25px !important;

.ghl-footer {
    background: transparent !important;
    position: relative !important;
    padding: 2px 0 0 !important;
    box-shadow: 0 0 0px !important;

.ghl-next-button {
    width: 150px !important;
    background-color: {{ custom_values.color__main_brand
}} !important;

.ghl-next-button .right-pointing-triangle:after {
content: "Next" !important;

.hl_form-builder--main {
margin-top: 0px !important;
padding: 0px 0px !important;

/* Regular Text*/
#_builder-form p, li, .text-element, .short-label {
color: {{custom_values.color__main_text
}} !important;  /* Replace #desiredTextColor with your desired text color */
    background-color: transparent !important;
	padding:0px 0px 0px 0px; !important;

#_builder-form .signature-button {
background-color: #FFFFFF !important;

/* Bold Text*/
#_builder-form strong {
color: {{custom_values.color__main_brand
}} !important;

.form-builder--item label {
color: {{custom_values.color__main_text
}} !important;

.ghl-footer-next, .ghl-footer-back, .ghl-submit-btn {
background-color: {{custom_values.color__main_brand
}} !important;
border-radius: 5px !important;

.ghl-footer-buttons {
padding: 20px !important;
Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
Please Share Your Feedback
How Can We Improve This Article?
Go to Top