Embed a form in your website without Marketo css styling? | Community
Skip to main content
A
Anonymous
March 17, 2015
Solved

Embed a form in your website without Marketo css styling?

  • March 17, 2015
  • 3 replies
  • 8031 views
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
    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by SanfordWhiteman
    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.

    3 replies

    A
    Anonymous
    March 17, 2015
    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
      SanfordWhitemanAccepted solution
      Level 10
      March 17, 2015
      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.
        A
        Anonymous
        April 21, 2016

        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.

          A
          Anonymous
          March 17, 2015
          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!
          A
          Anonymous
          September 28, 2015

          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
          SanfordWhiteman
          Level 10
          September 29, 2015

          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).

          Terms & ConditionsAccessibility statement

          Loading footer...