Blog

Use HTML in Gravity Forms Email Notifications for WordPress

gravity-forms-logoA client was unable to read the Email Notifications that they were receiving from WordPress Gravity Forms. The font size of their email notifications was too small. I set out to find out how to use HTML in Gravity Forms email notifications.

Gravity Forms support let me know that I would need to create my own email notification template using HTML and merge tags to be able to increase the font size of the notification. Nailing down the solution wasn’t hard, but did take dozens of test emails.

After being unsuccessful for a while, I found this StackExchange, which cleared up a few issues.

  • It’s probably best to check the box to ‘disable autoformatting’  for the notification that you are customizing
  • CSS must be served inline. There are rumors of better options, but I didn’t see a way to apply them.
  • Font-size must use the pt (points) unit and not the px (pixel) unit.
  • “Strong” tags work better than inline font-weight CSS.
  • Campaign Monitor has a running tab of what CSS is supported.
  • Finally, and very importantly, Premalier, a really cool service will take your HTML with CSS classes and convert it to email-supported inline CSS HTML markup.

Here’s what my solution looked like for simply increasing the font size of the email notification text:

[HTML]

Single Line Text

// Large, Bold Field Label

{Single Line Text:1}

// Large Field Text
// Manual Line Break

// Repeat with additional merge tags.

[/HTML]

What’s Next

Our Work

Check out some recent work we’re proud of.

Our Blog

Read our latest ideas about tech, features, messaging, and more.

Get in Touch

Want to discuss a project? Hit us up, we’d love to chat!