In the past few weeks there has been increasing number of requests by our clients on how to make a custom template for forms notifications. With this blog post we will create one and register it in our project so that we can customize it further as we like.
Create the custom template
The first thing you need to do is to create an .htm file in your project which will be our custom template. Then paste the following HTML code in it:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>New form submission</title> </head> <body bgcolor="#f2f2f2" style="background-color: #f2f2f2; padding: 20px 0;"> <table bgcolor="#fff" width="640px" cellspacing="0" cellpadding="0"border="0" style="width: 640px; margin: 0 auto; padding: 0; background-color: #fff;"> <tbody> <tr> <td bgcolor="#f8f8f8" style="background-color: #f8f8f8; padding: 30px 30px 28px;"> <h1 style="color: #000; margin: 0; padding: 0; font-family: georgia, arial,verdana,sans-serif; font-style: italic; line-height: 1.2; font-size: 32px; font-weight: normal;">{|Form.ProjectName|}</h1> <span style="color: #333; margin: 0; padding: 0; font-family: arial,verdana,sans-serif; font-style: normal; line-height: 1.2; font-size: 11px; font-weight: normal;">{|Form.Host|}</span> </td> </tr> <tr> <td style="padding: 31px 30px 20px;"> <h2 style="color: #000; margin: 0; padding: 0; font-family: arial,verdana,sans-serif; line-height: 1.2; font-size: 22px; font-weight: normal; font-style: normal;"> New form submission</h2> </td> </tr> <tr> <td style="padding: 10px 30px 6px;"> <h3 style="color: #000; margin: 0; padding: 0; font-family: arial,verdana,sans-serif; line-height: 1.2; font-size: 16px; font-weight: normal; font-style: normal;"><em style="font-style: italic;"><a href="{|Form.Url|}" >{|Form.Title|}</a></em></h3> </td> </tr> <tr> <td style="padding: 0 30px 28px;"> <div style="font-family: arial,verdana,sans-serif; line-height: 1.2; font-size: 11px; font-weight: normal; font-style: normal;"> Submitted on {|Form.SubmittedOn|}, via IP {|Form.IpAddress|} </div> </td> </tr> <tr> <td style="padding: 20px 30px 28px;"> <span>{|Form.Fields|}</span> </td> </tr> </tbody> </table> </body></html>This is the default HTML template which we can now modify as we wish. You can also find it in Sitefinity’s SDK installation folder Content->Resources->WidgetTemplates.zip. For now just add some <p> or <h1> tag with some text, so that after the registration we ensure that we have switched the default template. Then we need to set the Build Action to Embedded Resource as it needs to be resolved from an embedded assembly in the next step.
Registering the template
In order to register your custom template you need to create an .aspx page and use the following code in its Page_Load method:
protected void Page_Load(object sender, EventArgs e) { var formsConfig = Config.Get<FormsConfig>(); var configManager = ConfigManager.GetManager(); formsConfig = configManager.GetSection<FormsConfig>(); var subject = "New form entry is submitted"; var template = "SitefinityWebApp.Templates.FormsNotification.MyTemplate.htm"; var assembly = "SitefinityWebApp"; formsConfig.Notifications.FormEntrySubmittedNotificationTemplateId = CreateFormsNotificationTemplate(subject, template, assembly); configManager.SaveSection(formsConfig); } public Guid CreateFormsNotificationTemplate(string subject, string templateName, string templateAssembly) { var notificationService = SystemManager.GetNotificationService(); var serviceContext = new ServiceContext("ThisApplicationKey", FormsModule.ModuleName); //create the new template var messageTemplate = new MessageTemplateRequestProxy(); messageTemplate.Subject = subject; messageTemplate.BodyHtml = Telerik.Sitefinity.Pages.Model.ControlTemplateResolver.ResolveTemplate(templateName , templateAssembly); var templateId = notificationService.CreateMessageTemplate(serviceContext, messageTemplate); return templateId; }Now build your solution and run the .aspx page in order to register the custom template. Note that you will need to run this page in the browser each time you make modifications to the template so that the new changes are applied to Sitefinity.
If our email notification settings are correct we should now receive a notification email on form submission with our custom template.
I have also uploaded an archive containing the files from the video here.
I hope you found the blog post useful. Any comments and suggestions are highly appreciated.