Contact form with Zapier

contactform.html

<!-- Here's a great article on setting up zapier. I added a few lines in the ajax so you don't have to redirect the user   -->
<!-- https://www.harrycresswell.com/articles/form-data-with-zapier/ -->


<form id="myForm">
    <input id="form-name" type="text" name="Name" placeholder="Name" required>
    <input id="form-email" type="email" name="Email" placeholder="Email" required>
    <textarea id="form-message" name="Message" cols="30" rows="6" placeholder="Message" required></textarea>
    <!-- CONFIG -->
    <input class="hidden" type="text" name="_gotcha">
    <input type="hidden" name="_subject" value="Subject">
    <input type="hidden" name="_cc" value="email@cc.com">
    <!-- /CONFIG -->
    <input type="submit" value="Submit" id="Form-submit" class="btn-prime"/>
</form>

<script type="text/javascript"> 

var $contactForm = $('#myForm');
$contactForm.submit(function(e){
    e.preventDefault();
    $.ajax({
        url:'https://hooks.zapier.com/hooks/catch/2549310/84xxea/',
        type:'post',
        data:$contactForm.serialize(),
        beforeSend: function() {
             $contactForm.append('<div class="alert alert--loading">Sending message…</div>');
         },
         success: function(data) {
             $contactForm.find('.alert--loading').hide();
             $contactForm.append('<div class="alert alert--success">Message sent!</div>');
         },
         error: function(err) {
             $contactForm.find('.alert--loading').hide();
             $contactForm.append('<div class="alert alert--error">Ops, there was an error.</div>');
         }
    });
});

</script>