Skip to main content
A
Anonymous
July 23, 2015
Question

Can you change the style of a form in a landing page template?

  • July 23, 2015
  • 2 replies
  • 2332 views

I'm using a Marketo landing page which comes with a form. I'm trying to change the style (i.e. colour, length, shape of the form) of it but I can't seem to.

I've tried deleting the template form and recreating it from scratch and choosing a different theme in the Settings but I'm guessing the CSS of the landing page controls how it actually looks on the page.

If you can change it, how do I do it?

Thanks!

Marilyn

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

SanfordWhiteman
SanfordWhiteman
Level 10
July 23, 2015

Any CSS can be overridden.  By default, of course, the designer of a template will want to make everything work together.  But the styles for the form are always accessible, even if it might take some fancy work with selector specificity.  You may have to be pretty sharp with CSS.

Can you give an example (with URL) of the form and one style you want to change with CSS?

A
Anonymous
July 23, 2015

Thanks Sanford. I'm using the Neojo template: http://library.marketo.com/LP-Neojov1_LP-Neojo.html

The form fields are styled black and I'd prefer it to be white - like the Round or Inset form theme. I've selected those in my form setup but I reckon the landing page's CSS overrides it.

I guess what I couldn't figure out was how to access the CSS code in the landing page editor?

SanfordWhiteman
SanfordWhiteman
Level 10
July 23, 2015

Well, those elements have styles marked ​!important, so you need to get ​!important and even more specific to override them:

.mktoForm .mktoField.mktoTextField, .mktoForm .mktoField.mktoEmailField {

    background-color: #abcdef !important;

}

or one of my favorite tricks ever:

.mktoField.mktoTextField.mktoTextField, .mktoField.mktoEmailField.mktoEmailField {

    background-color: #abcdef !important;

}

keithnyberg
keithnyberg
Level 7
July 23, 2015

Any reason you cannot edit the form you are referring to in the design studio? Is it used multiple places but you only want it to render white in one place?

Terms & ConditionsAccessibility statement

Loading footer...