Creating Form templates with CSS

[revasie]

Hello everyone, can you create a form template with custom CSS so that when you update the CSS of the template, the rest of the forms get updated too? OR is it the same w/t the LP and email assets - changes to the template don't over-write existing and approved assets? 

Thanks in advance! 🤗

[Katja_Keesom]

A form does not really have a template like an email or a landing page. You get around that by using Global forms. In other words, you set up 1 form in Design studio and in your marketing programs you always use that 1 single form. That means the CSS styling as well as field settings can be managed in one single place rather than having to update umpty individual forms scattered across all your programs. Of course you can create multiple Global forms in Design Studio for different use cases (like a separate event form and contact us form), but the concept stays the same.

That means that only in very exceptional use cases where you need very specific fields on a form you would create one directly inside your marketing program.

[revasie]

Thanks for your answer! Didn't realise that referring to Global Forms as 'templates' is incorrect! We'll test this today, to see how changes in the CSS reflect on forms, which are part of programmes. 🦄

[SanfordWhiteman]

Note you can also have your CSS in a standard external CSS file and include that. Then updates to that file in Design Studio (or wherever you host it) reflect immediately on all forms referencing that file.

[revasie]

Good to know, thanks! 🦄

[revasie]

Hey Katja, unfortunately this didn't work for us. I set up the Global form, edited the Custom CSS. Cloned the Global form to the programme, edited the Global form, and the Cloned didn't reflect the changes 😞 

Has this happened to you?

[Dave_Roberts]

There are really two sets of styles (at least) to manage with forms in Marketo. 

The first is the form styles itself. This is a combination of the forms2.css file that Marketo automatically loads with your forms (the base styling), plus whatever "theme" you've selected in the form editor (each has it's own set of styles that get loaded alongside the form), plus whatever Custom CSS you put into the form itself. This all adds up to be "the form styles". This set of styles should travel with the form no matter which page it's placed into -- even if that's not a Marketo LP.

The second set of styles are the template styles for your Landing Page (or webpage). There's usually some combination of styles in a stylesheet somewhere that have something to do with styling form elements. If you were to create a new blank guided LP template, there isn't any of that added in yet, but it's very rare to see a landing page that doesn't have an external stylesheet of some sort. 

What you might be running into here is a difference in the second set of styles as you go from page-to-page (template to template) and the CSS for that page is a little different in terms of the styles that target form elements. 

If you could share a few examples of the approved page links for the one that's working and the one that's not I'd be happy to dig into the inspector tool in the browser to see if I can help you identify the root cause of the difference(s). 

Thanks,
Dave