Svelte

Overview

You can create a dynamic contact form using Svelte with FormsLite.io. This approach provides a seamless user experience by handling form submissions and validations without reloading the page.

Example Code

Here is a sample contact form using Svelte with FormsLite.io. Modify it according to your needs.

Svelte Setup

<script>
  let status = "";
  
  const handleSubmit = async (event) => {
    event.preventDefault();
    status = 'Submitting...';
    const formData = new FormData(event.currentTarget);
    const object = Object.fromEntries(formData);
    const json = JSON.stringify(object);

    const response = await fetch("https://api.formslite.io/submission", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
        },
        body: json
    });
    const result = await response.json();
    if (result.success) {
        console.log(result);
        status = result.message || "Success";
    } else {
        status = "Something went wrong!";
    }
  }
</script>

<form on:submit={handleSubmit}>
    <input type="hidden" name="access_key" value="ACCESS_KEY">
    <input type="text" name="name" required />
    <input type="email" name="email" required />
    <textarea name="message" required rows="3"></textarea>
    <input type="submit" />
</form>

<div>{status}</div>

Summary

Using Svelte with FormsLite.io allows you to create a responsive and interactive contact form. The provided example demonstrates how to set up the form, handle submission, and provide feedback to users. Customize the code to fit your specific requirements and enhance your form's functionality.