Sapper Integration

Create a new Sapper site

The easiest way to start building a Sapper site is to clone the sapper-template (opens new window) repo with degit (opens new window):

Run the following commands to create a simple website:

$ npx degit "sveltejs/sapper-template#rollup" my-sapper-site
$ cd my-sapper-site
$ npm install
$ npm run dev

Sapper will start a hot-reloading development environment accessible by default at http://localhost:3000.

Add a Contact Section to your Sapper site

Create a new file called contact.svelte under the routes directory.

Simple Setup

Change contact.svelte file's content with the following:

<form accept-charset="UTF-8" action="https://getform.io/{your-form-endpoint}" method="POST">
    <input type="email" name="email" placeholder="Your Email">
    <input type="text" name="name" placeholder="Your Name">
    <input type="text" name="message" placeholder="Your Message">
    <button type="submit">Send</button>
</form>

Using Fetch

Similar to what we have done in the simple, you can copy the following code block to contact.svelte:

  <script>
    const YOUR_GETFORM_ENDPOINT = "https://getform.io/f/{your-form-endpoint}";
  
    let name = "";
    let email = "";
    let submitting = false;
  
    async function onSubmit() {
      try {
        submitting = true;
        await fetch(YOUR_GETFORM_ENDPOINT, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
          },
          body: JSON.stringify({
            name,
            email
          }),
        });
        name = "";
        email = "";
        alert("Form successfully submitted");
      } finally {
        submitting = false;
      }
    }
  </script>

  <form on:submit|preventDefault="{onSubmit}">
    <input bind:value="{name}" />
    <input bind:value="{email}" />
    <button type="submit" disabled="{submitting}">Send</button>
  </form>

TIP

Don't forget to change the action attribute to a form endpoint URL with yours.

Run your Sapper site locally to finalize setup

Run the following command to see your Sapper form in action at localhost:3000/contact/:

npm run dev

That's it! Your Sapper site is now running Getform.