Styling Marketo Lead Forms in Walnut

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

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 <style> block in the template’s Form embed code, placed above the Marketo <script> tag.

These approaches can be used independently or together. In most cases, teams apply baseline styling in Marketo and reserve Walnut styling for small, demo-specific adjustments.

Styling Options in Marketo

Option 1: Use a Pre-Built Marketo Theme

Marketo provides a set of pre-built form themes that can be applied directly in Form Settings. This is the fastest way to achieve consistent branding across pages, embeds, and Walnut experiences.

👉 Learn more: Select a Form Theme 

Option 2: Add Custom CSS in Marketo

For deeper control, Marketo allows you to add custom CSS directly to a form theme. This lets you target standard Marketo classes and IDs using familiar CSS syntax.

👉 Learn more: Edit the CSS of a Form Theme 

Use Marketo styling when:

• You want one source of truth for form appearance
• The same form appears across multiple channels
• You want Walnut to inherit styling automatically

Styling Marketo Forms in Walnut

Walnut supports custom CSS at the template level. This allows you to style a Marketo form only within a specific Walnut demo, without affecting the form elsewhere.

To do this, add a <style> block above the Marketo embed <script> inside the template’s Forms panel.

Steps:

1. Open your Walnut template and navigate to the Forms panel.
2. Open your existing lead form or click Create Lead Form.
3. Paste your Marketo form <script> into the Embed code section.
4. Add a new <style> block directly above the Marketo form <script>.
5. Insert your custom CSS between the opening and closing tags.
6. Test your form in a published demo (not the template preview) and use an incognito/private browser window to prevent cookies or previous submissions from affecting the test.

<style>
/* Example: button styling */
.mktoForm button.mktoButton {
  background-color: #6C2BD9 !important;
  border-radius: 8px;
}
</style>

<script>
  /* existing Marketo embed code */
</script>

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.