Email Templating with Umbraco

Every site today needs the ability to send emails. Be it to site administrators for contact forms to transaction receipts  for purchases made online. Such communications are imperative to let you and your customers know that information has been processed and there is a definitive track record everyone can refer back to once they close down their browsers and leave the confirmation page. Emails sent from websites should also allow for customisation and personalisation so the recipient knows the information is for them and not a generic template that contains no personal details.

Previously email templates were a very static thing. You would fill in a contact us form and upon submission you may or may not get an email that would contain limited information that simply stated “We have received your request and will be in touch soon”. There was nothing personal about it. The email was usually a plain text email too so it could be viewed on all forms of email platforms from Outlook to Gmail and Hotmail. Today that is not the case. Today you need to be about to have graphical content, related content links back to your site, reply links and all this information in a personalised format that tells you it email is for you and not you and 100 other people.

Using Umbracos Document Types and a custom Emailer class you can set up your site to load documents that can be used as HTML templates for your emails. Using some replacement strings you can then replace content within your template to personalise the content and then send it to the recipient. The methods used are quite simple.

1. In your Umbraco admin create a new Document Type called ‘Email Template’
2. Give this Document Type some fields that are used for sending emails such as Subject, Sender Email, Sender Name, Recipient Email, Recipient Name, Cc Listing, Bcc Listing, Body and Email Type. Email Type will be used to load the template using the Umbraco UQuery call to load by NodeTypeAlias and the property.
3. Go to the Content section of Umbraco and create a new Email Template Document Type. In this instance we can enter the Email Type as ‘Contact Us Form’ which will be used to load the template. The Body of the template should be some WYSIWYG content telling the user their details have been received and they will be contacted. As most contact us forms include details such as Name, Email and Enquiry we put some replacement placeholders into the Body that will be replaced with their entered content (e.g. %%Name%%, %%Email%%, %%Body%%). You can also update the Body content to put in a Logo and some footer links giving it more style provided it is all compliant to email standards.
4. From here the template is ready to go.

 

You will then need you EmailController class that handles the loading of the template, parsing the users unique content and sending the email on its way. The basis of the EmailController should contain the following properties:

public class EmailController {

public Node EmailTemplate { get; set; } // current Umbraco Node containing template properties

public string Subject { get; set; }

public string SenderEmail { get; set; }

public string SenderName { get; set; }

public string RecipientEmail { get; set; }

public string RecipientName { get; set; }

public string Body { get; set; }

public string CcListing { get; set; }

public string BccListing { get; set; }

public Dictionary<string, string> ReplacementStrings { get; set; }

...

public EmailController(string TemplateCode) ...

This constructor is in charge with loading the template by its Email Type code and setting some properties based on what is set in the template Node properties. If the email is being sent to a customer the RecipientEmail and RecipientName fields  would be blank in the template as they are set on the page responsible for sending the email.  The constructor is there to place all our defaults in a state that can be easily used. 

public void ParseContent() ...

This method is called to scan the Body content for any replacement strings (e.g. %%Name%%, %%Email%%, %%Body%%, etc...) and replace them with the equivalent items in the ReplacementStrings Dictionary property. For example if the Contact Us form has a field for Email there would be a ReplacementString with the key %%Email%% and value myemail@email.com. The ParseContent method  loops through the entries in the ReplacmentString property and replaces the matching Key items in the Body property with the  Value in the ReplacementString corresponding Key.

public void Send() ...

This method will send your email. This creates a MailMessage object and populates all the necessary fields using the EmailController properties. Recipients and Senders are set and all Cc and Bcc recipients are added to the mail object. The content type is set to HTML and finally a SmtpClient is created and the email sent.

The EmailController is only concerned with loading the template by its code, parsing content and sending off the email. It does not need to send out static content but loads all content dynamically from the Email Template and parses in the unique personalised settings before sending.

Once the template and the email controller are in place the loading and sending of the email is easy to achieve. Once the user has submitted their Contact Us request and the form is deemed valid we load our template using by calling the EmailController constructor, set the unique fields for the ReplacementStrings Dictionary property and send the email. The following is all the code then required to achieve this:

EmailController emailController = new EmailController("ContactUs");

emailController.ReplacementStrings.Add("%%Name%%", Name);

emailController.ReplacementStrings.Add("%%Email%%", Email);

emailController.ReplacementStrings.Add("%%Enquiry%%", Enquiry);

emailController.ParseContent();

emailController.Send();

As seen above sending a personalised email is now a simple case of calling the EmailController, adding in your unique details, parsing the content and calling the send method. The common EmailController library ensures that all emails sent from the site can use a single point of call from which you can add more features such as file attachments. It can then be reused for other Umbraco projects as it is not specific to any one website due to its generic nature. You can make it as complex or simple as you like. One add-on could be adding a wrapper template that is placed around all your emails. The benefit of this is creating a standard header and footer for all emails sent from the site that is managed from one location and not each Email Template.

Happy Coding.