Putting together forms in Umbraco when you’re reasonably new to the platform can be a bit of work even for those who are very familiar with MVC. Handling the post-back of the form within Umbraco and working with Surface Controllers takes a bit of time to get your head around (although not too much time, to be fair). If you want to get your Umbraco site more powerful with cheap cost, You must try asphostportal.com. Their team is so expert in Umbraco, you can get fast and clear solution with them.
Back to the topic. There are already a fair number of tutorials on how to create a contact form in Umbraco on the web but many of these deal with older versions (i.e. v5.0 and earlier), so I’ve put together a quick rundown of my approach for version 7 in case others are looking for the same material.
The “How”
First, here’s my Controller code:
namespace AcuIT.Controllers
{
public class ContactController : SurfaceController
{
[ChildActionOnly]
public ActionResult ContactForm()
{
// In case you need it...
var currentNode = Umbraco.TypedContent(UmbracoContext.PageId.GetValueOrDefault());
var model = new ContactModel();
return PartialView("ContactForm", model);
}
[HttpPost]
public ActionResult ContactForm(ContactModel model)
{
if (ModelState.IsValid)
{
var sb = new StringBuilder();
sb.AppendFormat("<p>Message: {0}</p>", model.Message);
sb.AppendFormat("<p>Email from website: {0}</p>", model.Subject);
sb.AppendFormat("<p>Name: {0}</p>", model.Name);
sb.AppendFormat("<p>Email: {0}</p>", model.Email);
sb.AppendFormat("<p>Phone: {0}</p>", model.Phone);
SmtpClient smtp = new SmtpClient();
MailMessage message = new MailMessage();
message.To.Add(new MailAddress(ConfigurationManager.AppSettings["ContactAddress"]));
message.Sender = new MailAddress(model.Email);
message.Body = sb.ToString();
message.IsBodyHtml = true;
try
{
smtp.Send(message);
}
catch (SmtpException smtpEx)
{
// Log or manage your error here, then...
return RedirectToUmbracoPage(1063); // <- My published error page.
}
return RedirectToUmbracoPage(model.RedirectPage);
}
return CurrentUmbracoPage();
}
}
}The model:
namespace AcuIT.Models
{
public class ContactModel
{
[Required]
public string Subject { get; set; }
[Required]
public string Name { get; set; }
[Required]
public string Email { get; set; }
public string Phone { get; set; }
[Required]
public string Message { get; set; }
public int RedirectPage { get; set; }
}
}The partial view:
@inherits Umbraco.Web.Mvc.UmbracoViewPage<AcuIT.Models.ContactModel>
@using (Html.BeginUmbracoForm<AcuIT.Controllers.ContactController>("ContactForm", new { RedirectPage = 1064 }))
{
<div class="row">
<div class="small-10">
<div class="row">
<div class="small-3 columns">
<label for="Name" class="right inline">Name</label>
</div>
<div class="small-9 columns">
<input type="text" placeholder="Your name" id="Name" name="Name" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label for="Email" class="right inline">Email</label>
</div>
<div class="small-9 columns">
<input type="email" placeholder="Your email address" id="Email" name="Email" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label for="Subject" class="right inline">Subject</label>
</div>
<div class="small-9 columns">
<input type="text" placeholder="Regarding..." id="Subject" name="Subject" />
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label for="Message" class="right inline">Message</label>
</div>
<div class="small-9 columns">
<textarea id="Message" name="Message"></textarea>
</div>
</div>
</div>
<div class="small-10">
<div class="row">
<div class="small-9 small-offset-3 columns">
<input type="submit" class="button tiny" value="Send" />
</div>
</div>
</div>
</div>
}There is honestly nothing fancy happening here. The controller and model sit in the main Umbraco project’s respective folders; the partial view is in my MacroPartials folder.
Mail settings are held in the System.Net section of the Web.Config file. That’s really all there is to it.
Hope that helps!