How to Customize the Styles on the Email Template

Introduction

Would you like to customize the styles of your email template header from your email notifications? We have some CSS and PHP that can easily make small tweaks like background color changes, link color changes, and making your header image fit the width of the email header. In this tutorial, we’ll walk you through the steps needed to make these small changes.

By default, WPForms already gives the ability to change the background color of the email template as well as add a header image. For more details on how to do that, please review this documentation.

We've now added our header image and set our background color through the WPForms Email Template Settings

Creating your form

To begin, you’ll need to create your form and add your fields. If you need any help in creating your form, please see this documentation.

start by creating your form and adding your fields

Adding HTML inside the email notifications

If you would like to add further customization to your email notifications by just bolding the labels in the email text, you can also do that easily by editing your form and on the Settings » Notifications tab inside the form builder, change your Message field. You can replace the {all_fields} in your Message field to:

<b>Name:</b> {field_id="0"}
<b>Email:</b> {field_id="1"}
<b>Message:</b> {field_id="2"}

adding standard HTML to your email notification template

We use Smart Tags in our Message field to build out this response. For further help on using completed form fields as Smart Tags, please review this tutorial.

after the change of bolding the text in the email notification message field

Changing the styling only

If all you’d like to do is just change the styling of the notification, you could just use a filter to add your own branded styling to your email templates.

/**
 * Customizing styles of the email notification
 *
 * @link https://wpforms.com/developers/how-to-customize-the-styles-on-the-email-template/
 */
 
function wpf_dev_email_message_custom_styles( $message ) {
	
	$custom_styles =
		'
        #templateBody {
            background-color: #32a852;
        }

		#templateBody .mcnTextContent a { 
		    color:#32a852; 	
		    font-weight:normal; 	
		    text-decoration:underline; 
		}
		';

		$message = preg_replace('/<style type="text\/css">(.*?)<\/style>/s', '<style type="text/css">$1' . $custom_styles . '</style>', $message);

		return $message;
	
}
  
add_filter( 'wpforms_email_message', 'wpf_dev_email_message_custom_styles', 10, 1);

Using this snippet, we’ve changed the background color of the email notification and any links that appear inside the notification as well to #32a852.

Please note, uniformity across all email clients is not guaranteed. Please be sure to test your notifications from as many different email applications as you can.

Other CSS selectors to be aware of are:

/* Page - Background Style */
body,
#bodyTable 

/* Page - Heading 1 */
h1 

/* Page - Heading 2 */
h2 

/* Page - Heading 3 */
h3 

/* Page - Heading 4 */
h4 

/* Header - Header Style */
#templateHeader 

/* Body - Body Style */
#templateBody 

/* Body - Body Text */
#templateBody .mcnTextContent,
#templateBody .mcnTextContent p 

/* Body - Body Link */
#templateBody .mcnTextContent a,
#templateBody .mcnTextContent p a 
 
/* Body - Body Cell */
#bodyCell 

Creating a custom email header

To create a custom email header for your email notifications, you’ll need to create a new file in your favorite text editor. For this tutorial, we’re going to use Notepad and add the following code to this file.

<?php
/**
 * Directions to install:
 * 
 * - Inside your WordPress theme, create a directory named "wpforms-email"
 * - Within this new directory, create a file named "header-default.php" and paste this file
 * - That's it!
 *
 * @link https://wpforms.com/developers/how-to-customize-the-styles-on-the-email-template/
 */

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) exit;

$header_image = wpforms_setting( 'email-header-image', false );
?>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
    <!--[if gte mso 15]>
	<xml>
		<o:OfficeDocumentSettings>
		<o:AllowPNG/>
		<o:PixelsPerInch>96</o:PixelsPerInch>
		</o:OfficeDocumentSettings>
	</xml>
	<![endif]-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php echo get_bloginfo( 'name' ); ?></title>
    <style type="text/css">
        p {
            margin: 10px 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            display: block;
            margin: 0;
            padding: 0;
        }

        /* Adding this will make any image in your email template responsive and adjust to 100% of the width of the window */
        img,
        a img {
            border: 0;
            height: auto;
            outline: none;
            text-decoration: none;
            max-width: 100%;
        }

        body,
        #bodyTable,
        #bodyCell {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        #outlook a {
            padding: 0;
        }

        img {
            -ms-interpolation-mode: bicubic;
        }

        table {
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }

        .ReadMsgBody {
            width: 100%;
        }

        .ExternalClass {
            width: 100%;
        }

        p,
        a,
        li,
        td,
        blockquote {
            mso-line-height-rule: exactly;
        }

        /* This CSS will target any links in your email template */
        a[href^=tel],
        a[href^=sms] {
            color: #3b6a1b;
            cursor: default;
            text-decoration: none;
        }

        p,
        a,
        li,
        td,
        body,
        table,
        blockquote {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        .ExternalClass,
        .ExternalClass p,
        .ExternalClass td,
        .ExternalClass div,
        .ExternalClass span,
        .ExternalClass font {
            line-height: 100%;
        }

        a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }

        #bodyCell {
            padding: 50px 50px;
        }

        .templateContainer {
            max-width: 600px !important;
            border: 0;
        }

        a.mcnButton {
            display: block;
        }

        .mcnTextContent {
            word-break: break-word;
        }

        .mcnTextContent img {
            height: auto !important;
        }

        .mcnDividerBlock {
            table-layout: fixed !important;
        }

        /***** Make theme edits below if needed *****/
        /* Page - Background Style */
        body,
        #bodyTable {
            background-color: #ffffff;
        }

        /* Page - Heading 1 */
        h1 {
            color: #202020;
            font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
            font-size: 26px;
            font-style: normal;
            font-weight: bold;
            line-height: 125%;
            letter-spacing: normal;
            text-align: left;
        }

        /* Page - Heading 2 */
        h2 {
            color: #202020;
            font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
            font-size: 22px;
            font-style: normal;
            font-weight: bold;
            line-height: 125%;
            letter-spacing: normal;
            text-align: left;
        }

        /* Page - Heading 3 */
        h3 {
            color: #202020;
            font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
            font-size: 20px;
            font-style: normal;
            font-weight: bold;
            line-height: 125%;
            letter-spacing: normal;
            text-align: left;
        }

        /* Page - Heading 4 */
        h4 {
            color: #202020;
            font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
            font-size: 18px;
            font-style: normal;
            font-weight: bold;
            line-height: 125%;
            letter-spacing: normal;
            text-align: left;
        }

        /* Header - Header Style */
        #templateHeader {
            border-top: 0;
            border-bottom: 0;
            padding-top: 0;
            padding-bottom: 20px;
            text-align: center;
        }

        /* Body - Body Style */
        #templateBody {
            background-color: #FFFFFF;
            border-top: 0;
            border: 1px solid #c1c1c1;
            padding-top: 0;
            padding-bottom: 0px;
        }

        /* Body -Body Text */
        #templateBody .mcnTextContent,
        #templateBody .mcnTextContent p {
            color: #555555;
            font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
            font-size: 14px;
            line-height: 150%;
            text-align: left;
        }

        /* Body - Body Link */
        #templateBody .mcnTextContent a,
        #templateBody .mcnTextContent p a {
            color: #3b6a1b;
            font-weight: normal;
            text-decoration: underline;
        }

        /* Footer - Footer Style */
        #templateFooter {
            background-color: #ffffff !important;
            border-top: 0;
            border-bottom: 0;
            padding-top: 12px;
            padding-bottom: 12px;
        }

        /* Footer - Footer Text */
        #templateFooter .mcnTextContent,
        #templateFooter .mcnTextContent p {
            color: #3b6a1b !important;
            font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
            font-size: 12px;
            line-height: 150%;
            text-align: center;
        }

        /* Footer - Footer Link */
        #templateFooter .mcnTextContent a,
        #templateFooter .mcnTextContent p a {
            color: #3b6a1b !important;
            font-weight: normal;
            text-decoration: underline;
        }

        @media only screen and (min-width:768px) {
            .templateContainer {
                width: 600px !important;
            }
        }

        @media only screen and (max-width: 480px) {

            body,
            table,
            td,
            p,
            a,
            li,
            blockquote {
                -webkit-text-size-adjust: none !important;
            }
        }

        @media only screen and (max-width: 480px) {
            body {
                width: 100% !important;
                min-width: 100% !important;
            }
        }

        @media only screen and (max-width: 680px) {
            #bodyCell {
                padding: 20px 20px !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .mcnTextContentContainer {
                max-width: 100% !important;
                width: 100% !important;
            }
        }
    </style>
