Implement Netlify forms with Svelte app

Support
1

Hello I am looking for some help implementing netlify forms with my sapper app. I got the response to send - but the values don’t seem to be bound correctly.

<script>
  let form = {
    // checkbox
    services: [""],
    // text
    firstName: "",
    lastName: "",
    phone: "",
    email: "",
    // textarea
    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", ...formData })
      })
        .then(() => alert("Success!"))
        .catch(error => alert(error));

    };
</script>

<input
  type="checkbox"
  name="choice1"
  bind:group={form.services}
  value="chioce1" />
<input
  type="checkbox"
  name="choice2"
  bind:group={form.services}
  value="choice2" />
...
<input type="text" name="phone" bind:value={form.phone} />
....
<textarea name="message" bind:value={form.message} />
2

UPDATE - fixed issue - name of the checkboxes should be common to the object key

let formData = {
  // checkbox
  checkboxes: [''],
  // text
  phone: "",
  email: "",
  firstName: "",
  lastName: "",
  // textarea
  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", ...formData })
      })
        .then(() => alert("Success!"))
        .catch(error => alert(error));

    };

             <input
            type="checkbox"
            name="services"
            bind:group={formData.services}
            value="choice1" />

          <input
            type="checkbox"
            name="services"
            bind:group={formData.services}
            value="choice2" />
3

@jSwtch, first, welcome to our Netlify community site and, second, thank you for sharing your solution here as well. We appreciate it and this will hopefully be helpful to people searching for a similar solution in the future.