+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Changing the default template of email notifications for forms responses

by Pavel Benov

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 temlplateAssembly)
        {
            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
                , temlplateAssembly);
            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 Sitefinitiy.

If our email notification settings are correct we should now receive a notification email on form submission with our custom template.

A video is always useful so I have prepared one for the purpose of this blog post:

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.

5 comments

Leave a comment
  1. Steve Nov 23, 2012
    What's the timeline to work this into the UI?

    Clients won't be able to build the project if they need a change to the template (since it's an embedded resource)
  2. Diego Dec 06, 2012
    After trying this, there is no longer anything in the body of the email.  How can I roll back?
  3. Scott Rozman Dec 20, 2012
    Diego, it sounds like you may have missed the step of setting the build action on the .htm to be an embedded resource. I was doing this recently and forgot that step. The result was a blank email.
  4. WmBlanks Mar 15, 2013
    Or, you can just go to the DB and update this table: sf_notif_msg_template

    The misspelled value can be found in the 'body_html' field.
  5. Kierstin Mar 14, 2016

    Would the video be stored somewhere else? I can't get it to load here, or the files. 

    Leave a comment