Commmerce Docs
← Web Components

Web Components · Footer

<mmm-footer-newsletter-email>

The email input field for the footer newsletter. A single <input type="email"> with theme-aware default colours and built-in email validation. Press Enter to submit; the sibling <mmm-footer-newsletter-button> calls into it on click.

Overview

Exposes two methods on the element:

  • getValue() — read the current input value.
  • clearValue() — empty the input.
  • handleSubmit() — validate, alert on success / invalid, and clear the input.

handleSubmit() is invoked automatically when the user presses Enter in the input, and when the sibling <mmm-footer-newsletter-button> is clicked.

When to use

  • Inside <mmm-footer-newsletter> paired with the button.
  • Anywhere you need a styled email input that validates and submits via the button sibling.

Quick start

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

<mmm-footer-newsletter-email placeholder="you@example.com" width="350px"></mmm-footer-newsletter-email>

Attributes

AttributeTypeDefaultDescription
placeholderstringEnter your emailPlaceholder text inside the input.
font-familystringtheme description fontFont-family of the input text.
background-colorstringtransparentInput background.
text-colorstringtheme primary textInput text colour.
border-colorstringtheme input strokeBorder colour.
widthstring350pxInput width (CSS length). Auto-caps to viewport-based maxes on tablet / mobile.
font-sizestring14pxInput font-size.
border-radiusstring0Input border-radius.
paddingstring12pxInput padding.

Methods

MethodReturnsSide effectDescription
getValue()string—Current value of the underlying <input>.
clearValue()voidclears inputEmpty the input field.
validateEmail(email)boolean—Regex-checks the supplied string against a basic RFC 5322 pattern.
handleSubmit()voidalert + clearValidate, then on success clear the field and alert(); on failure alert() an error.

Live preview

store sample-store tag <mmm-footer-newsletter-email>

Examples

1. Default

<mmm-footer-newsletter-email></mmm-footer-newsletter-email>
<mmm-footer-newsletter-email
  placeholder="you@example.com"
  background-color="#1a1d20"
  text-color="#fff"
  border-color="#2a2e33"
  border-radius="8px"
  padding="14px 16px"
  width="340px"></mmm-footer-newsletter-email>

3. Read the value from your own JS

const email = document.querySelector('mmm-footer-newsletter-email');
form.addEventListener('submit', (e) => {
  const value = email.getValue();
  if (email.validateEmail(value)) {
    api.subscribe(value);
    email.clearValue();
  }
});