Building forms with Svelte and Formzillion

Svelte is a JavaScript framework that enables developers to build dynamic and interactive user interfaces with a compiler-based approach. It eliminates the need for a virtual DOM and provides scoped CSS for component-based styling.

This guide will demonstrate the quick process of adding a contact form to your Svelte project and connecting it to Formzillion for submission handling.

How to create a Svelte Contact Form

Step 1 — Create new form endpoint on Formzillion

Sign in to your Formzillion account and create a new form with name Svelte Contact Form or a similar identifier. Formzillion will assign a unique form ID specifically for identifying your Svelte form.

Step 2 — Create a new Svelte project

To initiate the project setup, let's follow the instructions provided in the Svelte Getting Started documentation. Open your terminal and execute the following command to create a new site:

Navigate to the newly created directory for your website:

Run the development server:

You can now access the site in your browser by visiting https://localhost:5173. Below observe the sample site displayed on the screen:

Great job! You have successfully created a new Svelte site. Now, let's proceed to learn how to add a contact form into your project.

Step 3 — Create a Contact Form

To integrate the Formzillion form endpoint with your Svelte project's contact form, follow these steps:

1. Within the src/routes directory of your project, create a new folder called contact.
2. Inside the contact folder, create a +page.svelte file to serve as the component defining the contact page in your app.
3. Insert the provided code block below into the +page.svelte file locaed at src/routes/contact/+page.svelte.

To enhance the appearance of the form, you can apply custom CSS. Add the following code snippet to the bottom of the +page.svelte file located in src/routes/contact/:

Now, with the applied styling, the form has an appealing visual design that appears as follows:

To successfully submit your form to Formzillion, ensure that you include the 'FORM_ID' in the provided form code. This 'FORM_ID' should correspond to the ID assigned to your specific Formzillion form.

And there you have it! Once you fill out and submit the form, you will be able to view the default submission thank you page.

Congratulations! Your Svelte site now has the contact form powered by Formzillion!