​
What is Svelte?

Svelte is a tool for building web applications. Like other user interface frameworks, it allows you to build your app declaratively out of components that combine markup, styles and behaviours.

​
Prerequisites

Before you begin, you’ll need to have a Formbox form. If you don’t have one yet, you can create a new form by following the steps in the Introduction guide. Once you have your form, make a note of the form’s endpoint url in the setup tab of your form page, as you’ll need it later.

​
Creating a new Svelte project

To get up and running quickly, we will follow the official Svelte Getting Started guide to create a new Svelte project. In your terminal, run the following command:

npm create svelte@latest svelte-with-formbox

The first command will scaffold a new project in the svelte-with-formbox directory asking you if you’d like to set up some basic tooling such as TypeScript. Once all questions are answered, it will begin scaffolding your project and provide instructions for navigating to your site and running it locally.

Go to the new directory for the new website:

cd svelte-with-formbox

Start the development server:

npm run dev

Open your browser and navigate to http://localhost:5173. You should see a new Svelte application running.

​
Adding your Formbox form to your Svelte project

Now that we have a new Svelte project set up, let’s add our Formbox form to it.

For styling purposes, we’ll use Tailwind CSS. You can learn how to add Tailwind CSS to your project by following the Svelte installation guide.

Once you have Tailwind CSS set up, let’s add our form.

Open up the +page.svelte file within the src/routes directory and replace everything in the file with the following code block:

+page.svelte
<svelte:head>
	<title>Svelte with Formbox</title>
</svelte:head>

<section>
	<div class="max-w-md mx-auto py-20 bg-white">
    <h2 class="text-2xl font-semibold mb-6">Get in Touch</h2>
    <form action="https://api.formbox.app/s/your-form-id" method="POST">
      <div class="mb-4">
        <label for="name" class="block text-gray-700 text-sm font-bold mb-2">
          Name
        </label>
        <input
          type="text"
          id="name"
          name="name"
          placeholder="John Doe"
          required
          class="
            w-full
            px-3
            py-2
            border
            rounded-md
            focus:outline-none focus:border-blue-500
          "
        />
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 text-sm font-bold mb-2">
          Email
        </label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="john@example.com"
          required
          class="
            w-full
            px-3
            py-2
            border
            rounded-md
            focus:outline-none focus:border-blue-500
          "
        />
      </div>
      <div class="mb-6">
        <label for="message" class="block text-gray-700 text-sm font-bold mb-2">
          Message
        </label>
        <textarea
          id="message"
          name="message"
          rows="4"
          placeholder="How can we help you?"
          class="
            w-full
            px-3
            py-2
            border
            rounded-md
            focus:outline-none focus:border-blue-500
          "
        ></textarea>
      </div>
      <button
        type="submit"
        class="
          bg-blue-500
          text-white
          px-4
          py-2
          rounded-md
          hover:bg-blue-600
          focus:outline-none focus:shadow-outline-blue
        "
      >
        Send Message
      </button>
    </form>
  </div>
</section>

Paste the form endpoint url you copied from Formbox into your form’s action attribute as shown in the code block above.

Save the file and navigate to http://localhost:5173 in your browser. You should see a form that you can fill out and submit.

And that’s it! Now after filling out and submitting the form you should see the default submission success page displayed.

NuxtRemix