Free DNN E-Mail Contact Form

Almost every DNN website, big or small, has a contact form. Usually these forms are either built using a form manager such as XMod Pro or Dynamic Forms or they are a mangled version of the classic Feedback Module.

I’m not saying there is no place in the market for the form managers. When it comes to building workflow driven dynamic forms they are certainly worth considering. For websites with a more straightforward need they can be overkill and eat into your web development budget.

Using the old Feedback Module was the go-to solution for a quick contact form. It roughly did the job but it is neither pretty not easy for the average user to change. Now working with Razor scripts takes some getting used to but my hope is with this article you’ll be able to hit the ground running.

What is Razor

According to DNN “Razor is a view-engine option for ASP.NET that can be used to easily embed C# or VB code within an HTML page.”

In essence it gives us a middle ground between what DNN does natively and what we could do if we built our own module. It uses the Razor Script Host module to run your script on any page you wish.

The Form

I found a sample bootstrap contact form to use for this example. Please note that to use this example your skin will have to be using Bootstrap 3. I trimmed out some of the unnecessary bits to leave us with a form that looks like this:


This form is perfect for us as all the validation is client-side which keeps our server-side code to a minimum. You can take any form code and get it to work with this script just by matching up the form fields.

The Script

The script consists of three sections. The first section is the C# code which takes the form fields and puts the into an e-mail. Replace with the email address you want the forms to be sent to. This section also displays a thank you message once the email has been sent.

var toEmail = "";
var subject = "Contact Form Message";

    if (IsPost)  {
        var name = Request["name"];
        var email = Request["email"];
        var message = Request["message"];

        DotNetNuke.Services.Mail.Mail.SendMail(email, toEmail, "", subject, message, "", "", "", "", "", "");
        @:<div class="alert alert-success pull-left" id="form-error" role="alert">Thank you for your message</div>   

The second section is the form. The only code here is to ensure that we hide the form after the user has clicked send. You can replace this form with any other HTML so long as you have the three form fields called Name, Email and Message.

@if (!IsPost){
<div id="contactForm" class="form-horizontal col-sm-12">
    <h3>Leave a Message</h3>
          <div class="form-group"><label>Name</label><input name="Name" value="@Request[" class="form-control required" placeholder="Your name" data-placement="top" data-trigger="manual" data-content="Please enter your name" type="text" /></div>
          <div class="form-group"><label>E-Mail</label><input name="Email" value="@Request[" email"]"class="form-control email required" placeholder=" (so that we can contact you)" data-placement="top" data-trigger="manual" data-content="Please enter a valid e-mail address" type="text" /></div>
          <div class="form-group"><label>Message</label><textarea name="Message" class="form-control required" placeholder="Your message here.." data-placement="top" data-trigger="manual" data-content="Please leave a message">@Request["message"]</textarea></div>
          <div class="form-group"><button type="submit" class="btn btn-success pull-right">Send It!</button> 
          <div class="alert alert-danger pull-left hide" id="form-error" role="alert">There is an error on the form</div></div>

The final section is the JavaScript validation functions. These ensure that a name is entered, that the email address is formatted correctly and that a message has been entered.

<script type="text/javascript">
$.fn.goValidate = function() {
    var $form = this,
        $inputs = $form.find(':input');
    var validators = {
        name: {
            regex: /^[A-Za-z]{3,}$/
        pass: {
            regex: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/
        email: {
            regex: /^[\w\-\.\+]+\@("@")[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/
    var validate = function(klass, value) {
        var isValid = true,
            error = '';
        if (!value &amp;&amp; /required/.test(klass)) {
            error = 'This field is required';
            isValid = false;
        } else {
            klass = klass.split(/\s/);
            $.each(klass, function(i, k){
                if (validators[k]) {
                    if (value &amp;&amp; !validators[k].regex.test(value)) {
                        isValid = false;
                        error = validators[k].error;
        return {
            isValid: isValid,
            error: error
    var showError = function($input) {
        var klass = $input.attr('class'),
            value = $input.val(),
            test = validate(klass, value);
        if (!test.isValid) {
            if(typeof $"shown") == "undefined" || $"shown") == false){
      else {
    $inputs.keyup(function() {
    $inputs.on('', function () {
    $inputs.on('', function () {
    $form.submit(function(e) {
        $inputs.each(function() { /* test each input */
            if ($(this).is('.required') || $(this).hasClass('invalid')) {
        if ($form.find('input.invalid').length) { /* form is not valid */
    return this;

That's It!

Download the full script and try it today. There's plenty of scope to expand this form for those that are feeling brave. You could add additional fields or even record the details in the database.

Good luck and let us know how you get on!