Hi guys,
I’m looking to see if there’s a way to dynamically change font colours on forms, but I can’t seem to find much.
The issue I’m having is that the forms we are using are embedded across various pages on our site using a shortcode, but the visibility of the form fields varies depending on the background color of the page. Some pages have a dark background while others have a light one.
The form’s text color is currently white, which is perfectly visible on pages with dark backgrounds. However, the white text becomes invisible on pages with lighter backgrounds, making the form unusable on those pages.
So, I’m looking for a way to dynamically adjust the form text color based on the background color of the page. Ideally, I would like the form text to be black on lighter backgrounds and white on darker ones.
I’ve considered using CSS to change the form text color, but I’m unsure how to make this change dynamic based on the page background color. I’m also aware that since the forms are loaded asynchronously from HubSpot, applying CSS might not always work.
Does anyone have any guidance on whether this is achievable- or is the only option cloning the form and having light/dark versions? I would greatly appreciate any help or advice here 