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

It is so easy to prevent your online forms from automated spam by simply adding RadCaptcha to your ASP.NET application. A flexible website security component, RadCaptcha will protect your registration, comment, poll, content submission, etc. It generates distorted images of letters and numbers that are easily decipherable to humans -- but not to spam bots. In essence, it allows you to focus on your code or content -- instead of on deleting spam.

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
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Captcha.Overview.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ 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" ID="RadFormDecorator1" runat="server" DecorationZoneID="zoneToDecorate" DecoratedControls="All" />
    <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