Send email with Umbraco Cloud

Written 11/20/2017

Umbraco Cloud and SMTP

There is no SMTP service in a native Umbraco Cloud solution. This is probably because Umbraco Cloud offers a trial solution, which would make it free and easy for spammers to abuse such an SMTP service to send lots of emails.

So as it is as of today, you will need to do a little work on your Umbraco Cloud solution, to make it possible to send emails from the website. I struggled a bit to find the best possible solution for my needs, so I am happy to share my findings, so that I can hopefully make it easier for my Umbraco friends :)

SendGrid

First of all there are a number of services offering a free SMTP server. Most of them will charge you, if you use the SMTP server a lot, but for a small website like mine, it is not an issue. I found SendGrid to be the best choice, so go ahead and sign up for a free account.

The Model

In your Umbraco Cloud solution create a model, with the properties needed for your email. It could be something like this:

public class ContactFormViewModel
{

[Display(Name = "Navn")]
[Required(ErrorMessage = "Skriv venligst dit navn")]
[StringLength(50, MinimumLength = 2, ErrorMessage = "Brug venligst et navn mellem to og 50 karakterer")]
public string Name { get; set; }

[Display(Name = "Telefon nummer")]
[Required(ErrorMessage = "Angiv venligst dit telefonnummer")]
[StringLength(26, MinimumLength = 8, ErrorMessage = "Brug venligst et validt telefon nummer")]
public string TelephoneNumber { get; set; }

[Display(Name = "Email addresse")]
[EmailAddress(ErrorMessage = "Invalid Email Address")]
public string FromMail { get; set; }

[Display(Name = "Website")]
[RegularExpression(@"^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$", ErrorMessage = "Invalid website adresse")]
public string Website { get; set; }

[Display(Name = "Besked")]
[StringLength(250, MinimumLength = 2, ErrorMessage = "Brug venligst en besked på mellem to og 250 karakterer")]
public string Message { get; set; }
}

Validation messages and display names are in Danish, but I am sure you get the point of the simple model :)

Controller

Now let us add a controller to our solution. Let the controller inherit from SurfaceController and create a SendEmail method. Something like this:

public class ContactFormController : SurfaceController
{
public ActionResult SendEmail(ContactFormViewModel model)
{
try
{
if (!string.IsNullOrWhiteSpace(model.Message))
model.Message = Umbraco.ReplaceLineBreaksForHtml(model.Message);
MailMessage mailMsg = new MailMessage();

mailMsg.To.Add(new MailAddress("[email protected]", "To Name"));
mailMsg.From = new MailAddress("[email protected]", "From YOUR Website");
mailMsg.Subject = "Message sent from your website";
mailMsg.Body = "Navn: " + model.Name + "<br />Telefon: " + model.TelephoneNumber + "<br />Email: " + model.FromMail + "<br />Website: " + model.Website + "<br />Besked: " + model.Message;
mailMsg.IsBodyHtml = true;


SmtpClient smtpClient = new SmtpClient();
smtpClient.Send(mailMsg);
return RedirectToCurrentUmbracoPage();
}
catch (Exception ex)
{
return RedirectToCurrentUmbracoPage("error=ohyeah");
}
} public ActionResult Sent()
{
return View();
}

Web Config

Now it is time to configure the SMTP service in the web.config file in the root of your solution. Open web.config and find the system.net/mailSettings section.

Set it up like this:

<system.net>
<mailSettings>
<smtp from="[email protected]">
<network host="smtp.sendgrid.net" password="Your SendGrid Password" userName="Your SendGrid Username" port="587" />
</smtp>
</mailSettings>
</system.net>

Remember to replace the values for password and username, with your password and username from SendGrid.
When this is done, you are actually able to send emails from your Umbraco Cloud website.

You can actually test if you have configured your SMTP service correctly by running a Health Check from the Umbraco backoffice.

Razor

We won't get anywhere without a razor file, in which we have our form. 

Create a page, and implement the needed form on the page. This could be an example, which match the model created earlier:

@using (Html.BeginUmbracoForm<ContactFormController>("SendEmail"))
{
@Html.AntiForgeryToken()

<div class="row">
<div class="form-group col-md-12">
@Html.TextBoxFor(m => m.Name, new { @class = "form-control", placeholder = "Navn" })
@Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
@Html.TextBoxFor(m => m.TelephoneNumber, new { @class = "form-control", placeholder = "Telefonnummer" })
@Html.ValidationMessageFor(model => model.TelephoneNumber)
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
@Html.TextBoxFor(m => m.FromMail, new { @class = "form-control", placeholder = "Email" })
@Html.ValidationMessageFor(model => model.FromMail)
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
@Html.TextBoxFor(m => m.Website, new { @class = "form-control", placeholder = "Website" })
@Html.ValidationMessageFor(model => model.Website)
</div>
</div>
<div class="form-group topbottompadding">
<button type="submit" class="btn btn-info pull-left">Send <span class="glyphicon glyphicon-send"></span></button>
</div>
}