Égmentez votre site Astro avec Kwesforms et Rive

Cet article montre comment intégrer Kwesforms et rive pour créer des formes interactives dynamiques dans les sites Web Astro. Les événements personnalisés déclenchent des animations de rive en fonction des actions de formulaire, améliorant l'expérience utilisateur.

Le processus consiste à configurer des kwesforms dans ASTRO (à l'aide d'un élément de script ou de NPM), de création d'un formulaire avec des attributs de validation et de configurer Rive (via la configuration Vite d'Astro et une animation téléchargée ou personnalisée). Les auditeurs d'événements sur les éléments de forme déclenchent des changements d'état d'animation rive.

Un exemple de code complet et un aperçu en direct sont disponibles:

• ? [Lien d'aperçu] (lien d'attention pour l'aperçu)
• ⚙️ [lien de référentiel] (lien de placement pour le lien de référentiel)

PRENDRE:

La configuration ASTRO peut être effectuée via l'installation CLI ou manuelle. Créer index.astro (dans src/pages) et rive-form.astro (dans src/components). Inclure rive-form dans index.astro:

<code class="language-astro">// src/pages/index.astro
---
import RiveForm from '../components/rive-form.astro';
---

<riveform></riveform></code>

Kwesforms Intégration:

kwesforms simplifie la validation du formulaire côté client et côté serveur. Incluez le script kwesforms (en utilisant is:inline pour empêcher le traitement Astro):

<code class="language-astro">// src/components/rive-form.astro
</code>

Le formulaire utilise des attributs CSS de vent arrière et comprend data-kw-rules pour la validation:

<code class="language-astro">// 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></code>

Configuration de la rive:

Les animations de rive sont importées comme .riv fichiers. Configurer Astro's astro.config.mjs:

<code class="language-javascript">// astro.config.mjs
import { defineConfig } from 'astro/config';

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

Téléchargez une animation Rive (par exemple, "personnage de connexion animé") et placez-le dans le répertoire public. Initialiser la rive dans rive-form.astro:

<code class="language-astro">// src/components/rive-form.astro

<canvas id="canvas" width="800" height="600"></canvas>
</code>

Manipulation des événements et animation:

Ajouter des écouteurs d'événements aux éléments de formulaire (en utilisant Kwesforms et des événements JavaScript standard). Une fonction getTrigger accède aux machines d'état Rive:

<code class="language-javascript">// ... 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();
});</script></code>

Cette approche combine des kwesforms et rive pour les interactions de forme visuellement engageantes. De plus amples détails et un support sont disponibles sur Twitter / X: @PauliesCanlon. En savoir plus sur Astro dans le livre de premier plan SitePoint, "Unlefhing the Power of Astro."

N'oubliez pas de remplacer les liens d'espace réservé par les liens réels vers l'aperçu et le référentiel. Assurez-vous également que tous les extraits de code sont correctement intégrés dans votre fichier rive-form.astro et que les chemins de route vers votre animation de rive et d'autres ressources sont exacts.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!