Sending confirmation email to the user when using EPiServer XForms

Posted on October 17, 2009 by Frederik Vig in Code Snippet, EPiServer

Plenty of websites have contact forms or other forms that users fills out to either make a request or provide feedback. This is something that many sites use instead of making their email address public available. To avoid receiving to much spam. The thing that I don’t like about these forms is that mostly I don’t get any confirmation after I’ve filled it out.

This is also true when using EPiServer XForms. When creating a new form the editor can choose between saving the form data in the database, emailing it, or doing both. Sending a confirmation email to the user is not a choice.

Example

If we take a look at the documentation – Developing with XForms – we see that we have the AfterSubmitPostedData event that we can use to add the extra logic we need :).

Okay lets open up our EPiServer project in Visual Studio and go to the Global.asax.cs file. Here we see the different methods being attached to various XForm events.

public void XForm_ControlSetup(object sender, EventArgs e)
{
    XFormControl control = (XFormControl)sender;
 
    control.BeforeLoadingForm += new LoadFormEventHandler(XForm_BeforeLoadingForm);
    control.ControlsCreated += new EventHandler(XForm_ControlsCreated);
    control.BeforeSubmitPostedData += new SaveFormDataEventHandler(XForm_BeforeSubmitPostedData);
    control.AfterSubmitPostedData += new SaveFormDataEventHandler(XForm_AfterSubmitPostedData);
}

Lets go down to the XForm_AfterSubmitPostedData method. Before we can start coding we need to figure out a way to get the users email address. If this is a community site where users register and provide this information we can just get it from there. But if not we need them to provide it for us. The easiest way is to use a TextBox where the user can type in their email address. To be able to recognize this TextBox in our code we need to use the same name in every form that needs this functionality.

In the code below I’ve hard coded the TextBox name (UserEmail), but you can make it more flexible by storing it in a Property or the web.config file.

public void XForm_AfterSubmitPostedData(object sender, SaveFormDataEventArgs e)
{
	var control = (XFormControl)sender;
	var pageBase = control.Page as PageBase;
 
	string emailaddress = e.FormData.GetValue("UserEmail");
	if (!string.IsNullOrEmpty(emailaddress))
	{
		e.FormData.MailTo = emailaddress;
		EmailHelper.SendUserEmail(e.FormData, pageBase.CurrentPage);
	}
 
	if (control.FormDefinition.PageAfterPost != 0)
	{
		PageData redirectPage = DataFactory.Instance.GetPage(new PageReference(control.FormDefinition.PageAfterPost));
		control.Page.Response.Redirect(redirectPage.LinkURL);
		return;
	}
 
	//After the form has been posted we remove the form elements and add a "thank you message".
	control.Controls.Clear();
	Label label = new Label();
	label.CssClass = "thankyoumessage";
	label.Text = LanguageManager.Instance.Translate("/form/postedmessage");
	control.Controls.Add(label);
}

The EmailHelper class with the SendUserEmail method.

using System;
using System.Collections.Specialized;
using System.Net.Mail;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using EPiServer.Core;
using EPiServer.XForms;
 
namespace FV.Templates.FV.Util
{
    public static class EmailHelper
    {
        public static bool SendUserEmail(XFormData formData, PageData currentPage)
        {
            if (formData == null)
            {
                return false;
            }
 
            try
            {
                var message = new MailMessage();
                var mailFrom = string.Format("no-reply@{0}", HttpContext.Current.Request.Url.Host);
 
                if (!string.IsNullOrEmpty(formData.MailFrom))
                {
                    mailFrom = formData.MailFrom;
                }
 
                message.From = new MailAddress(mailFrom);
                message.To.Add(formData.MailTo);
 
                message.Subject = formData.MailSubject;
                message.IsBodyHtml = true;
                message.BodyEncoding = Encoding.UTF8;
 
                var body = new StringBuilder();
                body.Append("<html><body><table border=\"0\">");
 
                NameValueCollection postedValues = formData.GetValues();
 
                foreach (string key in postedValues)
                {
                    body.Append("<tr><td>");
                    body.Append(key).Append(": ");
                    body.Append("</td><td>");
                    body.Append(postedValues[key]);
                    body.Append("</td></tr>");
                }
 
                body.Append("</table></body></html>");
 
                message.Body = body.ToString();
                var smtp = new SmtpClient();
                smtp.Send(message);
                return true;
            }
            catch (Exception ex)
            {
                // Remember to do some logging here..
                return false;
            }
        }
    }
}

Since we both have the XFormData object and the CurrentPage PageData object we can do a lot more than what I’ve illustrated in the code above. You can for instance create an email template in EPiServer that editors can edit that you use to send to as a standard “thank you email” to the user.

Testing

To test this code create a new XForm and add a TextBox with the name UserEmail.

Try sending it, you should receive an email with the form data (form fields and their values). Remember that for this to work you also need to configure the SMTP settings in your web.config file.

When developing locally, I usually set it to point to a local directory that the emails get sent to.

<mailSettings>
	<smtp deliveryMethod="SpecifiedPickupDirectory">
                <!-- You need to give the Network Service or ASPNET user modify permissions on your directory  -->
		<specifiedPickupDirectory pickupDirectoryLocation="E:\temp\maildrop"/>
	</smtp>
</mailSettings>

You should now receive an email that looks something like this.

Download the code

Other resources

Related Posts: