$.post to Zapier webhook

Question

I have created an HTML form that sends an HTTP POST to a Zapier webhook. The code works great when I embed the POST action in HTML:

<form id="contactForm" action="https://hooks.zapier.com/hooks/catch/2689457/xiooqx/" method="POST"> inputs </form>

However, I cannot easily ensure all fields are complete, handle responses, etc. So, I turned to JQuery:

    $.post('https://hooks.zapier.com/hooks/catch/2689457/xiooqx/',   // url
        { message: 'Test', contact: "NA" }, // data to be submit
        function(data, status, jqXHR) {// success callback
            alert(data);
        }
    )

And the same with AJAX:

$.ajax({
        type : 'POST',
        url : 'https://hooks.zapier.com/hooks/catch/2689457/xiooqx/',           
        data: {
            message : $('#message').val(),
            contact : $('#contactMethod').val()
        },
        success:function (data) {
            alert(data);
        }          
    });

Neither of these work. I know the these AJAX/JQuery statements are reached, however Zapier does not receive the data.

I am using Jekyll and Gulp to render the site, so the site is static (but I still should be able to use HTTP methods). Any help would be greatly appreciated.

Thanks in advance!

Answer 1

var data = {
            message : 'test stack overflow',
            contact : 'test'
        };
$.ajax({
        type : 'POST',
        url : 'https://hooks.zapier.com/hooks/catch/2689457/xiooqx/',  
        data: JSON.stringify(data),
        success:function (data) {
            console.log(data);
        },
        error: function(xhr, status, error) {
        // handle error
      }
    });

Send as JSON string