← Web Components

Web Components · Global

<mmm-form>

Renders merchant-configured forms by code. Resolves the form schema via the SDK, validates client-side, and submits to the form-submissions endpoint. Massive styling surface — 50+ attributes — to fit any visual brand.

Overview

Forms are configured in the editor (newsletter, contact, custom). Set form-code to render one. Renders supported field types: text, email, phone (via <mmm-phone-input>), textarea, select, radio, checkbox. Required-field markers, validation, submit-button states, and success / error messages all themed via attributes.

Quick start

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

<mmm-form form-code="contact-form" submit-button-text="Send message"></mmm-form>

Required + core attributes

AttributeTypeDefaultDescription
form-codestringrequiredCode of the editor-configured form.
submit-button-textstringSubmitSubmit-button label.
success-messagestringForm submitted successfully!Post-submit success message.
show-titlebooleantrueShow the form title (from editor config) above the fields.
custom-cssstring—Extra CSS appended inside the shadow DOM.

Container

AttributeTypeDefaultDescription
container-backgroundstring#ffffffContainer background.
container-paddingstring1.5remContainer padding.
container-border-radiusstring0.5remContainer border-radius.
container-box-shadowstring0 0.125rem 0.5rem rgba(0,0,0,0.1)Container shadow.
container-borderstringnoneContainer border.
container-max-widthstring100%Container max-width.

Title

AttributeTypeDefaultDescription
title-font-sizestring1.5remTitle font size.
title-font-weightstring600Title font weight.
title-colorstring#262626Title colour.
title-margin-bottomstring1.5remSpacing below the title.
title-text-alignstringcenterTitle text-align.

Fields, labels & inputs

AttributeTypeDefaultDescription
field-gapstring1.25remGap between form fields.
label-font-sizestring0.875remLabel font size.
label-font-weightstring500Label font weight.
label-colorstring#262626Label colour.
label-margin-bottomstring0.5remSpacing below the label.
required-mark-colorstring#ff4d4fColour of the * mark next to required-field labels.
input-paddingstring0.5rem 0.75remInput padding.
input-font-sizestring0.875remInput font size.
input-colorstring#262626Input text colour.
input-backgroundstring#ffffffInput background.
input-borderstring1px solid #d9d9d9Input border.
input-border-radiusstring0.25remInput border-radius.
input-focus-border-colorstring#1890ffInput border on focus.
input-focus-box-shadowstring0 0 0 0.125rem rgba(24, 144, 255, 0.1)Input shadow on focus.
textarea-min-heightstring5remTextarea minimum height.
radio-checkbox-gapstring0.5remGap between radio / checkbox options inside a field.

Submit button

AttributeTypeDefaultDescription
button-widthstring100%Button width.
button-paddingstring0.625rem 1remButton padding.
button-font-sizestring1remButton font size.
button-font-weightstring500Button font weight.
button-colorstring#ffffffButton text colour.
button-backgroundstring#1890ffButton background.
button-borderstringnoneButton border.
button-border-radiusstring0.25remButton border-radius.
button-hover-backgroundstring#40a9ffButton hover background.
button-disabled-opacitynumber0.6Opacity when disabled.
button-submitting-backgroundstring#91d5ffBackground while the form is submitting.

Messages

AttributeTypeDefaultDescription
message-success-backgroundstring#f6ffedSuccess message background.
message-success-colorstring#52c41aSuccess message text colour.
message-success-borderstring1px solid #b7eb8fSuccess message border.
message-error-backgroundstring#fff2f0Error message background.
message-error-colorstring#ff4d4fError message text colour.
message-error-borderstring1px solid #ffccc7Error message border.

Events

EventTargetPayload
form-submittedelement (bubbles, composed){ response, values: { code, response: formValues } }

Live preview

store sample-store tag <mmm-form>

Examples

1. Default contact form

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

2. Card-style form with accent submit

<mmm-form
  form-code="newsletter-signup"
  container-background="#ffffff"
  container-padding="2rem"
  container-border-radius="0.75rem"
  container-box-shadow="0 0.25rem 1rem rgba(0,0,0,0.08)"
  container-max-width="32rem"
  button-background="#c8a8ff"
  button-color="#0e1011"
  button-hover-background="#b990ff">
</mmm-form>

3. Hook submit success

document.querySelector('mmm-form').addEventListener('form-submitted', (e) => {
  console.log('Submitted form:', e.detail.formCode);
  analytics.track('form_submit', { code: e.detail.formCode });
});