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 endpoint 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 endpoint.

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 endpoint.

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 Forms Checks in 60 Seconds

Choose HTTPS Monitor

Select HTTPS monitoring to track website uptime, SSL expiry, redirects, and response codes from global locations.

Enter Site URL & Options

Type your website URL, add optional headers or auth tokens, then pick the check interval you prefer.

Activate & Get Instant Status

We run the first check instantly and alert on downtime, SSL errors, or failed HTTPS responses.

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. A minimal form reset css is included that should work with most sites. A minimal form reset css is included that should work with most sites.