KwesformsとRiveでアストロサイトを明るくします

この記事では、kwesformsとRiveを統合してAstro Webサイト内に動的でインタラクティブなフォームを作成する方法を示しています。 カスタムイベントは、フォームアクションに基づいてRiveアニメーションをトリガーし、ユーザーエクスペリエンスを向上させます。

プロセスには、AstroでKWESFORMを構成し（スクリプト要素またはNPMを使用）、検証属性を備えたフォームの作成、RIVE（AstroのVite Configとダウンロードまたはカスタムアニメーションを介して）のセットアップが含まれます。 フォーム要素のイベントリスナーは、アニメーション状態の変更をトリガーします。

完全なコードの例とライブプレビューが利用可能です：

？ [プレビューリンク]（プレビューリンクのプレースホルダー）

• ⚙姉妹[リポジトリリンク]（リポジトリリンクのプレースホルダー）

始めましょう：

Astroのセットアップは、CLIまたは手動インストールを介して実行できます。

（in

）とindex.astro（insrc/pages）を作成します。 rive-form.astro：src/componentsにrive-formを含めます index.astro

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

<riveform></riveform></code>

kwesforms統合：

kwesformsは、クライアント側とサーバー側のフォームの検証を簡素化します。 kwesformsスクリプトを含めます（

を使用してアストロ処理を防ぐ）：

is:inline

フォームはTailwind CSSを使用し、検証のための

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

属性を含みます：

data-kw-rules

<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>

riveセットアップ：

riveアニメーションは

ファイルとしてインポートされます。 Astro's ：を構成します

.rivriveアニメーション（「アニメーションログイン文字」など）をダウンロードし、astro.config.mjsディレクトリに配置します。 Riveを初期化して

：

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

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

public rive-form.astro

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

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

イベント処理とアニメーション：

イベントリスナーをフォーム要素に追加します（kwesformsと標準のJavaScriptイベントを使用）。 関数はRive State Machinesにアクセスします：

getTrigger

<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>

このアプローチは、kwesformsとriveを組み合わせて、視覚的に魅力的なフォームインタラクションを行います。 詳細とサポートは、Twitter/X：@PauliesCanlonで入手できます。 Astroの詳細については、SitePoint Premium Book、「Astroの力を解き放つ」

プレビューとリポジトリへの実際のリンクにプレースホルダーリンクを置き換えることを忘れないでください。 また、すべてのコードスニペットがrive-form.astroファイルに正しく統合され、Riveアニメーションやその他のリソースへのパスが正確であることを確認してください。

以上がKwesformsとRiveでアストロサイトを明るくしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。