Digital Experience
Changing the default template of email notifications for forms responses

Changing the default template of email notifications for forms responses

by The Progress Team
Posted on November 22, 2012 0 Comments
Changing the default template of email notifications

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

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.

blogs Custom Forms Notifications Templates Tip of the Week
progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments

Comments are disabled in preview mode.
Follow us viaRSS Feed
 
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
More From Progress
 
 
 
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation