contact.html

---
layout: page
---

<!-- Section: Contact -->
<section id="contact">
    <div class="wrapper">
        <h1><span class="material-icons">email</span>Contact</h1>

        <div class="content-and-side-content">
            <div>
                <p>We would love to hear from you! Please fill in the forms below and someone from the project
                will get back to you.</p>

                <hr />

                <!-- Message sent message -->
                <div class="sent message">
                    <h2>Message Sent</h2>
                    <p>Thanks the for the message! Someone will be in touch soon.</p>
                </div>

                <!-- Contact form -->
                <form id="contact-form" method="post" action="https://formspree.io/xpzdwpez">
                    <label>Name</label>
                    <input type="text"
                           name="name"
                           placeholder="John Smith"
                           required />

                    <label>Email</label>
                    <input type="email"
                           name="email"
                           placeholder="john@smith.com"
                           required />

                    <label>Subject</label>
                    <input type="text"
                           name="query"
                           placeholder="General Question"
                           required />

                    <label>Message</label>
                    <textarea placeholder="Please enter your message here"
                              name="message"
                              required
                              minlength="4"></textarea>

                    <button type="submit" disabled>Send Message</button>

                    <input name="subject" type="hidden" value="SYCLOPS Contact Request" />
                    <input type="hidden" name="_next" value="{{page.url}}#sent" />
                </form>
            </div>
            <div>
                <h2>Social Media</h2>
                <ul class="styled-list">
                    <li>
                        <a href="{{site.twitter}}" target="_blank" rel="noopener">Twitter</a>
                    </li>
                    <li>
                        <a href="{{site.youtube}}" target="_blank" rel="noopener">YouTube</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- Import contact JS -->
<script src="static/js/contact.js"></script>