New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms Captcha Overview


Captcha Protection Mode Enabled


  • Demo Configurator
Protection Strategy
  • Choose Protection Mode:
    Captcha
Text Settings
  • Text Length:
    5 characters
  • Choose Font:
    Courier New
  • Text Color:
    Gray
  • Background-Color:
    White
Image Noise
  • Background Noise Level:
    Low
  • Line Noise Level:
    Low
  • Font Warp Factor:
    Low

About RadCaptcha for ASP.NET AJAX

The captcha control helps you prevent your online forms from automated spam. The UI component generates distorted images of letters and numbers that are easily decipherable to humans, but not to automated programs like spam bots.

RadCaptcha and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Three Modes for Protection - you can easily define which strategies to be used for spam protection
  • Set Custom Error Message - the error message that is displayed when the condition being validated fails
  • Background and Line Noise Level of the Captcha Image - you can easily control the background and the line noise of the Image by setting the respective value (None, Low, Medium, High or Extreme)
  • Font Family and Font Warp of the Captcha Image - you can easily choose which font family to be used for the Image text
  • Text Length and Possible Characters of the Captcha Image - the default length of the text is 5 characters, and the characters could be either letters or either numeric characters
  • Maximum Time Interval of the Captcha Image - the maximum number of minutes the Captcha Image will be cached and valid
  • Minimum Timeout - minimum number of seconds the form must be displayed before it is valid. If you're too fast, you must be a robot
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Captcha.Overview.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript">
        function fillInvisibleTextBox(sender) {
            var invisibleTextBox = $get("<%=RadCaptcha1.ClientID %>_InvisibleTextBox");
            if (sender.checked) {
                invisibleTextBox.value = "Filled";
            }
            else {
                invisibleTextBox.value = "";
            }
        }
    </script>
    <br />
    <telerik:RadFormDecorator RenderMode="Lightweight" runat="server" DecoratedControls="All" DecorationZoneID="zoneToDecorate" />
    <div class="demo-containers">
        <div class="demo-container" id="zoneToDecorate">
            <table>
                <tr>
                    <td>
                        <div>
                            <asp:Label ID="lblModeEnabled" runat="server" Text="Captcha Protection Mode Enabled"
                                CssClass="label"></asp:Label>
                        </div>
                        <div>
                            <telerik:RadCaptcha ID="RadCaptcha1" runat="server" ErrorMessage="Page not valid. The code you entered is not valid."
                                ValidationGroup="Group">
                                <CaptchaImage ImageCssClass="imageClass" />
                            </telerik:RadCaptcha>
                        </div>
                        <asp:Label ID="lblCorrectCode" runat="server" ForeColor="Green"></asp:Label>
                        <br />
                        <div>
                            <telerik:RadButton RenderMode="Lightweight" ID="btnVerify" runat="server" Text="Submit Page" Width="150px"
                                ValidationGroup="Group" OnClick="btnVerify_Click">
                            </telerik:RadButton>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Protection Strategy"
                    Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <asp:Label ID="Label2" runat="server" Text="Choose Protection Mode:"></asp:Label>
                            <qsf:DropDownList ID="ProtectionMode" runat="server" AutoPostBack="true">
                                <Items>
                                    <telerik:DropDownListItem Value="Captcha" Text="Captcha" Selected="True"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="Invisible TextBox" Text="Invisible TextBox"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="Minimum Submission" Text="Minimum Submission"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn ID="CaptchaConfiguratorColumn1" runat="server" Title="Text Settings"
                        Size="Medium">
                        <ul class="fb-group">
                            <li>
                                <asp:Label ID="lblTextLength" runat="server" Text="Text Length: "></asp:Label>
                                <qsf:DropDownList ID="TextLength1" runat="server">
                                    <Items>
                                        <telerik:DropDownListItem Value="3" Text="3 characters"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Value="4" Text="4 characters"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Value="5" Text="5 characters" Selected="True"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Value="6" Text="6 characters"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Value="7" Text="7 characters"></telerik:DropDownListItem>
                                    </Items>
                                </qsf:DropDownList>
                            </li>
                            <li>
                                <asp:Label ID="lblFontFamily" runat="server" Text="Choose Font: "></asp:Label>
                                <qsf:DropDownList ID="FontFamily1" runat="server">
                                    <Items>
                                        <telerik:DropDownListItem Text="Courier New" Value="Courier New" Selected="True">
                                        </telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Tahoma" Value="Tahoma"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Times New Roman" Value="Times New Roman"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Verdana" Value="Verdana"></telerik:DropDownListItem>
                                    </Items>
                                </qsf:DropDownList>
                            </li>
                            <li>
                                <asp:Label ID="Label1" runat="server" Text="Text Color: "></asp:Label>
                                <qsf:DropDownList ID="Color1" runat="server">
                                    <Items>
                                        <telerik:DropDownListItem Text="Gray" Value="Gray" Selected="True"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Red" Value="Red"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Green" Value="Green"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Blue" Value="Blue"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Black" Value="Black"></telerik:DropDownListItem>
                                    </Items>
                                </qsf:DropDownList>
                            </li>
                            <li>
                                <asp:Label ID="lblChooseBColor" runat="server" Text="Background-Color: "></asp:Label>
                                <qsf:DropDownList ID="ddlChooseColor" runat="server">
                                    <Items>
                                        <telerik:DropDownListItem Text="White" Value="White" Selected="True"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Black" Value="Black"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Red" Value="Red"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Green" Value="Green"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Blue" Value="Blue"></telerik:DropDownListItem>
                                    </Items>
                                </qsf:DropDownList>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn ID="CaptchaConfiguratorColumn2" runat="server" Title="Image Noise"
                        Size="Medium">
                        <ul class="fb-group">
                            <li>
                                <asp:Label ID="lblBacgroundNoise" runat="server" Text="Background Noise Level: "></asp:Label>
                                <qsf:DropDownList ID="BackNoise1" runat="server">
                                    <Items>
                                        <telerik:DropDownListItem Text="None"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Low" Selected="True"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Medium"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="High"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Extreme"></telerik:DropDownListItem>
                                    </Items>
                                </qsf:DropDownList>
                            </li>
                            <li>
                                <asp:Label ID="lblLineNoise" runat="server" Text="Line Noise Level: "></asp:Label>
                                <qsf:DropDownList ID="LineNoise1" runat="server">
                                    <Items>
                                        <telerik:DropDownListItem Text="None"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Low" Selected="True"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Medium"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="High"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Extreme"></telerik:DropDownListItem>
                                    </Items>
                                </qsf:DropDownList>
                            </li>
                            <li>
                                <asp:Label ID="lblFontWarp1" runat="server" Text="Font Warp Factor: "></asp:Label>
                                <qsf:DropDownList ID="FontWarp1" runat="server">
                                    <Items>
                                        <telerik:DropDownListItem Text="None"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Low" Selected="True"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Medium"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="High"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Text="Extreme"></telerik:DropDownListItem>
                                    </Items>
                                </qsf:DropDownList>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn ID="CaptchaConfiguratorColumn3" runat="server" Size="Narrow">
                        <ul class="fb-group">
                            <li>
                                <qsf:Button ID="Button1" runat="server" Text="Update Changes" Width="150px" CausesValidation="false">
                                </qsf:Button>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn ID="MinSubmissionConfiguratorColumn1" runat="server" Title="Minimum Submision Timeout"
                        Size="Medium">
                        <ul class="fb-group">
                            <li>
                                <asp:Label ID="lblMinSubTimeout" runat="server" Text="Minimum Timeout:"></asp:Label>
                                <qsf:DropDownList AutoPostBack="true" ID="MinSubTimeout1" runat="server">
                                    <Items>
                                        <telerik:DropDownListItem Value="3" Text="3 seconds" Selected="True"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Value="6" Text="6 seconds"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Value="9" Text="9 seconds"></telerik:DropDownListItem>
                                        <telerik:DropDownListItem Value="12" Text="12 seconds"></telerik:DropDownListItem>
                                    </Items>
                                </qsf:DropDownList>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn ID="HiddenTBConfiguratorColumn1" runat="server" Title="Invisible Text Box"
                        Size="Wide">
                        <ul class="fb-group">
                            <li><span class="checkbox">
                                <input id="cbHiddenTB1" type="checkbox" name="cbHiddenTB1" onclick="fillInvisibleTextBox(this);"
                                    runat="server"></span>
                                <asp:Label ID="lblShowHiddenBox" runat="server" Text="Fill-in invisible RadCaptcha TextBox to cause page invalidation"></asp:Label>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance