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 you@yourdomain.com 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 = "you@domain.com";
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, "", "", "", "", "", "");
@:Thank you for your message
}
}
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){
}
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.
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!