Markers and fields

A template becomes editable in two steps. In the HTML, you mark each element that should change. In the form panel, you give each marker a field, which decides what marketers can do with it.

Mark elements with data-mm

Add a data-mm attribute with a name to any element marketers should be able to change:

<h1 data-mm="headline" style="margin:0;font-size:28px">Welcome to our summer sale</h1>
<img data-mm="hero-image" src="https://example.com/hero.jpg" width="600" alt="">
<a data-mm="cta" href="https://example.com/sale">Shop now</a>

Marker names:

• start with a letter, then use letters, digits, - and _, up to 64 characters;
• are unique within a part. The header, the footer and each module can all have their own headline.

Everything without a marker is locked. A marker on its own changes nothing: the element keeps its content until you give it a field.

When Modular Mail builds an email, it removes every data-mm attribute, so they never reach your ESP or the inbox. The rest of your HTML is copied exactly as written.

Add fields

You can set up fields and markers in either order.

Mark first, then add fields

Write or paste your HTML with its markers. Under the form, a list shows every marker that doesn’t have a field yet. Beside each one:

• Add text field adds a text field straight away, or
• Add field opens a menu of the field types that suit the element. An <img> suggests Image, an <a> suggests Link, and an element holding paragraphs suggests Rich text first.

Add fields first, then mark

Click Add field at the end of the form and pick a type. The new field has no marker yet, which shows as a warning. In its Marker setting, pick a marker from the HTML or type a new name. If the name isn’t in the HTML yet, the settings show the attribute to add, such as data-mm="headline", with a button to copy it.

The marker picker lists every marker in the part. Markers already filled by another field, or on an element that can’t take this field type, are listed last and can’t be picked.

Settings every field has

Setting	What it does
Type	Text, Rich text, Image, Link, Colour, Choice, Toggle or Repeater.
Label	What marketers see above the field, such as “Headline”. Up to 100 characters.
Help text	Shown under the field. Use it for sizes, tone or rules, such as “Shown 600 wide. Upload it at 1200 × 600 for sharp screens.” Up to 500 characters.
Required	Marketers see “Fill this in.” until they do. Choices, toggles and repeaters don’t have it: a choice and a toggle always have a value, and a repeater has its fewest items instead.

Most types add their own settings, such as a character limit or whether a link can wrap an image. See the guides for each type, or the field types reference for everything in one place.

Arrange the form

Fields appear to marketers in the order of the form. Drag fields to reorder them.

For longer forms, use groups: named, collapsible sections such as “Content”, “Button” or “Style”. Click Add group to create one, then drag fields into it. You can rename a group, ungroup its fields and delete it once it’s empty. Groups can’t be nested.

Fields inside a repeater stay inside it: you can reorder them within the repeater but not drag them in or out.

Check the form

Switch the form panel to Preview to fill the form as a marketer would, with the part’s preview updating as you go. It starts from the template’s own content. Nothing you enter is saved, and undo is off while you’re in Preview.

Template content is the default

A marker’s original content is what marketers start with. When a marketer adds a module, each field is filled from the HTML: the text in the element, the image’s src and alt, the link’s text and href. So write realistic sample content in your HTML. It’s what every new module will show until someone changes it.