Re: Marketo Form styling issues

JoshKessel · ‎11-13-2023

I am having issues with the text colors and the one box not being white. I am not sure where in the "edit CSS" I need to update this. I need the "First Name"/"Last Name"/etc. Field labels to be white as well as the one box to match the rest. I am not sure why "Country" and the next field are correct and the rest are not. In the preview mode it shows them all correctly but on the website it looks like below.

SanfordWhiteman · ‎11-13-2023

You'd have to link to your page. It's not possible to debug a screenshot!

JoshKessel · ‎11-13-2023

I appreciate the feedback and am still figuring out what I am doing.

Here is the link to the form on the website:
https://www.telarus.com/tcp-1/

Here is a link to the Marketo form itself.

https://app-ab55.marketo.com/m#FOE1222-DET

michellechopin · ‎11-13-2023

@JoshKessel Have you edited the CSS on the Marketo form itself? If not, you can do that from the field settings on the right side of the editor:

You will see a rich text editor pop up and you can adjust the colors as you would anywhere else in Marketo - either on the color palette or in the HTML of the box.

We have to do the same on our forms as some are placed on dark backgrounds and the default text color doesn't show.

Hope that helps?

Michelle 😊

JoshKessel · ‎11-13-2023

Thank you, Michelle!

That fixed the color of the field titles!!

Now, I need to get that phone field not to be blue, which has been a day-long headache. Lol

Thanks again; that worked like a charm.

michellechopin · ‎11-13-2023

@JoshKessel Happy to help!

Marketo forms do allow some custom CSS to be applied so you might want to check there in case something was added (more likely if you have cloned a pre-existing form). You can see those settings/options under Form Settings > Form Theme and then click the cogwheel in the top right - you can see any custom CSS by clicking the option in the menu:

It's a very empty box, with only instructional text, if there's nothing custom in there. If yours is blank, perhaps the styling for those fields is controlled by some CSS on your website (we do this for our website). I can't see the page you linked as it's password protected otherwise I'd take a look at the code to see if I could point anything out (although, full disclaimer, I stumble my way through that stuff as a complete novice!).

Hopefully the headache gets a resolution soon 🤞

Michelle

SanfordWhiteman · ‎11-13-2023

Using the Rich Text editor to change label colors isn’t very sustainable and we don’t recommend it. Rather, you should use a shared CSS file for all styles like this. Otherwise it’s very easy to forget a label or an entire form.

@JoshKessel your URLs are password protected. The 2nd one is a Marketo app link which will never be accessible to us.

Dave_Roberts · ‎11-20-2023

@JoshKessel It looks like I get a 404 message when I try to view the page you've linked here with the form on it. If you could please post an updated link that's publicly available, I'd be happy to put together a few lines of CSS that you can add to the Custom CSS on the form which should help you to accomplish what you're after here.

In terms of a solution, you'll generally need to "over-style" (or override) the Marketo form styling from the forms2.css file which gets added to the end of the <head> element when the form loads on the page. Because this is appended to the <head> of your document, it'll override any stylesheets you've already got in the <head> unfortunately unless those rules are written with similar selectors and the "!important" flag. Adding the CSS to the Custom CSS on the form itself in the Marketo interface moves those styles instead into a <style> tag just inside the <form> element on the page (which means they load after/below the forms2.css stylesheet) and will give you a little more flexibility on each form.

Overall, I try to avoid using this "local" approach to form styling (using the Custom CSS feature on the form, or styling the label colors as Sanford mentioned) b/c it's a one-and-done solution for "this form only". There are times when this approach is appropriate, but generally I think it's easier to maintain and all-around better to compose a Marketo Forms stylesheet to add to the template which styles all forms in a similar fashion so that you don't have to copy/paste styles from one form to another as you create more, or worse when you rebrand, you won't have to crawl back thru each form and make changes to a bunch of different Custom CSS rules which may, or may not, be the same as each other -- this usually ends up being a can of worms. My preferred solution here would be to create a global stylesheet for ALL forms that lives on the template and then use the Custom CSS on the Marketo Form as a band-aid or "one-off" solution, only when you really need it for something specific that cannot be generalized to all the forms.