Send HTML Email Notifications from Online Forms

Formsite HTML email

Sending email after receiving new form results is possibly the most-used feature at Formsite. Many form owners want to send an email as either a receipt or to notify one or more people that a new result exists. HTML email Notifications let form owners add styling to the messages to align with branding rules, increase readability, and create better emails.

Unfortunately, email works on systems different than web pages so there isn’t as much support for more powerful HTML features. Also, the software used to view email needs to support a much wider range of devices. For example, it’s possible to send email to fax machines and text devices, which would not be able to display any colors or images.

HTML Email Notifications

Formsite HTML email template

While the possible uses of email cover a wide range of devices and applications, sending HTML email focuses on major email clients. These clients like Gmail, Microsoft Outlook, etc. cover the majority of recipients and can display HTML in a mostly predictable manner.

The fundamental difference between email and web pages comes down to how the application presents the content. Web pages have servers that run complex scripts and respond to the specific device used. These abilities let web pages use code and styling for amazing results.

Email, on the other hand, needs to be small and display inside a wide range of applications on many types of devices and systems. It also needs to be safe, which means email cannot run scripts or execute code like web pages can.

Working with Email

Formsite Notifications let form owners design HTML emails that send after each new submission. The text editor allows for choosing fonts, sizing text and images, setting colors and more. Most form owners will find the text editor suitable for the majority of uses.

The text editor contains a source code button that provides access to the actual HTML of the email, too. For customers who have an existing HTML email template, copy and pasting the existing code is a great solution for staying consistent.

For those who want to create HTML email Notifications by hand, the source code button gives access to type or copy/paste code. There are many sources of tips and techniques for HTML email online, and the essentials include:

  • Use tables for all positioning. Divs, paragraphs and spans are unusable due to their varying margins. Some inline CSS is usable for font styling but should be avoided for virtually all positioning.
  • CSS font styling needs to be inline, not in a style block at the top. Classes and ids cannot be used so every element gets its own style setting.
  • No Javascript or jQuery at all.
  • Set a width between 600px and 800px. There are ways to use media queries to adapt to different screen sizes, but keeping it in that range is just easier.
  • Shorthand in general should be avoided, so hex colors must use the full 6 digits (black is #000000, not #000). Margins and padding needs to be spelled out, too, unless you’re setting everything to zero. For example:
    Margin: 10px 20px
    This works on web pages to set the top/bottom margin to 10px, and left/right margin to 20px. Unfortunately it’s not reliable with email. To do the same in email:
    Margin-top: 10px; margin-bottom: 10px; margin-left: 20px; margin-right: 20px;

Resources

Billions of forms submitted