How to Implement Formique in a Svelte Project

Formique is a powerful, WCAG and WAI-ARIA-compliant form-building library designed for JavaScript developers. It supports a wide range of input types, dynamic form generation, and advanced features like nested conditional logic and dynamic dropdowns. While it’s built for the Semantq JS Framework, Formique integrates seamlessly with Vanilla Js and popular frameworks like Svelte, React, Vue, and Angular. In this article, we’ll walk you through the steps to implement Formique in a Svelte project.

Before we dive into the guide, let's explore why you may want to consider using Formique for your web app project.

Why Use Formique?

Formique offers a robust set of features that make it an excellent choice for building forms in modern web applications:

Declarative Syntax: Define forms using a simple and intuitive schema.
Wide Range of Inputs: Supports text, email, number, password, date, time, file uploads, and more.
Dynamic Form Generation: Generate forms dynamically based on your schema.
Accessibility Compliance: Ensures all form elements meet WCAG and WAI-ARIA standards.
Mobile Responsiveness: Forms are mobile-friendly out of the box.
JavaScript-Driven Themes: Apply themes dynamically for a customizable UI.
Nested Conditional Logic: Show or hide fields based on user input.
Dynamic Dropdowns: Create dropdowns with options that change dynamically.
Framework Agnostic: Works with Svelte, React, Vue, Angular, and Vanilla JS.

Step 1: Set Up a Svelte Project

Before integrating Formique, you’ll need a Svelte project. If you don’t already have one, follow these steps to create a new Svelte or SvelteKit project:

Create a New Svelte Project: Run the following command in your terminal:
```
 npx create-svelte@latest my-svelte-app
```
Select Project Options:
- Choose SvelteKit (optional but recommended).
- Enable TypeScript (optional but recommended).
- Add ESLint for code linting (optional).
- Use npm as the package manager.
Navigate to Your Project:
```
 cd my-svelte-app
```
Install Dependencies:
```
 npm install
```
Start the Development Server:
```
 npm run dev
```

Your Svelte app should now be running at http://localhost:5173.

Step 2: Install Formique

To use Formique in your Svelte project, you’ll need to install the svelte-formique package:

npm install svelte-formique

Step 3: Add Formique CSS

Formique requires a CSS file for styling. Add the following link to the <head> section of your src/app.html file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formique-css@1.0.7/formique.min.css" formique-style>

Step 4: Create a New Route for the Form

For this example, let’s create a new route in your Svelte app to host the form.

Create a New Route Directory:
```
 mkdir src/routes/registration
```
Create a Svelte Page: Inside the registration directory, create a new file named +page.svelte:
```
 touch src/routes/registration/+page.svelte
```

Step 5: Implement the Form

Now, let’s add the Formique form to the +page.svelte file. Here’s the complete code:

<script>
  import { onMount } from 'svelte';
  import Formique from 'svelte-formique';

  // Define the form schema
  const formSchema = [
    ['text', 'name', 'Name', { required: true }],
    ['text', 'surname', 'Surname', { required: true }],
    ['email', 'email', 'Email', { required: true }],
    ['singleSelect', 'title', 'Title', { required: true }, { dependents: ['status'] },
      [
        { value: 'mr', label: 'Mr' },
        { value: 'ms', label: 'Ms' },
        { value: 'mrs', label: 'Mrs' },
        { value: 'dr', label: 'Dr' },
        { value: 'prof', label: 'Prof' }
      ]
    ],
    ['singleSelect', 'status', 'Status', { required: true }, { dependsOn: 'title', condition: 'prof' },
      [
        { value: 'full professor', label: 'Full Professor' },
        { value: 'associate professor', label: 'Associate Professor' }
      ]
    ],
    ['submit', 'submit', 'Submit', {}, { style: 'width: 100%;' }],
  ];

  // Define form parameters
  const formParams = {
    id: "regForm",
    method: "POST",
  };

  // Define form settings
  const formSettings = {
    submitOnPage: true,
    theme: "midnight-blush",
    requiredFieldIndicator: true,
    placeholders: true,  
  };

  // Initialize the form on component mount
  onMount(() => {
    const form = new Formique(formSchema, formParams, formSettings);
  });
</script>

<!-- Target element where the form will be inserted -->
<div id="formique"></div>

Step 6: View the Form

To see the form in action, start the development server if it’s not already running:

npm run dev

Navigate to http://localhost:5173/registration in your browser. You should see the Formique form rendered on the page.

Customizing the Form

Formique is highly customizable. Here are a few ways to tweak the form:

Change the Target Element: If you want to use a custom container for the form, update the formSettings object:
```
 const formSettings = {
   containerId: 'custom-container-id',
   // other settings...
 };
```
Add More Fields: Extend the formSchema array to include additional fields like checkboxes, radio buttons, or file uploads.
Apply a Different Theme: Formique supports JavaScript-driven themes. Change the theme property in formSettings to apply a different theme.

Conclusion

Formique is a versatile and accessible form-building library that simplifies the process of creating dynamic, user-friendly forms in Svelte. By following this guide, you’ve learned how to set up a Svelte project, install Formique, and implement a fully functional form with advanced features like conditional logic and dynamic dropdowns.

For more details on Formique’s features and options, check out the Formique GitHub Repository or visit the Formique website.

Happy coding! 🚀/