IMG-LOGO

How to add captcha code in DNN form?

andy - 04 Sep, 2013 5240 Views 0 Comment

Spam Emails are the most annoying things especially when you have a couple of forms on your site and when you check your emails all of them are spams email. To avoid the spams on your form, you can actually add a captcha code that will require the user to enter an image generated dynamically on the site. Luckly, DNN has the built in control for you to add it on your site form.

First important requirement is you have to add the DNN Framework control at the top code of your form.

/* include this namespace on the top of your code */
<%@ Register TagPrefix="dnn" Assembly="DotNetNuke" Namespace="DotNetNuke.UI.WebControls"%>

See below example in the user control form.

<table>
	<tbody>
		<tr>
			<td>Name:</td>
			<td>
				<asp:textbox id="txtName" runat="server" width="300"> <asp:requiredfieldvalidator id="reqName" runat="server" controltovalidate="txtName" display="Dynamic" errormessage="* Name is required"> </asp:requiredfieldvalidator></asp:textbox>
			</td>
		</tr>
		<tr>
			<td>Message:</td>
			<td>
				<asp:textbox id="txtMessage" runat="server" width="300" height="50" textmode="MultiLine"> <asp:requiredfieldvalidator id="reqMessage" runat="server" controltovalidate="txtMessage" display="Dynamic" errormessage="* Message is required"> </asp:requiredfieldvalidator></asp:textbox>
			</td>
		</tr>
		<tr>
			<td></td>
			<td>
				<dnn:captchacontrol id="ctlCaptcha" runat="server" cssclass="normal" captchalength="10" captchaheight="50" captchawidth="180" captchachars="1234567890" text="Enter the above captcha code"></dnn:captchacontrol>
			</td>
		</tr>
		<tr>
			<td></td>
			<td>
				<asp:button id="btnSubmit" runat="server" text="Submit"></asp:button>
			</td>
		</tr>
	</tbody>
</table> 

Below is the quick screenshot on how the html code will looks like.

dnn captcha code

Now lets have a look at the back end code. If you see carefully, the ctlCaptcha.IsValid determines if a captcha code has been entered correctly by user or not.

 
protected void btnSubmit_Click(object sender, EventArgs e) { 
/*** We use Page.IsValid to make sure that all the requiredfields are filled in***/
	if (Page.IsValid) { 
		/*** IsValid in here determine if the captcha code has already been entered correctly by user ***/
		if (ctlCaptcha.IsValid) { 
			/*** You can put any action in here as it has already passed the condition ***/
		} else { 
			/*** You can return an error message in here ***/
		} 
	} 
} 

Here is the list of captcha code properties that you need to know:

  • CaptchaWidth: The width of the captcha control.
  • CaptchaHeight: The height of the captcha control.
  • CaptchaLength: The length of the characters inside the captcha control.
  • CaptchaChars: The characters that will be used in the captcha control, dont use this attribute if you want to use random characters.
  • Text: This will be the Text Introduction to notify the user to enter the captcha code.
  • Text: This will be the Text Introduction to notify the user to enter the captcha code.
  • ErrorMessage: This will be the error message when a captcha code is entered wrong. Note: you can overwrite the error message in behind code as well.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Articles

How to change copyright text in DNN?

In this article, I am going to show you how to change the copyright text in DNN. Usually, a copyright text is located under the footer of the site template.