Empty form submission svelte

hello,
I followed form set up instructions for Svelte Netlify form implementation however although, the form is detected and my submit function works with success status I am not getting any values in the submitted form. I receive only empty form notification. I would appreciate any suggestions on required modifications…Thanks!

Here is set up reference:
https://answers.netlify.com/t/implement-netlify-forms-with-svelte-app/3766

Here is my set up

<script>
$: isEmpty = !email || !phone || !message  

    let form = {
        email: '',
        phone: '',
        message:'',
    };

    const encode = (data) => {
        return Object.keys(data)
            .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
            .join("&");
    }

    function handleSubmit() {
        fetch("/", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: encode({ "form-name": "contact", ...form })
        })
        .then(() => {
            navigate("/")
        }).catch(error => {
            console.log(error), 
       })

    };

   
</script>
<form id="contact-form" class="form" name="contact" method="POST" data-netlify="true" on:submit|preventDefault={handleSubmit}>
                <input type="hidden" name="form-name" value="contact">
                
                <div class="form-control">
                    <label for="email">email</label>
                    <input type="email" id="email" bind:value={form.email} />
                </div>
               
                <div class="form-control">
                    <label for="phone">phone</label>
                    <input type="number" id="phone" bind:value={form.phone} />
                </div>
                
                <div class="form-control">
                    <label for="message">your message</label>
                    <textarea type="text" id="message" rows="5" bind:value={form.message}></textarea>
                </div>
               {#if isEmpty}
                    <p class="form-empty">Please fill out all form fields</p>
                {/if}
                <button type="submit" class="btn-link" disabled={isEmpty} class:disabled={isEmpty}>
                    Send Message
                </button>
                
 </form>

Hiya, @katgolek :wave:

Welcome to the Netlify Forums! Sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. Please make sure you walk through all of the suggestions here. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else! There are plenty that relate to Forms, but here are two that you may start with as they relate to empty form submissions and svelte/sapper:

If you are still having problems, please provide the information we request in the Forms Debugging support guide I linked above, such as what you have already tried, and a link to your live form. :slight_smile: