Como criar um formulário de contato em Ajax para Umbraco

por Carlos Casalicchio

Ao criar uma página responsiva em Umbraco rapidamente encontra-se algumas restrições relativas ao que a atual oferece. E, apesar da comunidade já ter desenvolvido várias coisas úteis, algumas vezes não encontramos o que precisamos.

Por esse motivo acabei por desenvolvendo um formulário de email simples que possibilite o envio de e-mails em Ajax, sem Postback da página.

Para tanto, criei o formulário na página (está fora do escopo discutir o html envolvido na criação do formulário) como na figura:

Neste artigo, mostro como criar um formulário de contato em Ajax para Umbraco. O código do formulário é este:

Html

div class="contact_form">
    <div id="note"></div>
    <div id="fields">
        <form id="ajaxSendmail" action="">
            <input type="text" name="name" value="" placeholder="Name" />
            <input type="text" name="email" value="" placeholder="Email" />
            <textarea name="message" id="message" placeholder="Message"></textarea>
            <div class="clear"></div>
            <input type="reset" class="contact_btn" value="Clear Form" />
            <input type="submit" class="contact_btn send_btn" value="Send" />
            <div class="clear"></div>
        </form>
    </div>
</div>

CSS

#note {
            position: relative;
        }

            #note .notification_ok {
                position: absolute;
                top: 0;
                margin-top: 20px;
                padding: 7px 10px;
                text-align: center;
                text-transform: uppercase;
                background: #444;
                font-family: 'Lato', sans-serif;
                font-weight: 400;
                font-size: 14px;
                color: #fff;
            }

            #note .notification_error {
                position: absolute;
                top: 115px;
                font-family: 'Lato', sans-serif;
                font-weight: 400;
                font-size: 16px;
                color: #f00;
            }

Script AJAX

$("#ajaxSendmail").submit(function () {

            $(this).children().each(function () {
                $(this).css("border", "");
            });
            $('#note').html("");

            if ($("input[name='name']").val() === "" || $("input[name='email']").val() === ""
                || $("input[name='message']").val() === "") {
                $("#ajaxSendmail").children().each(function () {
                    if ($(this).val() === "") $(this).css("border", "2px solid #FF0000");
                });

                $('#note').html('<div class="notification_error">All values are required</div>');
                return false;
            }
            else {

                var str = $(this).serialize();

                $.ajax({
                    type: "POST",
                    url: "/SendMail.aspx",
                    data: str,
                    success: function (msg) {
                        // Message Sent - Show the 'Thank You' message and hide the form
                        if (msg.trim() == 'OK') {
                            result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
                            $("#fields").hide();
                        } else {

                            result = msg;
                        }
                        $('#note').html(result);
                    }
                });
                return false;
            }
        });

Para fazer o formulário funcionar, é preciso criar uma página macro (em Razor) que faça o processo de enviar o email:

Razor

@inherits umbraco.MacroEngines.DynamicNodeContext
@{
	var name = Request["name"];
	var email = Request["email"];
	var message = Request["message"];

	string host = "relay-hosting.secureserver.net",
                subject = "Contact Received from Site",
                body = "<h3>{0}</h3><p>From: {1}<br /><br /> Email: {2} </p><p>Message: {3}</p>",
                from = "mailer@zueuz.com",
                to = "email@myemail.com";
            int port = 25;

           System.Net.Mail.SmtpClient SmtpServer = new System.Net.Mail.SmtpClient(host, port);
           System.Net.Mail.MailMessage mail = new System.Net.Mail.MailMessage();

            mail.From = new System.Net.Mail.MailAddress(from, "Corporate Mailer");
            mail.To.Add(new System.Net.Mail.MailAddress(to, "Admin"));
            mail.Subject = subject;
            mail.Body = string.Format(body, subject, name, email, message);
            mail.IsBodyHtml = true;

	try
            {

                SmtpServer.Send(mail);
                <text>OK</text>;
            }
            catch (Exception e)
            {
                <text>@e.Message</text>;
            }

}

E também uma página sendmail

Webforms do Umbraco

<%@  Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>

       <asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
           <umbraco:macro alias="Sendmail" runat="server"></umbraco:macro>
       </asp:Content>

Com esses componentes o formulário já envia e-mails