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.

---

CUSTOM CSS TO REPLACE:

#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;
}

/* NEW FOOTER STYLING */
.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%

5 Submit

Please Share Your Feedback

How Can We Improve This Article?

Name

Email

Submit