page-contact.hbs

{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}

{{!-- The big featured header, it uses blog cover image as a BG if available --}}

<style>
.page-contact  article {
  max-width: 600px;
  margin: 0 auto;
}
.page-contact table {
  margin: 0 auto;
  min-width: 400px;
}
.page-contact table a,
.page-contact table button {
  margin: 0.5rem;
}
#contact-form {
  max-width: 100%;
  margin: 0 auto;
}
#contact-form label,
#contact-form input,
#contact-form textarea {
  display: block;
  width: 100%;
}
#contact-form input,
#contact-form textarea {
  padding: 0.5em 1em;
}
#contact-form .form-group {
  margin-bottom: 1rem;
}
.g-recaptcha {
  display: block;
  margin: 1.5rem;
}
.g-recaptcha > div {
  margin: 0 auto;
}
.stack-items a {
    background: #eaebed;
    border: 1px solid #ddd;
    box-shadow: 0 0 17px -2px rgba(100, 100, 100, 0.25);
    display: inline-block;
    margin: 10px;
    border-radius: 5px;
    transition: all ease .5s;
}
.stack-items a:hover {
    box-shadow: 0px 3px 19px 2px rgba(100, 100, 100, 0.35);
}
.stack-items a img {
    max-height: 50px;
    width: auto;
    margin: 10px 20px;
}
.stack-item-ghost {
    margin: 0;
    max-height: 70px;
}
</style>

{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}

<article class="article {{post_class}} page-contact">

    <header class="article-header gh-canvas">
        {{#if feature_image}}
        <figure class="article-image">
            {{!-- This is a responsive image, it loads different sizes depending on device
            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
            <img
                srcset="{{img_url feature_image size="s"}} 300w,
                        {{img_url feature_image size="m"}} 600w,
                        {{img_url feature_image size="l"}} 1000w,
                        {{img_url feature_image size="xl"}} 2000w"
                sizes="(min-width: 1400px) 1400px, 92vw"
                src="{{img_url feature_image size="xl"}}"
                alt="{{title}}"
            />
        </figure>
        {{/if}}
    </header>

    <section class="gh-content gh-canvas">

        <h1 class="article-title">{{title}}</h1>

        <form id="contact-form" method="POST">
            <p>Send us your suggestions, ideas, queries and collaboration proposals via this form</p>
            <div class="form-group">
                <label>Your Name:</label>
                <input type="name" name="name" class="subscribe-email" />
            </div>
            <div class="form-group">
                <label>Your Email:</label>
                <small>(We will send a copy of this message to you)</small>
                <input type="email" name="email" class="subscribe-email" />
            </div>
            <div class="form-group">
                <label>Message:</label>
                <textarea name="message" class="subscribe-email" rows="6"></textarea>
            </div>

            <div
                class="g-recaptcha"
                data-callback='__captcha_registered'
                data-error-callback='__captcha_error'
                data-expired-callback='__captcha_expired'
                data-sitekey="6LdDH74SAAAAANB5pAQvE3Z-J5Y4WCT7sn_heA5V"
            ></div>
            <button type="submit" id="contact-form-button" class="gh-btn gh-btn-block gh-btn-black">
                <span>Submit</span>
            </button>
            <p id="contact-form-status"></p>
        </form>
        <hr />
        <h2>Our Stack:</h2>
        <div class='stack-items'>
            <a href="https://bit.ly/3mAWB9C" class='stack-item stack-item-digital-ocean'>
                <img src="https://res.cloudinary.com/time2hack/image/upload/q_auto:good,f_auto/DigitalOcean_logo.png" />
            </a>
            <a href="https://nodejs.org" class='stack-item stack-item-nodejs'>
                <img src="https://res.cloudinary.com/time2hack/image/upload/q_auto:good,f_auto/Node_logo_NodeJS.png" />
            </a>
            <a href="https://ghost.org" class='stack-item stack-item-ghost'>
                <img src="https://res.cloudinary.com/time2hack/image/upload/q_auto:good,f_auto/Ghost-Logo.png" />
            </a>
            <a href="https://mailgun.com" class='stack-item stack-item-mailgun'>
                <img src="https://res.cloudinary.com/time2hack/image/upload/q_auto:good,f_auto/mailgun-logo.png" />
            </a>
        </div>

    </section>

</article>

{{> "ad"}}

{{/post}}

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
window.__captcha_registered = () => {}
window.__captcha_error = () => {}
window.__captcha_expired = () => {}
window.addEventListener("DOMContentLoaded", function() {

    // get the form elements defined in your form HTML above
    var name = 'contact-form';
    var form = document.getElementById(name);
    var button = document.getElementById(name + "-button");
    var status = document.getElementById(name + "-status");

    // Success and Error functions for after the form is submitted

    function success() {
        form.reset();
        button.style = "display: none ";
        status.innerHTML = "Thanks!";
    }

    function error() {
        status.innerHTML = "Oops! There was a problem.";
    }


    var objectFromFormData = (formData) => {
        var values = {};
        for (let [key, value] of formData.entries()) {
            if (values[key]) {
                if (!(values[key] instanceof Array)) {
                    values[key] = new Array(values[key]);
                }
            values[key].push(value);
            } else {
                values[key] = value;
            }
        }
        return values;
    };


    form.addEventListener("submit", function(ev) {
        ev.preventDefault();
        var cap = document.querySelector('#g-recaptcha-response')
        if (!cap || !cap.value) {
            alert('Please verify reCaptcha!')
            return
        }
        var data = new FormData(form);
        var url = 'https://t2h-contact-form.netlify.app/.netlify/functions/contact-form'
        ajax(form.method, url, JSON.stringify(objectFromFormData(data)), success, error);
    });
});

  // helper function for sending an AJAX request

function ajax(method, url, data, success, error) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.setRequestHeader("Accept", "application/json");
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.onreadystatechange = function() {
        if (xhr.readyState !== XMLHttpRequest.DONE) return;
        if (xhr.status === 200) {
            success(xhr.response, xhr.responseType);
        } else {
            error(xhr.status, xhr.response, xhr.responseType);
        }
    };
    xhr.send(data);
}
</script>