In this post we’re going to look at how to hook up FormBackend with a form in Svelte.
We’re going to start from scratch and create a new Svelte app. If you already have one you can skip this step and go to the next one.
Go ahead and run the following in your terminal
npm create svelte@latest formbackend-svelte
We picked the skeleton app, which will just give us a barebones project structure. We’re using formbackend-svelte
as our directory name but you can of course use whatever!
Next go in to the directory you just created and run npm install
like so
cd formbackend-svelte npm install
We can now go ahead and start the dev server by running
shell
npm run dev -- --open
and you should see this when visiting http://localhost:5173
:
Log in to your FormBackend account and visit the forms index page. Go ahead and create a new form and give it a name you can remember it by.
After your form has been created, you’ll see the “Submissions” page which is where new submissions will appear. If you navigate to the “Set up” page you can see the unique URL for your form. We’ll copy that!
Svelte’s routing system is based on the file system, so any directory you create inside src/routes
will be the relative path of your site. So src/routes/contact
will be accessible on http://localhost:5173/contact
.
Go ahead and create a new directory inside of src/routes
named contact
and inside that we’ll create a file named +page.svelte
with the following content (full path src/routes/contact/+page.svelte
):
<h1>Contact us</h1> <form accept-charset="UTF-8" action="https://www.formbackend.com/f/b1a2be3a2e0521ff" method="POST"> <div> <label for="name">Name</label> <input type="text" id="name" name="name" required> </div> <div> <label for="email">Email</label> <input type="email" id="email" name="email" required> </div> <div> <label for="message">Message</label> <textarea type="email" id="email" name="email" required></textarea> </div> <button type="submit">Submit</button> </form>
You’ll now have a simple unstyled form that looks like this
We can make the form look a little better by providing our own CSS. Let’s add the following at the bottom of src/routes/contact/+page.svelte
<style> h1 { font-family: Arial, Helvetica, sans-serif; font-size: 2rem; font-weight: 600; margin-bottom: 1rem; } .fieldset + .fieldset, form + form { margin-top: 8px; } label { font-family: Arial, Helvetica, sans-serif; color: #334155; display: block; font-size: .8rem; font-weight: bold; text-transform: uppercase; } input, textarea, select { border: 1px solid #ddd; color: #475569; font-size: 1rem; padding: 5px; border-radius: 4px; } button[ type="submit"] { background: purple; background: #14b8a6; border: none; box-shadow: none; color: white; border-radius: 2px; font-size: .8rem; text-transform: uppercase; font-weight: 500; padding: 8px 12px; margin-top: 16px; } </style>
We now have a styled form that looks like this
After filling it out and clicking the submit button, you’ll be redirected to FormBackend’s submission success page and if you navigate to the Submissions page for the form you created in FormBackend you should see the submission you just added.
We’ve just scratched the surface of what you can do with FormBackend.
If you want to send an email to the submitter when they submit your form, navigate to the Notifications tab and go to the “Send email to the submitter” section. Here you can customize who the email is from, and what the Subject and email body should be. This way you can let the submitter know that you received their submission and will get back to them shortly - or maybe they signed up for a mailing list and you want to send them a link to some beginner content.
You can also send an email to yourself with the data that was submitted with your form. We even allow for attachments and will attach those to the email.
Or you can use webhooks, integrate with Zapier or send the submissions to Google Sheets or Slack using our native integrations.
Every submission is of course checked to see if it’s spam and if it is it’s filtered into the spam inbox.