Cerahkan laman astro anda dengan kwesforms dan rive

Artikel ini menunjukkan cara mengintegrasikan kwesforms dan rive untuk membuat bentuk dinamik dan interaktif dalam laman web Astro. Acara tersuai mencetuskan animasi rive berdasarkan tindakan bentuk, meningkatkan pengalaman pengguna.

Proses ini melibatkan mengkonfigurasi kwesforms di Astro (menggunakan elemen skrip atau npm), mewujudkan borang dengan atribut pengesahan, dan menubuhkan Rive (melalui konfigurasi Vite Astro dan animasi yang dimuat turun atau adat). Pendengar acara mengenai elemen bentuk mencetuskan perubahan keadaan animasi rive.

Contoh kod lengkap dan pratonton langsung tersedia:

? [Pautan Pratonton] (Placeholder untuk Pautan Pratonton)

• ⚙️ [pautan repositori] (letak untuk pautan repositori)

Bermula:

Persediaan Astro boleh dilakukan melalui pemasangan CLI atau manual. Buat

(dalam

) dan index.astro (dalam src/pages). Sertakan rive-form.astro dalam 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 Integration:

Kwesforms memudahkan pengesahan borang klien dan pelayan. Sertakan skrip kwesforms (menggunakan

untuk mengelakkan pemprosesan astro):

is:inline

Borang menggunakan CSS tailwind dan termasuk // src/components/rive-form.astro

data-kw-rules

persediaan rive:

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

animasi rive diimport sebagai fail. Konfigurasikan Astro

:

.riv astro.config.mjs Muat turun animasi rive (mis., "Watak log masuk animasi") dan letakkan di direktori

. Inisialisasi Rive dalam

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

Pengendalian dan Animasi Acara:

Tambah pendengar acara untuk membentuk elemen (menggunakan kwesforms dan peristiwa JavaScript standard). Fungsi A mengakses mesin negara rive:

getTrigger

Pendekatan ini menggabungkan kwesforms dan rive untuk interaksi bentuk yang menarik secara visual. Butiran lanjut dan sokongan boleh didapati di Twitter/X: @PauliesCanlon. Ketahui lebih lanjut mengenai Astro dalam buku Premium Sitepoint, "Membebaskan Kuasa Astro."

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

ingat untuk menggantikan pautan letak dengan pautan sebenar ke pratonton dan repositori. Juga, pastikan semua coretan kod diintegrasikan dengan betul ke dalam fail rive-form.astro anda dan bahawa laluan ke animasi rive anda dan sumber lain adalah tepat.

Atas ialah kandungan terperinci Cerahkan laman astro anda dengan kwesforms dan rive. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!