Non-styled, Embeddable Forms | Community
Skip to main content
March 31, 2016
New

Non-styled, Embeddable Forms

  • March 31, 2016
  • 4 replies
  • 3950 views

We need the option to embed Marketo forms without any Marketo-based CSS.  We have a common form style standard that we try to follow as much as possible.  Marketo form CSS negates our styles and is difficult and/or time-consuming to have to override the Marketo styles.  We just want to embed the forms and let them follow our styles without having to override.

4 replies

SanfordWhiteman
Level 10
March 31, 2016

Do you want a form without styles, or a form without styles and without any additional DOM elements?  Form styling typically depends on the HTML fragment of the form.  But if Marketo removed everything but <FORM> tags and the mandatory form elements, then you would find yourself frustrated with the absence of styleable containers.  It's not easy to satisfy both needs.

I think a form templating language makes more sense here. In theory, you can actually already build this yourself, so a fragment like:

<FORM>

     <DIV class="mystylingClass">

          <INPUT class="myFancyInput" type="checkbox" data-marketo-field="unsubscribe">

     </DIV>

</FORM>

can be replaced at runtime with the actual fields.

Grégoire_Miche2
Level 10
April 1, 2016

Hi Sanford,

Why would not it be possible to just have the CSS removed, but the additional DOM elements kept ? That would make indeed the form easy to style.

-Greg

SanfordWhiteman
Level 10
April 1, 2016

If you're trying to match a style guide, then the extra DOM elements (spacers elements, row wrappers, etc.) aren't going to match up.

Disabling all Marketo styles + stylesheets is very useful (see MktoForms2 :: Destyle Marketo form​) but I don't think the final goal should be a destyled form that is, ultimately, still built around Marketo styles.

Grégoire_Miche2
Level 10
April 2, 2016

Similar to the second half of this one:

April 12, 2016

Personally, I would prefer to have the capability to code the form and simply apply IDs, or whatever's necessary, in order for Marketo to correctly identify the fields for pre-population/submission to Marketo, so that I can leverage existing style sheets from our site and maintain whatever conventions we normally use for our HTML. I was able to apply most of the styles I wanted to eventually, it just made for rather bloated CSS code. Thanks, Grégoire, for leading me to this thread.

Grégoire_Miche2
Level 10
April 12, 2016

Hi Osman,

Then what you may want to consider is creating and using your own form and having a hidden Marketo form that you would submit in the background.

See : Make a Marketo Form Submission in the background , in combination with example 5 in the developer's guide here: Forms 2.0 » Marketo Developers

-Greg

April 12, 2016

Thanks again! I think this will be useful in the near future, but for what I'm working on now, I want to leverage as much of the Marketo tokenization and guided landing page features as possible. I really just want to have the freedom to style the CSS myself within that context without having to override existing styles. In the form area, it would be great to choose a "style" that doesn't apply any CSS at all. I suppose I'm never really satisfied.

February 6, 2020
No text available