Simple Contact Form Template For Umbraco

Sometimes when creating a new site for a client or a personal site, you just need a simple and quick contact form that you can just plugin or easily extend.

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