SOLVED

Embed a form in your website without Marketo css styling?

Go to solution
Anonymous
Not applicable

Embed a form in your website without Marketo css styling?

Hi there,

We would like to embed our forms on our Wordpress powered website without any of the Marketo css styling that gets embeded along witht he form. Is that possible?

Thanks very much for any tips and feedback
Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Embed a form in your website without Marketo css styling?

I posted the other week a completely destyled Forms 2.0 embedded form.  Our web team is using such forms to mesh completely within our corporate style.  You can do the same code for your forms.

View solution in original post

12 REPLIES 12
Anonymous
Not applicable

Re: Embed a form in your website without Marketo css styling?

Hey Amr,

For Forms 2.0, Marketo loads CSS in 4 different places, but only 3 can each be "stripped".
  • When editing a form, you can access the "Custom CSS" from Form Settings which can be completely blank.
  • There is also a window for Theme CSS which is related to the chosen Theme. A CSS file is loaded with the form (forms2-theme-THEMENAME.css) but it cannot be edited; Theme 1 has the least CSS.
  • The last thing to edit are the form button which has it's own inline CSS section making this as simple as possible is the only way to really strip it.
  • The last thing is Form2.css, which is loaded by the Form itself from Marketo. As far as I know this cannot be edited, you would need to place other CSS on page to negate this file.
    • It is possible to prevent a CSS file from loading in JavaScript, though do not have experience developing such a thing.
    • I really recommend against removing the Form2.css styles though. Placed in this file is really what holds the foms together and make them "responsive".
I am assuming you are just looking to have CSS set in WordPress and you want to make sure there are not conflicts. Keeping the styles super simple (use all default settings) instead of completely removing them will ensure the form will load if there is a problem with WordPress' CSS.

For best results with Form 2.0 styling, I utilize the Custom CSS area as it loads inline which ensures I have full control over the form.
SanfordWhiteman
Level 10 - Community Moderator

Re: Embed a form in your website without Marketo css styling?

I posted the other week a completely destyled Forms 2.0 embedded form.  Our web team is using such forms to mesh completely within our corporate style.  You can do the same code for your forms.
Anonymous
Not applicable

Re: Embed a form in your website without Marketo css styling?

Just wanted to say that this is perhaps my favorite post ever in Marketo Nation.

Sanford Whiteman​, beers on me if we ever should meet.

Anonymous
Not applicable

Re: Embed a form in your website without Marketo css styling?

Thanks to the both of you for the great feedback and for taking the time to share your experiences.

A big thank you also to Sanford W for sharing the code, that is exactly what we are looking for!
Anonymous
Not applicable

Re: Embed a form in your website without Marketo css styling?

When using the stripped code featured above, how do you instruct your devs to style the form? They seem to be scratching their heads. Maybe I need new devs.

SanfordWhiteman
Level 10 - Community Moderator

Re: Embed a form in your website without Marketo css styling?

Well, nothing changes in the original DOM structure.  There just aren't any CSS styles applied.  It's very easy to inspect the HTML (DIV wrappers, classes, etc.) using the browser's dev tools... so I do kinda wonder what your devs are looking at.

If they want a not only destyled but completely unwrapped set of form elements they could use DOM methods to rearrange it however they like. I do that a lot in my demos.  But here the objective is the Marketo form structure + your CSS (and none of theirs).

fklawrence
Level 1

Re: Embed a form in your website without Marketo css styling?

I can not access your previous post- can you please reshare. I want the form to take on the styling of my website

SanfordWhiteman
Level 10 - Community Moderator

Re: Embed a form in your website without Marketo css styling?

SanfordWhiteman
Level 10 - Community Moderator

Re: Embed a form in your website without Marketo css styling?

I also just made a change to get a last element style out of there.