Captcha

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadCaptcha - Telerik's ASP.NET Captcha


Captcha Protection Mode Enabled
 


Settings
Choose Protection Mode:
select
Text Length:
select
Choose Font:
select
Text Color:
select
Background-Color:
select
Background Noise Level:
select
Line Noise Level:
select
Font Warp Factor:
select

(does not trigger page validation)

tlrk.it/1dSH9jP To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/1dSH9jP

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 80+ 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.

Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular Captcha demo, you can use the following path to find it in the sample website application:
captcha/examples/overview

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

Resources

C# VB
Show code in new window Demo isolation steps
<%@ 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" %>
<%@ Register Src="~/Captcha/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Demo for ASP.NET Captcha component | RadCaptcha by Telerik</title>
     <style type="text/css">
          .label {
               font-weight: bold;
          }
     </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <script type="text/javascript">
          function fillInvisibleTextBox(sender) {
              var invisibleTextBox = $get("<%=RadCaptcha1.ClientID %>_InvisibleTextBox");
               if (sender.checked) {
                    invisibleTextBox.value = "Filled";
               }
               else {
                    invisibleTextBox.value = "";
               }
          }
     </script>
     <br />
     <table>
          <tr>
               <td style="vertical-align: top;">
                    <div style="width: 400px; height: 30px;">
                         <asp:Label ID="lblModeEnabled" runat="server" Text="Captcha Protection Mode Enabled"
                              CssClass="label"></asp:Label>
                    </div>
                    <div style="width: 400px;">
                         <telerik:RadCaptcha ID="RadCaptcha1" runat="server" ErrorMessage="Page not valid. The code you entered is not valid."
                              ValidationGroup="Group">
                         </telerik:RadCaptcha>
                    </div>
                    <asp:Label ID="lblCorrectCode" runat="server" ForeColor="Green"></asp:Label>
                    <br />
                    <div style="margin: 10px 0 0 0;">
                         <asp:Button ID="btnVerify" runat="server" Text="Submit Page" Width="150px" ValidationGroup="Group"
                              OnClick="btnVerify_Click"></asp:Button>
                    </div>
               </td>
               <td style="padding: 0 0 0 8px; vertical-align: top;">
                    <fieldset title="Settings" style="width: 400px; padding: 0 0 0 10px;">
                         <legend>Settings</legend>
                         <br />
                         <div>
                              <label for="protection">
                                   Protection Strategy:</label>
                              <div style="padding: 10px;">
                                   <table style="width: 400px;">
                                        <tr>
                                             <td style="text-align: right; width: 200px;">
                                                  <asp:Label ID="Label2" runat="server" Text="Choose Protection Mode:"></asp:Label>
                                             </td>
                                             <td>
                                                  <telerik:RadComboBox ID="ProtectionMode" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ProtectionMode_SelectedIndexChanged">
                                                       <Items>
                                                            <telerik:RadComboBoxItem Value="Captcha" Text="Captcha" Selected="True"></telerik:RadComboBoxItem>
                                                            <telerik:RadComboBoxItem Value="Invisible TextBox" Text="Invisible TextBox"></telerik:RadComboBoxItem>
                                                            <telerik:RadComboBoxItem Value="Minimum Submission" Text="Minimum Submission"></telerik:RadComboBoxItem>
                                                       </Items>
                                                  </telerik:RadComboBox>
                                             </td>
                                        </tr>
                                   </table>
                              </div>
                              <asp:Panel ID="PanelCaptcha" runat="server">
                                   <label for="textsettings">
                                        Text Settings:</label>
                                   <div style="padding: 10px;">
                                        <table style="width: 400px">
                                             <tr>
                                                  <td style="text-align: right; width: 200px;">
                                                       <asp:Label ID="lblTextLength" runat="server" Text="Text Length: "></asp:Label>
                                                  </td>
                                                  <td>
                                                       <telerik:RadComboBox ID="TextLength1" runat="server" OnSelectedIndexChanged="TextLength1_SelectedIndexChanged">
                                                            <Items>
                                                                 <telerik:RadComboBoxItem Value="3" Text="3 characters"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Value="4" Text="4 characters"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Value="5" Text="5 characters" Selected="True"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Value="6" Text="6 characters"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Value="7" Text="7 characters"></telerik:RadComboBoxItem>
                                                            </Items>
                                                       </telerik:RadComboBox>
                                                  </td>
                                             </tr>
                                             <tr>
                                                  <td style="text-align: right">
                                                       <asp:Label ID="lblFontFamily" runat="server" Text="Choose Font: "></asp:Label>
                                                  </td>
                                                  <td>
                                                       <telerik:RadComboBox ID="FontFamily1" runat="server" OnSelectedIndexChanged="FontFamily1_SelectedIndexChanged">
                                                            <Items>
                                                                 <telerik:RadComboBoxItem Text="Courier New" Value="Courier New" Selected="True">
                                                                 </telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Tahoma" Value="Tahoma"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Times New Roman" Value="Times New Roman"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Verdana" Value="Verdana"></telerik:RadComboBoxItem>
                                                            </Items>
                                                       </telerik:RadComboBox>
                                                  </td>
                                             </tr>
                                             <tr>
                                                  <td style="text-align: right">
                                                       <asp:Label ID="Label1" runat="server" Text="Text Color: "></asp:Label>
                                                  </td>
                                                  <td>
                                                       <telerik:RadComboBox ID="Color1" runat="server" OnSelectedIndexChanged="Color1_SelectedIndexChanged">
                                                            <Items>
                                                                 <telerik:RadComboBoxItem Text="Gray" Value="Gray" Selected="True"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Red" Value="Red"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Green" Value="Green"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Blue" Value="Blue"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Black" Value="Black"></telerik:RadComboBoxItem>
                                                            </Items>
                                                       </telerik:RadComboBox>
                                                  </td>
                                             </tr>
                                             <tr>
                                                  <td style="text-align: right">
                                                       <asp:Label ID="lblChooseBColor" runat="server" Text="Background-Color: "></asp:Label>
                                                  </td>
                                                  <td>
                                                       <telerik:RadComboBox ID="ddlChooseColor" runat="server" OnSelectedIndexChanged="ddlChooseColor_SelectedIndexChanged">
                                                            <Items>
                                                                 <telerik:RadComboBoxItem Text="White" Value="White" Selected="True"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Black" Value="Black"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Red" Value="Red"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Green" Value="Green"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Blue" Value="Blue"></telerik:RadComboBoxItem>
                                                            </Items>
                                                       </telerik:RadComboBox>
                                                  </td>
                                             </tr>
                                        </table>
                                   </div>
                                   <label for="imagenoise">
                                        Image Noise:</label>
                                   <div style="padding: 10px;">
                                        <table style="width: 400px;">
                                             <tr>
                                                  <td style="text-align: right; width: 200px;">
                                                       <asp:Label ID="lblBacgroundNoise" runat="server" Text="Background Noise Level: "></asp:Label>
                                                  </td>
                                                  <td>
                                                       <telerik:RadComboBox ID="BackNoise1" runat="server" OnSelectedIndexChanged="BackNoise1_SelectedIndexChanged">
                                                            <Items>
                                                                 <telerik:RadComboBoxItem Text="None"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Low" Selected="True"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Medium"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="High"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Extreme"></telerik:RadComboBoxItem>
                                                            </Items>
                                                       </telerik:RadComboBox>
                                                  </td>
                                             </tr>
                                             <tr>
                                                  <td style="text-align: right">
                                                       <asp:Label ID="lblLineNoise" runat="server" Text="Line Noise Level: "></asp:Label>
                                                  </td>
                                                  <td>
                                                       <telerik:RadComboBox ID="LineNoise1" runat="server" OnSelectedIndexChanged="LineNoise1_SelectedIndexChanged">
                                                            <Items>
                                                                 <telerik:RadComboBoxItem Text="None"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Low" Selected="True"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Medium"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="High"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Extreme"></telerik:RadComboBoxItem>
                                                            </Items>
                                                       </telerik:RadComboBox>
                                                  </td>
                                             </tr>
                                             <tr>
                                                  <td style="text-align: right">
                                                       <asp:Label ID="lblFontWarp1" runat="server" Text="Font Warp Factor: "></asp:Label>
                                                  </td>
                                                  <td>
                                                       <telerik:RadComboBox ID="FontWarp1" runat="server" OnSelectedIndexChanged="FontWarp1_SelectedIndexChanged">
                                                            <Items>
                                                                 <telerik:RadComboBoxItem Text="None"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Low" Selected="True"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Medium"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="High"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Text="Extreme"></telerik:RadComboBoxItem>
                                                            </Items>
                                                       </telerik:RadComboBox>
                                                  </td>
                                             </tr>
                                        </table>
                                   </div>
                                   <div style="padding: 5px 0 15px 0;">
                                        <asp:Button ID="Button1" runat="server" Text="Update Changes" Width="150px" CausesValidation="false">
                                        </asp:Button>
                                        <br />
                                        (does not trigger page validation)
                                   </div>
                              </asp:Panel>
                              <asp:Panel ID="PanelMinTimeout" runat="server">
                                   <label for="">
                                        Minimum Submision Timeout:</label>
                                   <div style="padding: 10px;">
                                        <table style="width: 300px;">
                                             <tr>
                                                  <td style="text-align: right; width: 150px;">
                                                       <asp:Label ID="lblMinSubTimeout" runat="server" Text="Minimum Timeout:"></asp:Label>
                                                  </td>
                                                  <td>
                                                       <telerik:RadComboBox AutoPostBack="true" ID="MinSubTimeout1" runat="server" OnSelectedIndexChanged="MinSubTimeout1_SelectedIndexChanged">
                                                            <Items>
                                                                 <telerik:RadComboBoxItem Value="3" Text="3 seconds" Selected="True"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Value="6" Text="6 seconds"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Value="9" Text="9 seconds"></telerik:RadComboBoxItem>
                                                                 <telerik:RadComboBoxItem Value="12" Text="12 seconds"></telerik:RadComboBoxItem>
                                                            </Items>
                                                       </telerik:RadComboBox>
                                                  </td>
                                             </tr>
                                        </table>
                                   </div>
                              </asp:Panel>
                              <asp:Panel ID="PanelHiddenTB" runat="server">
                                   <strong>Invisible Text Box:</strong>
                                   <div style="padding: 5px;">
                                        <table>
                                             <tr>
                                                  <td style="text-align: left">
                                                       <input id="cbHiddenTB1" type="checkbox" name="cbHiddenTB1" onclick="fillInvisibleTextBox(this);"
                                                            runat="server">
                                                       <asp:Label ID="lblShowHiddenBox" runat="server" Text="Fill-in invisible RadCaptcha TextBox to cause page invalidation"></asp:Label>
                                                  </td>
                                             </tr>
                                        </table>
                                   </div>
                              </asp:Panel>
                         </div>
                    </fieldset>
               </td>
          </tr>
     </table>
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/Captcha.png" AlternateText="tlrk.it/1dSH9jP" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/1dSH9jP">tlrk.it/1dSH9jP</a>
    </div>
    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here