</head>

<body style="height: 100%;margin: 0;padding: 0;width: 100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #bb77ff;">
    <!-- Don't forget to run final template through http://templates.mailchimp.com/resources/inline-css/ -->
    <center>

        <!-- The inline CSS added to the table will change the background color -->
        <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 0;width: 100%;background-color: #6ea847;">
            <tr>
                <td align="center" valign="top" id="bodyCell" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 50px 50px;width: 100%;">
                    <!-- BEGIN TEMPLATE // -->
                    <!--[if gte mso 9]>
					<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
					<tr>
					<td align="center" valign="top" width="600" style="width:600px;">
					<![endif]-->
                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;border: 0;max-width: 600px !important;">
                        <?php 
						if ( !empty( $header_image ) ) {
							echo '<tr><td valign="top" align="center" id="templateHeader" style="padding-bottom:20px;text-align:center;">';
								echo '<img src="' . esc_url( $header_image ) . '" alt="' . get_bloginfo( 'name' ) . '" />';
							echo '</td></tr>';
						}
						?>
                        <tr>
                            <!-- The inline CSS added to the td will change the background color & border color -->

                            <td valign="top" id="templateBody" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #b2deb2;border-top: 0;border: 1px solid #3b6a1b;padding-top: 0;padding-bottom: 0px;">
                                <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                    <tbody class="mcnTextBlockOuter">
                                        <tr>
                                            <td valign="top" class="mcnTextBlockInner" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnTextContentContainer">
                                                    <tbody>
                                                        <tr>
                                                            <td valign="top" style="padding-top: 30px;padding-right: 30px;padding-bottom: 30px;padding-left: 30px;" class="mcnTextContent">

Create a folder on your desktop and call it wpforms-email. Once the folder is created, save the file with the snippet inside this folder and call it header-default.php.

We only changed these CSS classes.

  • img,a img
  • a[href^=tel],a[href^=sms]
  • #templateBody .mcnTextContent a, #templateBody .mcnTextContent p a
  • #templateFooter
  • #templateFooter .mcnTextContent, #templateFooter .mcnTextContent p
  • #templateFooter .mcnTextContent a, #templateFooter .mcnTextContent p a

We also added some inline CSS to the table as well.

<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;height: 100%;margin: 0;padding: 0;width: 100%;background-color: #6ea847;">

and the table data (td)

<td valign="top" id="templateBody" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #b2deb2;border-top: 0;border: 1px solid #3b6a1b;padding-top: 0;padding-bottom: 0px;">

It’s important to test these changes out before going live. If any of your color values aren’t changing, try adding !important to the CSS rule.

Uploading the file to your site

Once you’ve created this and made all your color changes, upload the wpforms-email folder to your theme’s root directory.

For example, in our tutorial, we’re using the GeneratePress theme and using a plugin called WP File Manager to access our root directory of the theme.

upload the new folder to your site to customize the styles for the email template

And that’s it! We’ve now customized the styles on the email template.

You can now see the changes made by customizing the styles of the email template

Would you like to also change or remove the footer text completely? There is an easy way to do this with a small PHP snippet. Check out the snippet on How to Remove or Change Email Notification Footer Text.

Filter Reference: wpforms_email_message

FAQ

Q: How to make notifications RTL?

A: To make sure the notifications appear RTL, you’d use this snippet.

/**
 * Customizing styles of the email notification
 *
 * @link https://wpforms.com/developers/how-to-customize-the-styles-on-the-email-template/
 */
  
function wpf_dev_email_message_custom_styles( $message ) {
     
    $custom_styles =
        '
        #templateBody {
            direction: rtl;
        }
        ';
 
        $message = preg_replace('/<style type="text\/css">(.*?)<\/style>/s', '<style type="text/css">$1' . $custom_styles . '</style>', $message);
 
        return $message;
     
}
   
add_filter( 'wpforms_email_message', 'wpf_dev_email_message_custom_styles', 10, 1);

