Embed a form in your website without Marketo css styling?

[Anonymous]

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

[Anonymous]

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]

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]

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

[Anonymous]

Thanks, I copied your new code. I appreciate it! They are just looking to style the form according to the new site design, that's all. Hopefully they can figure it out now .

[SanfordWhiteman]

I hope so.  Hit me at sandy@figureone.com (or have them write me) if they have other questions.

[Anonymous]

Sandy thanks, they figured it out. Thanks for sharing this code!

[SanfordWhiteman]

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]

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

[SanfordWhiteman]

Try this later Pen: https://codepen.io/figureone/pen/dLqxPG

[SanfordWhiteman · Accepted solution]

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]

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]

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.