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.
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.
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"}
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.
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.
And that’s it! We’ve now customized the styles on 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.
Related
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 ) {
// get the language of the email
$email_language = get_locale(); // assumes you are using WordPress localization function
// check if the email language requires RTL direction
$rtl_languages = array('ar', 'he_IL', 'fa'); // add any other RTL languages as needed
$direction = in_array($email_language, $rtl_languages) ? 'rtl' : 'ltr';
// set the direction based on the email language
$custom_styles = '#templateBody {
direction: ' . $direction . ';
}';
// apply the custom styles to the email
$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);
Alternatively, you could just open the form builder, click on the Notifications tab and inside the Message field replace the {all_fields} Smart Tag with this
<b style="direction: rtl !important;">{all_fields}</b>
Q: Can I show a thumbnail of the images uploaded instead of the link?
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.
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);
Q: Why are there 2 different directories for templates?
A: Within WPForms template directory, you’ll notice /wpforms/includes/emails/templates and /wpforms/templates/emails. There are differences between these 2 folders, so if you’re creating your own template, please be sure to follow the guide above for naming and storing your files. The email template found in the /wpforms/includes/ directory is only used to generate content for Notification emails related to the forms.
The /wpforms/templates/ folder contains various files, with the ones labeled with general used for system-related emails such as when a form import process is completed. The templates labeled with summary are used for the Email Summaries template.
Q: Can I create my own email template?
Please know that creating your own template is a very advanced and custom way of approaching this and can cause issues if you’re not comfortable with understanding, creating and reading code as well as understanding how email templates work. Creating your own template is only recommended for highly advanced users. This type of customization is outside the scope of support. Remember when making any changes to your theme and plugins that upon updates to these themes and plugins, your changes will be over written unless you use a Child Theme to create your customizations.
A: Yes! Inside the WPForms » Settings » Email tab, select HTML Template and save your settings.
The reason for this is because the HTML Template will look for particular php files stored inside a folder in your theme’s root directory called wpforms-emails
The HTML email is broken down into several sections (php files) and they are:
- header-default.php – you can alter any styling listed here in the header.
- body-default.php – you can change or add anything you’d like to see appear just before the fields are listed out in the email notification.
- field-default.php – this file will run through each field label and field value when using the
{all_fields}Smart Tag. In this file you could add/change anything you want to appear before the field label or value but also add/change anything before the fields and values display or just after they display. - footer-default.php – in this file you can add or remove anything from the email notification footer.
You can see these original files, located inside the plugin, by opening your WPForms plugin download under the path /wpforms/includes/emails/templates. You can copy the files mentioned above and store them inside a folder on your desktop called wpforms-emails. From here you can make your desired changes and then upload the wpforms-emails file (including the files inside this folder) into your theme’s root directory by following the same method as above to to upload the file to your site.
