Count field

A Count shows how many characters visitors have typed in another field, usually the message. It is in the More menu and is never sent.

For a count in a sentence, you don’t need a Count field: put [[message:left]] or [[message:count]] in the text (Use in text, in the message field’s settings). Use a Count field when you want its own wrapper and style.

<label>Your message
  [[your_message]]
</label>
<small>[[count]]</small>

Settings

Setting	What it does
Count of	The field to count, usually a Textarea.
Text shown	Write the text and click Characters typed, Characters left or Max length under it to add the value. {count} is the characters typed, {left} how many more fit, and {max} that field’s max length. {count} alone by default.

{left} and {max} need a Max length on the field counted.

Example

Give the message a max length of 500 and the Count the format {left} characters left. It reads 500 characters left, then counts down as visitors type.

Styling

The Count gets the class is-over past the field’s max length and is-under while the text is shorter than its min length. Color them in your theme’s CSS.

The Count is not limited to plain text: it can also be shown as a progress bar or another visual indicator of how much of the max length is used.

Example: a progress bar

The Count sets --remaily-count (characters typed) and --remaily-max (the max length) on itself, on page load and as visitors type, so a bar needs only CSS, no JavaScript. The field counted needs a Max length: without one --remaily-max is 0 and there is nothing to fill.

<small>[[count]]</small>

.remaily-count {
	display: block;
}
.remaily-count::after {
	content: "";
	display: block;
	height: 4px;
	margin-top: .25rem;
	border-radius: 2px;
	background:
		linear-gradient(#2563eb, #2563eb) no-repeat 0 0 / min(calc(var(--remaily-count) / var(--remaily-max) * 100%), 100%) 100%,
		#e5e7eb;
	transition: background-size .15s;
}
.remaily-count.is-over::after {
	background-image: linear-gradient(#dc2626, #dc2626);
}

The bar is drawn with ::after because the Count’s text is rewritten on every key press. Add font-size: 0 to .remaily-count to show the bar alone. The same ratio, var(--remaily-count) / var(--remaily-max), can drive other shapes, such as a ring drawn with a conic-gradient.