Brighten Up Your Astro Site with KwesForms and Rive

This article demonstrates how to integrate KwesForms and Rive to create dynamic, interactive forms within Astro websites. Custom events trigger Rive animations based on form actions, enhancing user experience.

The process involves configuring KwesForms in Astro (using a script element or npm), creating a form with validation attributes, and setting up Rive (via Astro's Vite config and a downloaded or custom animation). Event listeners on form elements trigger Rive animation state changes.

A complete code example and live preview are available:

• ? [Preview Link](Placeholder for Preview Link)
• ⚙️ [Repository Link](Placeholder for Repository Link)

Getting Started:

Astro setup can be done via the CLI or manual installation. Create index.astro (in src/pages) and rive-form.astro (in src/components). Include rive-form in index.astro:

// src/pages/index.astro
---
import RiveForm from '../components/rive-form.astro';
---

<RiveForm />

KwesForms Integration:

KwesForms simplifies client-side and server-side form validation. Include the KwesForms script (using is:inline to prevent Astro processing):

// src/components/rive-form.astro
<🎜>

The form uses Tailwind CSS and includes data-kw-rules attributes for validation:

// src/components/rive-form.astro
<form id="riveForm" class="kwes-form flex flex-col gap-6" action="https://kwesforms.com/api/foreign/forms/abc123" data-kw-no-reload>
  {/* Form fields with data-kw-rules attributes */}
  <button type="submit">Send Message</button>
</form>

Rive Setup:

Rive animations are imported as .riv files. Configure Astro's astro.config.mjs:

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  vite: {
    assetsInclude: ['**/*.riv'],
  },
});

Download a Rive animation (e.g., "Animated Login Character") and place it in the public directory. Initialize Rive in rive-form.astro:

// src/components/rive-form.astro
<🎜>

<🎜>

Event Handling and Animation:

Add event listeners to form elements (using KwesForms and standard JavaScript events). A getTrigger function accesses Rive state machines:

// ... inside the <script> tag in rive-form.astro
const getTrigger = (name) => {
  return r.stateMachineInputs('Login Machine').find((input) => input.name === name);
};

// Example event listener
form.addEventListener('kwHasErrors', () => {
  const trigger = getTrigger('trigFail');
  trigger.fire();
});

This approach combines KwesForms and Rive for visually engaging form interactions. Further details and support are available on Twitter/X: @PaulieScanlon. Learn more about Astro in the SitePoint Premium book, "Unleashing the Power of Astro."

Remember to replace the placeholder links with the actual links to the preview and repository. Also, ensure all code snippets are correctly integrated into your rive-form.astro file and that the paths to your Rive animation and other resources are accurate.

The above is the detailed content of Brighten Up Your Astro Site with KwesForms and Rive. For more information, please follow other related articles on the PHP Chinese website!