The <asp:CreateUserWizard /> control is another ASP.NET 2.0 feature that allows a web developer to quickly build a user registration form.

There are several ways to customize this control.  The default settings are shown here.  This article will cover how to customize both the opperation and the style of this control. 

 First, let's look at the code used to build this, and the web.config settings:

<asp:CreateUserWizard id="CreateUserWizard1" runat="server">
    <wizardSteps>
        <asp:CreateUserWizardStep id="CreateUserWizardStep1" runat="server">
        </asp:CreateUserWizardStep>
        <asp:CompleteWizardStep id="CompleteWizardStep1" runat="server">
        </asp:CompleteWizardStep>
    </wizardSteps>
</asp:CreateUserWizard> 

<membership defaultProvider="AspNetSqlMembershipProvider">
    <providers>
    <clear />
    <add name="AspNetSqlMembershipProvider"
       connectionStringName="connectionString"
       enablePasswordRetrieval="true"
       enablePasswordReset="true"
       requiresQuestionAndAnswer="true"
       applicationName="XeroOne"
       requiresUniqueEmail="true"
       passwordFormat="Hashed"
       maxInvalidPasswordAttempts="5"
       minRequiredPasswordLength="6"
       minRequiredNonalphanumericCharacters="0"
       passwordAttemptWindow="10"
       passwordStrengthRegularExpression=""
       type="System.Web.Security.SqlMembershipProvider"/>
  </providers>
</membership>

If you're not planning on allowing the user's to reset their own passwords, or to use an "I forgot" function, then you won't need to ask for a security question and answer.  These fields are easily removed by changing the web.config settings.

enablePasswordRetrieval="false"
enablePasswordReset="false"
requiresQuestionAndAnswer="false"

You can also force the users to create a strong password by requiring a specific number of symbols in the password (minRequiredNonalphanumericCharacters), or optionally use a regular expression (passwordStrengthRegularExpression) to specify the user must enter at least one uppercase letter, one number, and one symbol.

Next, let's make this control blend in a little better with our site's theme, and change some of the messages.

<asp:CreateUserWizard id="CreateUserWizard1" runat="server"
         invalidPasswordErrorMessage="Password must be at least 6 characters.">
     <titleTextStyle CssClass="wizardTitle" />
     <labelStyle CssClass="wizardLabel" />
     <continueButtonStyle CssClass="wizardButton" />
     <createUserButtonStyle CssClass="wizardButton" />
     <wizardSteps>
         <asp:CreateUserWizardStep id="CreateUserWizardStep1" runat="server" 
              title="Create a new user account"> 
         </asp:CreateUserWizardStep>
         <asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server">
         </asp:CompleteWizardStep>
    </wizardSteps>
</asp:CreateUserWizard> 

I'm not forcing my users to register a strong password, so telling them they have to enter 0 alphanumeric characters seemed pointless. Use the InvalidPasswordErrorMessage property to change the message displayed to the user when their password doesn't meet your criteria. I also changed the title that instructs the user what they are doing usng the CreateUserWizardStep's Title property.

I'm also using my style sheet to define how to display the title, the label that is next to each textbox, and the create user and continue buttons.  You haven't seen the continue button yet because it is the second step in the create user process.  The options are limitless with CSS, but in this example, I changed the text color, made the title bold, left aligned the label text, and added a background image to my button.

There are plenty of other options that allow you to change the text, messages, and styles of the rest of the control, but these are the ones I find myself changing most often.

Part 2 of this tutorial will go over creating additional fields and using the ASP.NET Profile provider.  

Read Part 2: Customizing the ASP.NET CreateUserWizard Control >