Non-styled, Embeddable Forms

Non-styled, Embeddable Forms

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.

10 Comments
SanfordWhiteman
Level 10 - Community Moderator

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

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 - Community Moderator

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

Hi Sanford,

I my language, but may be I am using the terms incorrectly, the "destyled" would mean only the removal of the CSS stylesheet. Keeping the wrapping <DIV>'s and the classes names in the DIV's is OK as they can be used as "hooks" to create another stylsheet. And this is exactly what you are able to achieve with this code.

The idea should be, IMHO, to be able to get exactly the form code that you are achieving here. Impresssive.

-Greg

SanfordWhiteman
Level 10 - Community Moderator

OK, use my code in the meantime!

Grégoire_Miche2
Level 10

Similar to the second half of this one:

Anonymous
Not applicable

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

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

Anonymous
Not applicable

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.

kh-lschutte
Community Manager
Status changed to: Open Ideas