Most emails follow the same formula: banner, text, button. Readers see this hundreds of times a week and stop noticing it. Interactive elements change the mechanics of the interaction — instead of passively reading, the user does something right inside the email.
Let's break down three tools: hover effects, expandable blocks, and embedded forms. How they work, where they're supported, and when it's worth using them.
How interactivity works in emails
Interactivity in emails is built on CSS — no JavaScript. Anything you can do in a browser through scripts isn't available in an email. But CSS animations, pseudo-classes, and checkboxes work wherever the email client supports them.
The main problem is support. The same element works perfectly in Apple Mail and is completely ignored in Outlook. So every interactive element needs a fallback — a static display for clients without CSS support.
Email client | Hover effect | Expandable blocks | Embedded forms |
|---|---|---|---|
Apple Mail | Yes | Yes | Yes |
Gmail (browser) | Partial | No | No |
Outlook | No | No | No |
Mail.ru | Partial | No | No |
Yandex Mail | Partial | No | No |
Interactivity primarily works on Apple devices. For an audience with a high share of such users, that's a strong argument in its favor. For corporate campaigns dominated by Outlook, it's risky.
Hover effects
A hover effect changes how an element looks when the cursor is placed over it. In emails, it's most often applied to buttons and images.
A button with a hover effect. The button changes its background color or gains a shadow. This reinforces the feeling of interactivity and visually signals that the element is clickable.
An image with a hover effect. Hovering over a product or a banner reveals additional information: price, a button, a description. It works like a mini product card inside the email.
Technically, the effect is implemented through the :hover pseudo-class in CSS. In an email, it needs to be written inside a <style> tag in the <head> — inline styles don't support pseudo-classes.
A common mistake. A hover effect with no fallback. In Outlook, the user will see a static element, and that's fine as long as the base design stands on its own.
Expandable blocks
Expandable blocks hide part of the content behind a heading. The user clicks the heading and the block expands.
Where it's useful. Long emails with several sections: FAQs, an event program, a catalog with descriptions. The block reduces the email's visual footprint and lets the reader choose what to read.
How it works technically. Through a checkbox or radio button hidden with CSS. Clicking the heading toggles the checkbox's state, and CSS reacts by showing or hiding the block.
cssinput[type="checkbox"] { display: none; }.block-content { display: none; }input:checked ~ .block-content { display: block; }
A common mistake. Hiding important information behind an expandable block. If the reader doesn't expand the block, they won't see it. This element is suited for supplementary content, not the key message.
Embedded forms
An embedded form lets you collect data right inside the email, without linking out to a website. A survey, a rating, a preference selection.
Where it works. Apple Mail and a few other clients support HTML forms in emails. Gmail and Outlook don't.
A practical scenario. An email with a one-question survey: three answer buttons right in the text. The user clicks, the answer is sent to the server. No linking out to a website, no separate page.
A common mistake. A form with no fallback. If a Gmail user sees an empty block instead of a form, that's worse than not having a form at all. The fallback is a link to an external page with the same survey.
Another mistake. Long forms. In an email, one or two questions is the max that works. If there are more, send the user to the website.
General rules for working with interactivity
A fallback is mandatory. Any interactive element needs to look correct in clients without CSS support. The base email needs to work on its own.
Test in real clients. A browser preview doesn't show how the email looks in Outlook or mobile Gmail. Use real devices or dedicated testing services.
Don't overload the email. One interactive element per email is enough. Several at once turn the email into a circus act.
Interactivity doesn't replace content. A hover effect on a weak offer won't boost conversion. Interactivity strengthens a good email — it doesn't fix a bad one.
How Letteros handles interactive elements
In Letteros, interactive elements are added via an HTML block — you insert custom code with hover effects or expandable blocks right into the template wherever you need it. The other blocks stay in the builder: brand style, responsive layout, correct display in Outlook. This is handy when you need to test a single interactive element in a campaign.