fix: hide required asterisk on optional Marketo fields

[marcklingen]

Problem

On /talk-to-us (Get a demo / Talk to us), every Marketo field showed a red required asterisk — including Mobile Phone, which the form descriptor marks as optional (IsRequired is absent; Email/Company/etc. have IsRequired: true).

Root cause

Marketo Forms2 always emits a .mktoAsterix in every label. Its default stylesheet hides it unless the field wrap has .mktoRequiredField (set from the descriptor’s IsRequired: true).

Two overrides undid that:

1. Our page CSS used .lf-marketo-form .mktoAsterix { display: inline !important }, so every field looked required.
2. The Marketo form ThemeStyleOverride injects .lf-marketo-form .mktoAsterix { display: contents !important } after page CSS. A first fix that required a .mktoForm ancestor still lost, because that class is not on the loaded <form>.

Fix

• Hide .mktoAsterix unless the field is in .mktoRequiredField.
• Select form[id^="mktoForm_"] so the rule is more specific than ThemeStyleOverride and does not depend on .mktoForm.
• Suppress the ThemeStyleOverride ::after so required labels do not get two asterisks.
• After Forms2 renders, apply the same IsRequired → .mktoRequiredField mapping with an inline display so later-injected Marketo CSS cannot unhide optional marks.
• No hardcoded “Phone is optional”. Form IDs, field names, and submit behavior are unchanged.

Verification

On local /talk-to-us after the form loaded:

• Phone: mktoRequiredField absent, computed display: none, no red asterisk.
• First name, Last name, Work email, Company Name, and other required fields: single red asterisk, display: inline.
• Empty submit: Phone stays valid; required fields are marked invalid. Marketo did not treat Phone as required.

  

Confidence Score: 4/5

The PR should not merge until the documented Marketo analytics test runs successfully again.

Summary

The PR updates the Talk to Us form to hide optional-field asterisks while retaining required-field indicators.

• It adds form-scoped CSS and a render-time inline-style adjustment.
• The new DOM access breaks the existing Marketo sales-completion test fixture.

_{Reviews (1) · Last reviewed commit: "fix: beat Marketo ThemeStyleOverride on ..."}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
langfuse-docs	Ready	Preview	Oct 6, 2026 8:27am UTC

[github-actions]

@claude review

[claude]

Claude Code Review

No review was started: this request came from a bot account. Manual reviews can only be requested by someone with write access to this repository. Ask a maintainer to comment @claude review, or have your automation post the comment from a user account with write access.

_{Tip: disable this comment in your organization's Code Review settings.}

[claude]

Beyond the inline finding already reported, I also checked whether a field that becomes required after the initial Marketo render (e.g. State becoming required when Country=US, via Marketo's dependency rules) would be left with a stale asterisk — it can, since applyRequiredAsterisks only runs once in the loadForm callback, but this is cosmetic only: Marketo's own validation logic (not the asterisk's CSS/inline display) is what actually enforces the required field, so it does not affect form correctness.

Extended reasoning...

The change touches components/MarketoContactForm.tsx (adds a one-time post-render pass that force-sets inline display on Marketo's .mktoAsterix elements based on .mktoRequiredField ancestry) and style.css (stops force-showing every asterisk, defaults to hidden, and suppresses a duplicate ThemeStyleOverride asterisk). It touches no auth, injection, or data-exposure surface — purely form-field display logic. A confirmed finding (the new querySelectorAll call breaks the documented analytics test's Marketo DOM mock) is already being posted as an inline comment, so this body only adds a separately examined and ruled-out cosmetic edge case rather than repeating it.

[cursor]

On the dependency-rule asterisk note: leaving that as-is. This Talk to us form has no Country/State (or similar) required-if rules — Phone is statically optional in the Marketo descriptor. Marketo’s own validation still enforces required fields; a stale asterisk would be cosmetic only. We will not add a MutationObserver unless those rules show up on this form.