Creating Customized Form Notification Emails

Introduction

A combination of HTML, CSS styling and Gravity Forms merge tags can be used to create a template that will be populated with dynamic content allowing you to style and brand your notifications. In this article, we’ll give you a basic understanding of how to create a notification email template for customizing the message body of your notifications. To begin, you will visit a specific notification for your form.

IMPORTANT: When customizing, remember to disable the Auto-formatting setting in your notification.

Formatting Your Message

The message body of your email can be created and formatted by using either a Visual editor or Text editor. The Visual editor provides a basic formatting toolbar for quick HTML templating. If you would like more control over your HTML, you can switch to the Text editor and provide any HTML markup for inclusion in your email. Please note that not all HTML tags and CSS styles are supported across all email clients. To ensure WordPress does not interfere with your formatting customizations, please disable the auto-formatting setting.

If you opt to add your own custom HTML tags using the Text tab, make sure to stick to the Text tab, the WordPress classic editor used for notifications is known to remove certain HTML tags when switching between Text and Visual tabs.

To prevent switching the tabs by mistake, you can use the following snippet to disable the Visual tab completely.

add_action( 'admin_init', 'disable_tinymce_for_notifications');
function disable_tinymce_for_notifications() {
    if ( ( GFForms::is_gravity_page() && rgget( 'page' ) === 'gf_edit_forms' && rgget( 'view' ) === 'settings' ) && rgget( 'subview' ) === 'notification' ) {
        add_filter( 'user_can_richedit', '__return_false' );
    }
}

You can add the above snippet to your site as usual.

Using Merge Tags

To the right of the editor, you will find a merge tag drop down. This will insert merge tags into the body of your message. These merge tags will be used to dynamically populate content in your notification message based on the entry being processed.

Conditional Shortcodes

It is also possible to conditionally show blocks of content based upon values from the entry being processed. The conditional shortcode can be used to conditionally include content in your notification.

Basic Example

The following is a basic example of content that could be within the email body.

<h1>Email Header</h1>
<img src="https://example.com/image.jpg">
Hello {Name (First):1.3}{Name (Last):1.6},
 
<div style="margin: 20px;">
<p>This is some body content with a margin around it.</p>
</div>
 
<p style="color: green;">{form_title}</p>
 
<p style="color: red;">This could be some footer content.</p>

In the above example, we’re doing the following:

  1. Placing a header within h1 tags to format the content as a header.
  2. Embedding an image using an img tag.
  3. Greeting the user by dynamically populating their first name and last name using merge tags.
  4. Wrapping some content with a small margin.
  5. Outputting the form title using the {form_title} and styling it with green text.
  6. Outputting static content that is styled with red text.

By the way, note that this example is just plain HTML and merge tags, so if you want to show the same information in your form confirmation, it would work also as content for a confirmation of Text type.

External Resources

If you need more information on how to use HTML and CSS to style content, the following resources are suggested: