Welcome to ASP.NET! Nothing better in my opinion. Done ColdFusion, PHP, Oracle, etc. and love ASP.NET 100 times more than any of those.
So here are the steps one by one to copy the email form control with watermark text.
Check this out for some basics on where to store your custom files.
1). In CMSSiteManager>Development>Form Controls search for "e-mail" (with a dash)
2). Click the arrow to the left of the red X for the E-mail input control and select Clone
3). In the popup window enter the following values:
Display name: E-mail w/watermark
Code name: EmailWithWatermark
4). Check form clone control files
5). Enter the path ~/CMSFormControls/Custom/Inputs/EmailInputWatermark.ascx
6). Click clone.
7). Edit your newly created form control
8). On the properties tab add a new category named Email settings and move it to the top. (added for cosmetic reasons)
9). Add another new category named Watermark and move it to the top. (again cosmetic reasons)
10). Add a new property under the Watermark category called WatermarkText (type=text, size=500, Allow empty value=true, caption=Text, control=Localizable text box) and save
11). Add a new property under the property you just created called WatermarkCssClass (type=text, size=50, allow empty value=true, caption=Css class, control=Text box) and save
12). Open Visual Studio
13). Navigate to the file in step 5 and open the code behind file.
14). Replace all the code behind with code below. Assuming you are following the steps word for word, you shouldn't need to modify anything but if you haven't make sure the class name is the same in the code behind as it is in the .ascx file (in this case CMSFormControls_Custom_Inputs_EmailInputWatermark)
using System;
using System.Web.UI.WebControls;
using System.Collections;
using System.Collections.Generic;
using AjaxControlToolkit;
using CMS.CMSHelper;
using CMS.FormControls;
using CMS.FormEngine;
using CMS.GlobalHelper;
using CMS.PortalControls;
using CMS.SettingsProvider;
using CMS.ExtendedControls;
public partial class CMSFormControls_Custom_Inputs_EmailInputWatermark : FormEngineUserControl
{
#region "Constants"
protected const int AUTOPOSTBACK_TIMEOUT = 700;
#endregion
#region "Properties"
#region "Watermark properties"
/// <summary>
/// The text to show when the control has no value.
/// </summary>
public string WatermarkText
{
get
{
return ValidationHelper.GetString(GetValue("WatermarkText"), null);
}
set
{
SetValue("WatermarkText", value);
}
}
/// <summary>
/// The CSS class to apply to the TextBox when it has no value (e.g. the watermark text is shown).
/// </summary>
public string WatermarkCssClass
{
get
{
return ValidationHelper.GetString(GetValue("WatermarkCssClass"), "WatermarkText");
}
set
{
SetValue("WatermarkCssClass", value);
}
}
#endregion
/// <summary>
/// Gets or sets the enabled state of the control.
/// </summary>
public override bool Enabled
{
get
{
return base.Enabled;
}
set
{
base.Enabled = value;
txtEmailInput.Enabled = value;
}
}
/// <summary>
/// Gets or sets field value.
/// </summary>
public override object Value
{
get
{
return txtEmailInput.Text.Trim();
}
set
{
txtEmailInput.Text = (string)value;
}
}
/// <summary>
/// Gets ClientID of the textbox with emailinput.
/// </summary>
public override string ValueElementID
{
get
{
return txtEmailInput.ClientID;
}
}
private bool mAllowMultipleAddresses = false;
/// <summary>
/// Gets or sets if multiple e-mail addresses can be entered.
/// </summary>
public bool AllowMultipleAddresses
{
get
{
return mAllowMultipleAddresses;
}
set
{
mAllowMultipleAddresses = value;
}
}
/// <summary>
/// Gets or sets string that should be used to delimit multiple addresses (default separator is semicolon - ;).
/// </summary>
public string EmailSeparator
{
get;
set;
}
#endregion
#region "Methods"
/// <summary>
/// Registers script for layout.
/// </summary>
private void RegisterScript()
{
string postbackScript = @"
jQuery(function() {{
jQuery('.apbtbox')
.data('timeout', null)
.keyup(function(){
clearTimeout(jQuery(this).data('timeout'));
jQuery(this).data('timeout', setTimeout(function(){ " + ControlsHelper.GetPostBackEventReference(this, null) + @" }, " + AUTOPOSTBACK_TIMEOUT + @"));
});
}})";
ScriptHelper.RegisterJQuery(Page);
ScriptHelper.RegisterClientScriptBlock(Page, typeof(string), "autopostedbacktbox", ScriptHelper.GetScript(postbackScript));
}
/// <summary>
/// Page load.
/// </summary>
protected void Page_Load(object sender, EventArgs e)
{
// Set control style and css class
if (!string.IsNullOrEmpty(ControlStyle))
{
txtEmailInput.Attributes.Add("style", ControlStyle);
}
if (!string.IsNullOrEmpty(CssClass))
{
txtEmailInput.CssClass = CssClass;
CssClass = null;
}
// Set additional properties
AllowMultipleAddresses = ValidationHelper.GetBoolean(GetValue("allowmultipleaddresses"), AllowMultipleAddresses);
EmailSeparator = ValidationHelper.GetString(GetValue("emailseparator"), EmailSeparator);
}
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
if (HasDependingFields)
{
txtEmailInput.AddCssClass("apbtbox");
RegisterScript();
}
#region "Watermark extender"
// Watermark extender
// Disable watermark extender for nonempty fields (issue with value which is same as the watermark text)
string resolvedWatermarkText = CMSContext.CurrentResolver.ResolveMacros(WatermarkText);
if (!String.IsNullOrEmpty(WatermarkText) && !String.IsNullOrEmpty(resolvedWatermarkText) && !CMSString.Equals(txtEmailInput.Text, WatermarkText))
{
// Create extender
TextBoxWatermarkExtender exWatermark = new TextBoxWatermarkExtender();
exWatermark.ID = "exWatermark";
exWatermark.TargetControlID = txtEmailInput.ID;
exWatermark.EnableViewState = false;
Controls.Add(exWatermark);
// Initialize extender
exWatermark.WatermarkText = resolvedWatermarkText;
exWatermark.WatermarkCssClass = txtEmailInput.CssClass + " " + ValidationHelper.GetString(GetValue("WatermarkCssClass"), WatermarkCssClass);
}
#endregion
}
/// <summary>
/// Returns true if user control is valid.
/// </summary>
public override bool IsValid()
{
if (string.IsNullOrEmpty(txtEmailInput.Text.Trim()))
{
return true;
}
// Check if valid e-mail addresses were entered
bool validEmails = (AllowMultipleAddresses ? ValidationHelper.AreEmails(txtEmailInput.Text.Trim(), EmailSeparator) : ValidationHelper.IsEmail(txtEmailInput.Text.Trim()));
if (validEmails)
{
if (FieldInfo != null)
{
// Check regular expresion
if (!string.IsNullOrEmpty(FieldInfo.RegularExpression))
{
if (new Validator().IsRegularExp(txtEmailInput.Text.Trim(), FieldInfo.RegularExpression, "error").Result == "error")
{
ValidationError = FieldInfo.ValidationErrorMessage;
return false;
}
}
// Check min lenght
if ((FieldInfo.MinStringLength > 0) && (txtEmailInput.Text.Trim().Length < FieldInfo.MinStringLength))
{
ValidationError = FieldInfo.ValidationErrorMessage;
return false;
}
// Check max lenght
if ((FieldInfo.MaxStringLength > 0) && (txtEmailInput.Text.Length > FieldInfo.MaxStringLength))
{
ValidationError = FieldInfo.ValidationErrorMessage;
return false;
}
}
return true;
}
else
{
ValidationError = GetString("EmailInput.ValidationError");
return false;
}
}
#endregion
}
15). Your form control is complete now.
16). Test it out by going to a document type and adding a new field and selecting your newly created form control and adding a new doc type to your content tree.
There you have it email form control with watermark.