← Web Components

Web Components · Global

<mmm-contact-us>

A thin wrapper around <mmm-form> that resolves the form code from form-code and renders a "Contact Us" heading above it. Submit handling, validation, and theming live in the underlying form.

Overview

Use this when you want a labeled "Contact us" section on a marketing page. For full visual control or non-contact use-cases, drop a bare <mmm-form form-code="..."> instead.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-contact-us form-code="contact-form"></mmm-contact-us>

Attributes

AttributeTypeDefaultDescription
form-codestring—Required. Code of the merchant-configured form to render (managed in the editor's Forms section).
show-titlebooleantrueShow the "Contact us" heading above the form.
custom-cssstring—Extra CSS appended inside the shadow DOM. Use this for fine-tuning when the form attributes don't cover your case.

For deeper visual control (input padding, button colour, message styling, …) use <mmm-form> directly and forward its attributes.

Events

Forwards form-submitted from the underlying <mmm-form>. Listen on window or the element itself for { formCode, response }.

Live preview

store sample-store tag <mmm-contact-us>

Examples

1. Default

<mmm-contact-us form-code="contact-form"></mmm-contact-us>

2. Title hidden + custom outer CSS

<mmm-contact-us
  form-code="contact-form"
  show-title="false"
  custom-css=":host { max-width: 32rem; margin: 0 auto; }">
</mmm-contact-us>

3. Wire submit-success analytics

document.querySelector('mmm-contact-us').addEventListener('form-submitted', (e) =>
  analytics.track('contact_form_submit', { code: e.detail.formCode })
);