form.js

(function () {
    const form = document.querySelector('form');
    const spinner = document.getElementById("processingIndicator");
    const button = document.querySelector("button");
    const successAlert = document.getElementById("successAlert");
    const errorAlert = document.getElementById("errorAlert");
    const query = `mutation saveContactForm($firstName: String, $lastName: String, $company: String, $phoneNumber: String, $email: String, $message: String, $authorId: ID) { save_submissions_contactForm_Entry(firstName: $firstName, lastName: $lastName, company: $company, phoneNumber: $phoneNumber, email: $email, message: $message, authorId: $authorId) { firstName lastName company phoneNumber email message }}`

    var processingFormState = function()
    {
        button.disabled = true;
        spinner.classList.remove('hidden');
    }

    var prepFormData = function(target)
    {
        const formData = new FormData(target);
        return  {
            query: `${query}`,
            variables: {
                firstName: formData.get('firstName'),
                lastName: formData.get('lastName'),
                company: formData.get('company'),
                phoneNumber: formData.get('phoneNumber'),
                email: formData.get('email'),
                message: formData.get('message'),
                authorId: 1
            }
        }
    }

    var afterProcessingFormState = function(target, status)
    {
        spinner.classList.add('hidden');
        if (status === 'success') {
            target.reset()
            successAlert.classList.remove('hidden');
        } else {
            errorAlert.classList.remove('hidden');
        }
        document.querySelector("button").disabled = false
    }

    var handleFormSubmission = function(event)
    {
        event.preventDefault();
        processingFormState();
        let body = prepFormData(event.target);
        let url = window.graphqlEndpoint;
        let opts = {
            method: 'POST',
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${window.graphqlToken}`,
            },
            body: JSON.stringify(prepFormData(event.target))
    }
        fetch(url, opts)
            .then(response => response.json())
            .then(response => {
                if (response.errors) {
                    afterProcessingFormState(event.target, 'error')
                    console.log(response)
                } else {
                    afterProcessingFormState(event.target, 'success')
                }
            })
            .catch(error => {
                afterProcessingFormState(event.target, 'error')
                console.log(error)
            })
    }

    form.addEventListener('submit', handleFormSubmission )
})();