How can I integrate SvelteKit and Google Forms?

Question

SvelteKit's breaking change of Jan 19 (see here for details) means that my Google Forms integration is no longer working.

It was a minor struggle to get it working in the first place, and I can't bring this up to date — I repeatedly get the error message, "To access the request body use the text/json/arrayBuffer/formData methods, e.g. body = await request.json()", and a link to the GitHub conversation.

Here's my Contact component...

<script>
    let submitStatus;
    const submitForm = async (data) => {
        submitStatus = 'submitting';
        const formData = new FormData(data.currentTarget);
        const res = await fetch('contact.json', {
            method: 'POST',
            body: formData
        });

        const { message } = await res.json();
        submitStatus = message;
    };

    const refreshForm = () => {
        /* Trigger re-render of component */
        submitStatus = undefined;
    };
</script>

... and here's the corresponding contact.json.js:

export const post = async (request) => {
    const name = request.body.get('name');
    const email = request.body.get('email');
    const message = request.body.get('message');

    const res = await fetch(`URL TO RELEVANT GOOGLE FORM GOES HERE`);

    if (res.status === 200) {
        return {
            status: 200,
            body: { message: 'success' }
        };
    } else {
        return {
            status: 404,
            body: { message: 'failed' }
        };
    }
};

Any help would be greatly appreciated!

score 0 · Answer 1 · answered Mar 09 '22 at 14:55

The fix is, in fact, relatively simple, and involved only a tiny change to the existing code. I had to access event.request (destructured to request), and proceed from there, prompted by this answer to a similar question. So, after that, contact.json.js looks like...

export const post = async ({ request }) => {
    const body = await request.formData();
    const name = body.get('name');
    const email = body.get('email');
    const message = body.get('message');

    const response = await fetch(`URL TO RELEVANT GOOGLE FORM GOES HERE`);

    if (response.status === 200) {
        return {
            status: 200,
            body: { message: 'success' }
        };
    } else {
        return {
            status: 404,
            body: { message: 'failed' }
        };
    }
};

(Note, too, that this whole form was based upon this video by WebJeda, which won't now work with the latest SvelteKit build, but will with this simple alteration.)

How can I integrate SvelteKit and Google Forms?

1 Answers1