Q: Is there any way to create your own email template?

A: Not at this time. WPForms currently doesn’t have a process that would allow you to create your own email template.

A: Of course! If you add this snippet to your site, you can easily show the thumbnail and the image name when your form collects uploaded images.

/**
 * Modify a {field_id=<ID>} smart tag value for file upload field in the email messages.
 *
 * @link https://wpforms.com/developers/how-to-customize-the-styles-on-the-email-template/
 */

function wpforms_render_file_upload_field( $value, $form_data, $fields, $entry_id, $smart_tag_object ) {

	// Get smart tag attributes to retrieve current field ID.
	$attributes = $smart_tag_object->get_attributes();

	// Loop through all fields in the form.
	foreach ( $fields as $field ) {

		// If the field is not current field and is not a file upload field - skip.
		if ( $field[ 'id' ] !== (int) $attributes[ 'field_id' ] || $field[ 'type' ] !== 'file-upload' ) {
			continue;
		}

		// It's our file upload field, reset the value.
		$value = '';

		// Loop through all files and build the output.
		foreach ( $field[ 'value_raw' ] as $file ) {
			$value .= sprintf(
				'%s<a href="%s" rel="noopener noreferrer" target="_blank" style="padding-left: 10px;">%s</a><br />',
				wpforms_get_file_icon_html( $file ),
				esc_url( $file[ 'value' ] ),
				esc_html( $file[ 'name' ] )
			);
		}
	}

	return $value;
}
add_filter( 'wpforms_smarttags_process_field_id_value', 'wpforms_render_file_upload_field', 10, 5 );

/**
 * Get file icon html.
 *
 * @link https://wpforms.com/developers/how-to-customize-the-styles-on-the-email-template/
 */

function wpforms_get_file_icon_html( $file_data ) {

	$src       = esc_url( $file_data[ 'value' ] );
	$ext_types = wp_get_ext_types();

	if ( ! in_array( $file_data[ 'ext' ], $ext_types[ 'image' ], true ) ) {
		$src = wp_mime_type_icon( wp_ext2type( $file_data[ 'ext' ] ) );
	} elseif ( $file_data[ 'attachment_id' ] ) {
		$image = wp_get_attachment_image_src( $file_data[ 'attachment_id' ], [ 16, 16 ], true );
		$src   = $image ? $image[0] : $src;
	}

	return sprintf( '<span class="file-icon"><img width="16" height="16" src="%s" alt="" /></span>', esc_url( $src ) );
}

This will change all your email notifications that include the File Upload field.

now the icon and image name for each image uploaded to the form will appear in each email notification

Q: Can I create a more compact view?

A: You can create a compact view for your email notification by adding this snippet to your site. If you need any assistance in how and where to add snippets to your site, please check out this tutorial.

/**
 * Compact view of the email notification
 *
 * @link https://wpforms.com/developers/how-to-customize-the-styles-on-the-email-template/
 */
  
function wpf_dev_email_message_custom_styless( $message ) {
     
    	$custom_styles =
        '
        #templateBody .mcnTextContent tbody { 
            display: flex;
        }
		
		/* Remove this block for preserving <br> tags - Used with checkbox/dropdown multiple values and address field value */
		#templateBody .mcnTextContent tbody td br { 
            display: none;
        }
		
        /* Change field value padding to match field label */
		#templateBody .mcnTextContent tbody tr:nth-child(2) td { 
            padding-bottom: 3px !important;
			padding-top: 20px !important;
        }
		
        /* Prevent field labels from word break and define max width for long labels */
		#templateBody .mcnTextContent tbody tr:nth-child(1) { 
            word-break: keep-all;
            max-width: 25%;
        }
        
        /* Field Label CSS to add colon after label and extra spacing */
		#templateBody .mcnTextContent tbody tr:nth-child(1) td:after { 
            content: ":";
			font-weight: bold;
			margin-right: 5px;
        }
        ';
 
        $message = preg_replace('/<style type="text\/css">(.*?)<\/style>/s', '<style type="text/css">$1' . $custom_styles . '</style>', $message);
 
        return $message;
     
}
   
add_filter( 'wpforms_email_message', 'wpf_dev_email_message_custom_styless', 10, 1);

compact view of the email notification