Pages

Wednesday, January 25, 2012

Web Forms for Marketers – Email confirmation

For one of my last projects we’re using the email address as a username. In this project people can register them self by entering a registration form, and to create this registration form I used the Web Forms for Marketers module form Sitecore. When I created the registration form I came realize that I want people to confirm their email and password. One of the standard field types that comes with the WFM is the password confirmation, but there’s no confirmation for email. So I tried to create one with the password confirmation as example.

I took the steps below to createan email confirmation field type.

Step 1

In the content editor go to the Field Types folder of WFM, copy the Password-Confirmation to the Custom folder and rename it to Email-Confirmation.

In the content of this item, add the E-mail validation in the treelist of validations don’t change the already selected validation. Now change the User Control field to the following path: “/sitecore modules/web/Web Forms for Marketers/UI/UserControl/EmailConfirmation.ascx”

The next thing is to rename the first child of the Email-confirmation item from “Password” to “Email”. In the content change the Title Property field to “EmailTitle”, and the Default Title field from “Password” to “Email”.

Step 2
Open the project in Visual Studio and go “sitecore modules\Web\Web Forms for Marketers\UI\UserControl\PasswordConfirmation.ascx”, copy this file and rename it to EmailConfirmation.ascx. I changed everything with the word password to email, but that is something you have to see for yourself.

<%@ Control Language="C#" AutoEventWireup="true" Inherits="SitecoreSolutions.Form.UI.UserControls.EmailConfirmation" %>
<%@ Register TagPrefix="wfmcustom" Namespace="Sitecore.Form.Web.UI.Controls" Assembly="Sitecore.Forms.Custom" %>

Create a code file to inherit from and fill it with the code below (which I got with reflector from the passwordconfirmation code file). In the code change the SubFieldIds.ConfirmationId and the SubFieldIds.EmailId to the id’s of the items below the Email-Confirmation field type.

using Sitecore.Form.Core.Attributes;
using SitecoreSolutions.Form.Core.Configuration;
using Sitecore.Form.Core.Controls;
using Sitecore.Form.Core.Controls.Data;
using Sitecore.Form.Core.Utility;
using Sitecore.Form.Core.Visual;
using Sitecore.Form.Web.UI.Controls;
using System;
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using Label = System.Web.UI.WebControls.Label;

namespace SitecoreSolutions.Form.UI.UserControls
{
 public class EmailConfirmation : ValidateUserControl, IHasTitle
 {
  protected Panel emailBorder;
  protected global::Sitecore.Form.Web.UI.Controls.Label emailTitle;
  protected Panel emailPanel;
  protected TextBox email;
  protected Label emailHelp;
  protected Panel confirmationBorder;
  protected global::Sitecore.Form.Web.UI.Controls.Label confirmationTitle;
  protected Panel confirmationPanel;
  protected TextBox confirmation;
  protected Label confimationHelp;

  public override string ID
  {
   get
   {
    return this.email.ID;
   }
   set
   {
    this.email.ID = value;
    this.emailTitle.AssociatedControlID = value;
    base.ID = value + "border";
   }
  }

  [Localize]
  [VisualFieldType(typeof(TextAreaField))]
  [VisualProperty("Email Help:", 200)]
  [VisualCategory("Appearance")]
  public string EmailHelp
  {
   get
   {
    return this.emailHelp.Text;
   }
   set
   {
    this.emailHelp.Text = value;
    if (!string.IsNullOrEmpty(this.emailHelp.Text))
     this.emailHelp.Style.Remove("display");
    else
     this.emailHelp.Style["display"] = "none";
   }
  }

  [VisualProperty("Confirm Email Help:", 500)]
  [Localize]
  [VisualCategory("Appearance")]
  [VisualFieldType(typeof(TextAreaField))]
  public string ConfirmationHelp
  {
   get
   {
    return this.confimationHelp.Text;
   }
   set
   {
    this.confimationHelp.Text = value;
    if (!string.IsNullOrEmpty(this.confimationHelp.Text))
     this.confimationHelp.Style.Remove("display");
    else
     this.confimationHelp.Style["display"] = "none";
   }
  }

  [DefaultValue("scfEmailConfirmation")]
  [VisualFieldType(typeof(CssClassField))]
  [VisualProperty("Css Class:", 600)]
  public new string CssClass
  {
   get
   {
    return this.Attributes["class"];
   }
   set
   {
    this.Attributes["class"] = value;
   }
  }

  [DefaultValue("Email")]
  [VisualProperty("Email Title:", 190)]
  [Localize]
  [VisualFieldType(typeof(EditField))]
  public string EmailTitle
  {
   get
   {
    return this.emailTitle.Text;
   }
   set
   {
    this.emailTitle.Text = value;
   }
  }

  [DefaultValue("Confirm Email")]
  [Localize]
  [VisualProperty("Confirm Email Title:", 300)]
  [VisualFieldType(typeof(EditField))]
  public string ConfirmationTitle
  {
   get
   {
    return this.confirmationTitle.Text;
   }
   set
   {
    this.confirmationTitle.Text = value;
   }
  }

  [VisualProperty("Validation:", 790)]
  [VisualCategory("Validation")]
  [VisualFieldType(typeof(SelectPredefinedValidatorField))]
  [DefaultValue("")]
  public string PredefinedValidator { get; set; }

  [VisualFieldType(typeof(RegexField))]
  [DefaultValue("")]
  [VisualCategory("Validation")]
  [VisualProperty("Regular Expression:", 800)]
  public string RegexPattern { get; set; }

  [VisualCategory("Validation")]
  [VisualProperty("Maximum Length:", 2000)]
  [DefaultValue(256)]
  public int MaxLength
  {
   get
   {
    return this.email.MaxLength;
   }
   set
   {
    this.email.MaxLength = value;
    this.confirmation.MaxLength = value;
   }
  }

  [VisualProperty("Minimum Length:", 1000)]
  [DefaultValue(0)]
  [VisualCategory("Validation")]
  public int MinLength { get; set; }

  public override ControlResult Result
  {
   get
   {
    return new ControlResult(this.ControlName, (object)this.email.Text, global::Sitecore.StringExtensions.StringExtensions.FormatWith("secure:{0}", new object[1] {(object) this.email.Text}));
   }
  }

  protected override Control ValidatorContainer
  {
   get
   {
    return (Control)this.emailBorder;
   }
  }

  protected override Control InnerValidatorContainer
  {
   get
   {
    return (Control)this.emailPanel;
   }
  }

  public string Title
  {
   get
   {
    if (string.IsNullOrEmpty(this.EmailTitle) || string.IsNullOrEmpty(this.ConfirmationTitle))
     return string.Empty;
    return string.Join("-", new string[2]
        {
          this.EmailTitle,
          this.ConfirmationTitle
        });
   }
   set
   {
   }
  }

  public EmailConfirmation()
  {
   this.CssClass = "scfEmailConfirmation";
  }

  public override bool SetValidatorProperties(BaseValidator validator)
  {
   base.SetValidatorProperties(validator);
   object obj = (object)null;
   if (validator is ICloneable)
    obj = ((ICloneable)validator).Clone();
   validator.ErrorMessage = global::Sitecore.StringExtensions.StringExtensions.FormatWith(validator.ErrorMessage, (object)this.EmailTitle, (object)this.MinLength, (object)this.MaxLength, (object)this.ConfirmationTitle);
   validator.Text = global::Sitecore.StringExtensions.StringExtensions.FormatWith(validator.Text, (object)this.EmailTitle, (object)this.MinLength, (object)this.MaxLength, (object)this.ConfirmationTitle);
   validator.ToolTip = global::Sitecore.StringExtensions.StringExtensions.FormatWith(validator.ToolTip, (object)this.EmailTitle, (object)this.MinLength, (object)this.MaxLength, (object)this.ConfirmationTitle);
   BaseValidator baseValidator1 = validator;
   string str = baseValidator1.CssClass + string.Join(string.Empty, new string[2]
      {
        " confirmationControlId.",
        this.confirmation.ID
      });
   baseValidator1.CssClass = str;
   if (obj != null && obj is BaseValidator)
   {
    BaseValidator baseValidator2 = (BaseValidator)obj;
    baseValidator2.ErrorMessage = global::Sitecore.StringExtensions.StringExtensions.FormatWith(baseValidator2.ErrorMessage, (object)this.ConfirmationTitle, (object)this.MinLength, (object)this.MaxLength, (object)this.EmailTitle);
    baseValidator2.Text = global::Sitecore.StringExtensions.StringExtensions.FormatWith(baseValidator2.Text, (object)this.ConfirmationTitle, (object)this.MinLength, (object)this.MaxLength, (object)this.EmailTitle);
    baseValidator2.ToolTip = global::Sitecore.StringExtensions.StringExtensions.FormatWith(baseValidator2.ToolTip, (object)this.ConfirmationTitle, (object)this.MinLength, (object)this.MaxLength, (object)this.EmailTitle);
    baseValidator2.ID = baseValidator2.ID + "confirmation";
    baseValidator2.ControlToValidate = this.confirmation.ID;
    if (validator.Attributes["inner"] == "1")
     this.confirmationPanel.Controls.Add((Control)baseValidator2);
    else
     this.confirmationBorder.Controls.Add((Control)baseValidator2);
   }
   return true;
  }

  protected override void OnLoad(EventArgs e)
  {
   base.OnLoad(e);
   string str1 = string.Join(string.Empty, new string[4] {" fieldid.", this.FieldID, "/", SubFieldIds.ConfirmationId} );
   TextBox textBox1 = this.email;
   
   string str2 = textBox1.CssClass + string.Join(string.Empty, new string[4] {" fieldid.", this.FieldID, "/", SubFieldIds.EmailId} );
   textBox1.CssClass = str2;
   TextBox textBox2 = this.confirmation;
   string str3 = textBox2.CssClass + str1;
   textBox2.CssClass = str3;
   MarkerLabel markerLabel1 = (MarkerLabel)WebUtil.FindFirstOrDefault(this.ValidatorContainer, (Func)(c => c is MarkerLabel));
   if (markerLabel1 == null)
    return;
   MarkerLabel markerLabel2 = (MarkerLabel)markerLabel1.Clone();
   markerLabel2.ID = markerLabel1.ID + "confirmationmarker";
   this.confirmationBorder.Controls.Add((Control)markerLabel2);
  }
 }
}

Step 3

To use the new field type open the Form Designer of a form and a new field, give it a title and select the Email-Confirmation as field type. In the appearance section on the left you see the properties appear that you can use for the email confirmation. Now save the form, publish and check the form in your site.

1 comment:

  1. don't know if it's the appropriate place here, but is it possible to have html in the email confirmation message - sorry I'm a newbie :-)

    ReplyDelete