Emailed QuickBooks invoices look broken: how mail clients mangle HTML

Every few weeks a version of the same report crosses the QuickBooks community. A user designs a sharp invoice template, emails it, and the customer’s reply comes back confused: the logo is gone, the layout has collapsed, or the message arrived as plain text. In the threads we have followed, the accepted resolution is blunt. QuickBooks sends HTML email, and HTML email is not a web page.

Why does an invoice look right in QuickBooks but wrong in the inbox?

QuickBooks Online builds each sales-form email in HTML and styles it with your form design, colors and logo. QuickBooks Desktop takes a different route, handing the message to Outlook, to a webmail account such as Gmail, or to its own email service. The destination is the same either way: the recipient’s mail client renders the message, and a mail client is not a browser.

A browser runs scripts, plays animation and draws complex menus. Mail clients refuse most of that on purpose, because scripts and forms in email are a common attack vector. Any interactive element built into a template, from a JavaScript widget to an embedded form, gets stripped or ignored by most inboxes.

The symptoms users report map directly onto those restrictions. Background images vanish. Custom fonts fall back to Arial or Times. An animated logo freezes on its first frame. On the worst days the styled body is discarded entirely and the customer sees bare text.

The safe, the risky and the unsupported

The guidance that settled these threads sorts email content into three columns.

The safe column survives almost every inbox. Tables were how email was built for decades, and every client still understands them. The caution column is where testing earns its keep: background images and custom fonts render in some clients and fail silently in others, so preview before you send a batch of invoices or statements.

Which features fail in which client?

The failures are predictable once you know the clients.

Outlook on Windows renders email with its Word engine. Animated GIFs play as a single still frame, custom web fonts are swapped for defaults, background images are unreliable and forms do not submit.

Gmail routes images through its own servers and can hold them back depending on a reader’s settings. It also clips messages that run long, so a template padded with heavy markup can lose its footer and payment instructions.

Apple Mail and most phone apps sit at the forgiving end of the market. They support animated GIFs and background images, but a template wider than a phone screen gets scaled down, and small text shrinks with it.

Dark mode adds one more variable. Several clients recolor or invert designs, so a dark header on a dark background can disappear for some readers.

How do you keep an emailed invoice intact?

The fixes that resolved the threads were unglamorous.

Keep the form design simple. A static table layout in the 600 to 800 pixel range, web-safe fonts and inline CSS will look close to identical everywhere QuickBooks delivers.

Treat the PDF copy as the authoritative document. The attachment preserves the printed form exactly, while the styled HTML body is a courtesy. Users who stopped fighting the email body and let the PDF carry the detail saw the complaints stop.

Leave the interactive flourishes out. No scripts, no embedded forms, no documents wired into the body.

Test before the batch run. Send one invoice to an Outlook address, a Gmail address and a phone, and check all three before you email the month’s statements.

One caution on animated files. Some clients will not play them at all, and an editing pass in an image tool that flattens layers can break the animation outright, leaving a frozen or corrupted picture. If a GIF matters to a template, add it directly and leave it untouched.

The lesson from the accepted answer is one sentence long. Design for the weakest inbox you expect to hit, not the best browser, and the invoice your customer sees will match the one you previewed.