Svelte Integration

Svelte Contact Form with only Frontend Code

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

VS Code

<script>
  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;
    }
  };
</script>

<div>
  <label>Email:</label>
  <input type="email" bind:value={email} />

  <label>Message:</label>
  <textarea bind:value={message}></textarea>

  <button on:click={handleSubmit}>Send</button>

  {#if submitted}<p>Form submitted successfully!</p>{/if}
  {#if error}<p style="color:red">{error}</p>{/if}
</div>

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. FormAPI works seamlessly with Svelte for frontend-only form submissions.

FormAPI 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

<script>
  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;
    }
  };
</script>

FormAPI Setup with Svelte using Axios

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

VS Code

<script>
  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;
    }
  };
</script>

FormAPI Setup for File Uploads in Svelte

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

VS Code

<script>
  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;
    }
  };
</script>

Set Up FormAPI in 60 Seconds

1

Create Your Form

Sign up and create a form in FormAPI — no backend code required.

2

Get Your Endpoint

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

3

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

Ready to Experience Zunoy?

Start your journey with Zunoy's powerful suite of tools, designed for startups, developers, and growing teams alike.

Sign Up Now

All our products come with a lifetime free tier.