Azure Function Contact Form

index.html

<form id="contactForm" accept-charset="UTF-8" role="form">
    <label for="name">Your Name</label>
    <input type="text" id="name" name="fromName" required placeholder=" "  aria-labelledby="name"/>

    <label for="email">Email Address</label>
    <input type="email" id="email" name="fromEmail" required placeholder=" "  aria-labelledby="email"/>
    <div>
      An email address is required.
    </div>

    <label for="message">Message</label>
    <textarea id="message" name="body" aria-labelledby="message"></textarea>

    <input type="submit" value="Send" />
</form>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    var url = "{URL to my function}";
    $("form").on('submit', function (event) {

        event.preventDefault();

        // grab contact form data
        var data = $(this).serialize();

        $("#contactForm").html("<br /><br /><div class='center loader'></div>");

        // hide prior errors, disable inputs while we're submitting
        $("#contactFormError").hide();
        $("#contactForm input").prop('disabled', true);

        // back in my day, we had to AJAX uphill both ways, in the snow, through cross-iframe scripts
        $.ajax({
            type: "POST",
            url: url,
            data: data,
            dataType: "text",
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            success: function (respData) {
                $("loader").hide();
              if (respData == "Success")
              {
                // Yay, success!!
                $("#contactForm").html("<div style='padding: 5em 1em; text-align: center; color: #008800'>Thanks for contacting me</div>");
              }
              else
              {
                // Boo, error...
                $("#contactFormError").html("<div style='padding: 1em; text-align: center; color: #660000'>Sorry, an error occurred</div>");
                $("#contactFormError").show();
                $("#contactForm input").prop('disabled', false);
              }
            },
            error: function (jqXHR) {
                // Boo, error...
                $("loader").hide();
                $("#contactFormError").html("<div style='padding: 1em; text-align: center; color: #660000'>Sorry, an error occurred</div>");
                $("#contactFormError").show();
                $("#contactForm input").prop('disabled', false);
            }
        });
    });
</script>

Submit.cs

 public static class Submit
    {
        [FunctionName("Submit")]
        public static async Task<IActionResult> Run(
            [HttpTrigger(AuthorizationLevel.Function, "get", "post", Route = null)] HttpRequest req,
            ILogger log)
        {
            // Getting Form Data items from Request
            var from = req.Form["fromEmail"].ToString();
            var fromName = req.Form["fromName"].ToString();
            var body = req.Form["body"].ToString();

            // Ensure items needed to send email are present
            if ((from ?? fromName ?? body) == null) {
                return new BadRequestObjectResult("Failure");
            }

            log.LogInformation($"Contact form submitted by {fromName} <{from}>\r\nBody: {body}");


            // Build SendGrid Object and Send Email
            var apiKey = Environment.GetEnvironmentVariable("SendGridApiKey");
            var client = new SendGridClient(apiKey);
            var to = new EmailAddress(Environment.GetEnvironmentVariable("ToEmail"));
            var msg = MailHelper.CreateSingleEmail(new EmailAddress(Environment.GetEnvironmentVariable("AdminEmail")), to, $"New Email from {fromName} <{from}>", body, body);
            var response = await client.SendEmailAsync(msg);

            return response.StatusCode == System.Net.HttpStatusCode.Accepted
                    ? (ActionResult)new OkObjectResult($"Success")
                    : new BadRequestObjectResult("Failure");
        }
    }