Easy and Simple Umbraco Contact Form

Umbraco is a great CMS, it simple, easily extendible and most important it is free. To make it more professional, you must add a contact form in your Umbraco site.

So below is a very simple template for you to use if you are looking for just that, its a usercontrol with a few styles and a couple of macro parameters.

ASCX

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ContactForm.ascx.cs" Inherits="ContactForm" %>

<asp:Literal ID="litError" runat="server" />

<div id="maincontactform">

    <dl>

        <dt><label for="<%=tbName.ClientID %>">Name*</label></dt>

        <dd><asp:TextBox ID="tbName" runat="server" CssClass="mftextbox" /></dd>

        <dt><label for="<%=tbEmail.ClientID %>">Email*</label></dt>

        <dd><asp:TextBox ID="tbEmail" runat="server" CssClass="mftextbox" /></dd>

        <dt><label for="<%=tbPhone.ClientID %>">Phone*</label></dt>

        <dd><asp:TextBox ID="tbPhone" runat="server" CssClass="mftextbox" /></dd>

        

        <dt><label for="<%=tbCountry.ClientID %>">Country</label></dt>

        <dd><asp:TextBox ID="tbCountry" runat="server" CssClass="mftextbox" /></dd>

        <dt><label for="<%=tbEnquiry.ClientID %>">Enquiry</label></dt>

        <dd><asp:TextBox ID="tbEnquiry" runat="server" TextMode="MultiLine" Rows="10" CssClass="mftextboxmulti" /></dd>

        

        <dt></dt>

        <dd><asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="BtnSubmitClick" CssClass="mfsubmitbutton" /></dd>

    </dl>

</div>

CodeBehind

using System;

using System.Text;

using System.Web.UI;

using umbraco;

    public partial class ContactForm : UserControl

    {

        // Macro Parameters

        public string EmailAddress { get; set; }

        public int ThankYouPage { get; set; }

        // Hold a couple of formatting strings for use later

        private const string ErrorFormat = "<p class=\"formerror\">{0}</p>";

        private const string EmailLineFormat = "<p><strong>{0}</strong>: {1}</p>";

        protected void BtnSubmitClick(object sender, EventArgs e)

        {

            // Quick check for mandatory fields

            if(string.IsNullOrWhiteSpace(tbName.Text) | string.IsNullOrWhiteSpace(tbEmail.Text) | string.IsNullOrWhiteSpace(tbPhone.Text))

            {

                // Found an empty field, return error

                litError.Text = string.Format(ErrorFormat, "Please complete all mandatory fields");

                return;

            }

            // No errors create email

            var email = new StringBuilder();

            email.AppendFormat(EmailLineFormat, "Name", tbName.Text);

            email.AppendFormat(EmailLineFormat, "Email", tbEmail.Text);

            email.AppendFormat(EmailLineFormat, "Phone", tbPhone.Text);

            email.AppendFormat(EmailLineFormat, "Country", tbCountry.Text);

            email.AppendFormat(tbEnquiry.Text);

            // Send the email

            library.SendMail(EmailAddress, EmailAddress, "Contact Form Enquiry", email.ToString(), true);

            // Redirect to thank you page

            Response.Redirect(library.NiceUrl(ThankYouPage));

        }

    }

Styles

/*--- Contact Form ---*/

dl { margin:12px 0; }

dt { padding:4px 0; font-weight:bold; }

dd { font-style:italic; padding:4px 0; }

.mftextbox { width:80%; padding:5px; font-size:20px; }

.mftextboxmulti { width:80%; padding:5px; font-size:12px; }

.mfsubmitbutton { font-size: 1.2em; padding: 3px 9px;}

p.formerror { font-weight: bold;color: red;}

That's it… Just add the macro parameters to your macro like below so it will work properly, add the email address you want the form to be sent to and also the thank you page to redirect the user to on successful sending.

NOTE: Don't forget, to use the umbraco.library.SendMail() you must have some SMTP settings in your web.config or it won't send.

Hopefully you'll end up with the below