contact.html

---
layout: default
title: Contact Us
extra_js:
  - validator.min.js
---
<div class="container">
    <div class="row">
        <div class="col-sm-12 alert alert-success alert-dismissible hidden" role="alert">
            <button type="button" class="close" data-dismiss="alert" title="dismiss"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <strong>Success!</strong> Thank you for your message.
        </div>
        <div class="col-sm-12 starter-template">
            <h1>Contact Us</h1>
        </div>
        <div class="col-sm-8 col-sm-offset-2">
            <p>Hi there! Use this form to contact the Code for DC leadership about anything.</p>
            <p>If you are looking to partner with us, please help us out with <a href="/resources/partnering.html">some preliminary information</a>. And if you're in government, we recommend that you check out <a href="https://www.civichacking.guide/">How to Talk to Civic Hackers</a>, by Mark Headd.</p>
            <p>If you are reporting a code of conduct issue, please check our <a href="/resources/codeofconduct.html#Making-a-Report">sample report</a> so that we can help more effectively.</p>
        </div>
        <div class="col-sm-8 col-sm-offset-2">
            <form id="contactus" role="form">
                <div class="form-group">
                    <label for="email" class="control-label">Email</label>
                    <input type="email" class="form-control" id="contactEmail" placeholder="Email (optional)" aria-describedby="helpBlock">
                    <span id="helpBlock" class="help-block">Be sure to include your email if expecting a response from Code For DC!</span>
                </div>
                <div class="form-group">
                    <label for="name" class="control-label">Name</label>
                    <input type="text" class="form-control" id="contactName" placeholder="Name (optional)">
                </div>
                <div class="form-group">
                    <label for="subject" class="control-label">Subject</label>
                    <input type="text" class="form-control" id="contactSubject" placeholder="Subject (optional)">
                </div>
                <div class="form-group">
                    <label for="message" class="control-label">Message</label>
                    <textarea name="message" class="form-control" id="contactMessage" rows="6" placeholder="What's up?" required></textarea>
                    <div class="help-block with-errors"></div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary" id="submitmessage">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

{% include _global_js.html %}

<script type="text/javascript">

$(document).ready(function(){

    // Form validation
    $("#contactus").validator();

    // Send message to Slack
    $("#contactus").submit(function (event) {
        event.preventDefault();
        var payload = JSON.stringify({
            "email": $("#contactEmail").val(),
            "name": $("#contactName").val(),
            "subject": $("#contactSubject").val(),
            "message": $("#contactMessage").val()
        });
        $("button#submitmessage").html("<i class='fa fa-spinner fa-spin'>");
        $.ajax({
            url: "https://slackfordc.herokuapp.com/contact",
            type: "POST",
            data: payload,
            contentType: "application/json",
            success: function(){
                $("#contactEmail").val("");
                $("#contactName").val("");
                $("#contactSubject").val("");
                $("#contactMessage").val("");
                $(".alert").removeClass("hidden");
                $("button#submitmessage").text("Submit");
                $("html, body").animate({scrollTop: 0}, "fast");
            }
        });
    });
});

</script>