Style Marketo lead forms

Overview

This guide walks through how to style Marketo forms when they are embedded inside Walnut demos. There are three supported styling approaches: two managed directly in Marketo and one applied inside Walnut at the template level.

The right option depends on whether you want global styling across all uses of a form, or experience-specific styling that only applies inside Walnut.

In this guide:

• Overview
• Styling Options in Marketo
• Styling Marketo Forms in Walnut
• Best Practices

Looking for setup instructions? 🔨

This article focuses on styling. For full lead form implementation guidance, see:

• Embedding Marketo Lead Forms 

---

Marketo Form Styling

Marketo forms can be styled in two locations:

• In Marketo: Apply a pre-built theme or add custom CSS within the form’s settings in Marketo.
• In Walnut: Add custom CSS inside a `

---

Best Practices & Considerations

• Understand scope: CSS added in Walnut applies only to the template where it is defined. Marketo styling applies globally wherever the form is used.
• Keep global styles in Marketo (if possible): Use Marketo for foundational branding and consistency. Reserve Walnut CSS for demo-specific refinements.
• Target deliberately: Use specific IDs or Marketo classes (for example, .mktoForm, .mktoButton) to avoid unintended side effects. Use your browser’s Inspect tool to identify the correct selectors and preview CSS changes live before applying them in Marketo or Walnut.
• Use **!important** intentionally: This is commonly required for buttons and key visual elements, but avoid overusing it to prevent future maintenance issues.

⚠️ Important

Be sure to test your form in a published demo, not the template preview, and use an incognito/private browser window to prevent cookies or prior submissions from affecting display behavior.

---