Svelte Integration

Svelte Contact Form with only Frontend Code

Start collecting form submissions from your Svelte app with Forms in 2 minutes. Create your form in Forms and paste your unique URL inside your form. Look at the code examples and detailed tutorial below to get started.

VS Code

import { onMount } from 'svelte';
  let email = '';
  let message = '';
  let submitted = false;
  let error = '';

  const handleSubmit = async () => {
    error = '';
    try {
      const res = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({ email, message })
      });
      const data = await res.json();
      if (data.code === 200) submitted = true;
      else error = data.message || 'Something went wrong';
    } catch (err) {
      error = err.message;
    }
  };

  Email:
  

  Message:
  

  Send

  {#if submitted}Form submitted successfully!

{/if}
  {#if error}{error}

{/if}

How to Integrate Code

What is Svelte?

Svelte is a JavaScript framework for building reactive web applications. Unlike traditional frameworks, it compiles your code into highly optimized vanilla JavaScript at build time. Forms works seamlessly with Svelte for frontend-only form submissions.

Forms Setup with Svelte using Fetch

Fetch is native in Svelte and works without extra libraries. Replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your unique mockapi URL.

VS Code

let email = '';
  let message = '';
  let submitted = false;
  let error = '';

  const handleSubmit = async () => {
    error = '';
    try {
      const res = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({ email, message })
      });
      const data = await res.json();
      if (data.code === 200) submitted = true;
      else error = data.message || 'Something went wrong';
    } catch (err) {
      error = err.message;
    }
  };

Forms Setup with Svelte using Axios

Axios is a popular HTTP request library for JavaScript. Replace the URL with your unique Forms mockapi.

VS Code

import axios from 'axios';
  let email = '';
  let message = '';
  let submitted = false;
  let error = '';

  const handleSubmit = async () => {
    error = '';
    try {
      const response = await axios.post('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', { email, message });
      if (response.data.code === 200) submitted = true;
      else error = response.data.message || 'Something went wrong';
    } catch (err) {
      error = err.message;
    }
  };

Forms Setup for File Uploads in Svelte

Use the native file input in Svelte and FormData to upload files. Replace the URL with your Forms mockapi.

VS Code

let email = '';
  let file = null;
  let submitted = false;
  let error = '';

  const handleFileChange = (event) => {
    file = event.target.files[0];
  };

  const handleSubmit = async () => {
    if (!file) return error = 'Please select a file';
    error = '';

    const formData = new FormData();
    formData.append('email', email);
    formData.append('file', file);

    try {
      const res = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
        method: 'POST',
        body: formData
      });
      const data = await res.json();
      if (data.code === 200) submitted = true;
      else error = data.message || 'Something went wrong';
    } catch (err) {
      error = err.message;
    }
  };

Set Up Forms in 60 Seconds

Create Your Form

Get Your Endpoint

Forms gives you a unique endpoint. Point your form's action attribute (or a fetch/axios call) at it.

Start Receiving Submissions

Submissions land instantly in your dashboard inbox, with spam filtering and alerts built in.

Get Started Now

USE CASES

Need templates? Say less.

A collection of example HTML forms with code that you can edit live, then download or copy/paste. A minimal form reset css is included that should work with most sites.

Simple Contact Form

Survey Form

Book a Demo Form

News Letter Form

Registration Form & more...

Learn More