Šiame straipsnyje parodysiu, kaip pridėti KwesForms tavo Astro svetainę ir atgaivinkite formą naudodami pasirinktinius įvykius ir Rive.
Pasirinktiniai įvykiai gali būti naudojami skirtingoms „Rive“ animacijos būsenoms valdyti, kai tik įvyksta formos „įvykis“. Tai gali būti tada, kai laukas tampa negaliojantis arba kai forma buvo sėkmingai pateikta.
Jei norite eiti į priekį, sukūriau pavyzdinį atpirkimo sandorį, kuriame yra visas kodas ir tiesioginė peržiūra:
Darbo su Astro pradžia
Norėdami pradėti naudotis Astro, turite keletą parinkčių. Galite sekti arba „Astro“ diegimo gairės su Automatinis CLIarba (mano pageidaujamas metodas) įdiekite Astro rankiniu būdu.
Sukurti puslapį
Jei Astro įdiegėte rankiniu būdu, sukurkite naują failą pavadinimu index.astro šiame kataloge: src/pages.
Sukurkite komponentą
Sukurkite naują failą pavadinimu rive-form.astro viduje src/components katalogas.
Pridėkite komponentą prie puslapio
Pridėkite šiuos dalykus, kad rodyklės puslapyje būtų pateiktas RiveForm komponentas:
---
import RiveForm from '../components/rive-form.astro';
---
<RiveForm />
Likusioje šio straipsnio dalyje pridėsiu kodą prie rive-form.astro failą.
The src repo galite pamatyti čia: rive-kwes-forms/src/pages/index.astro.
Darbo su KwesForms pradžia
aš naudojau KwesForms neseniai vykdė kliento projektą ir man patiko ši patirtis. Žinoma, yra daug būdų, kaip tvarkyti formų duomenis, bet aš pastebėjau, kad KwesForms naudojimas tikrai padėjo supaprastinti reikalavimą turėti kliento ir serverio patvirtinimą!
Norėdami pradėti, pirmyn ir Registruotis (tai nemokama). Yra du būdai įtraukti KwesFroms kodą į savo svetainę: galite įdiegti naudodami npm arba naudoti scenarijaus elementą. Šiame pavyzdyje aš naudosiu scenarijaus elementą.
Likę penki sąrankos skilties veiksmai padės jums į savo svetainę įtraukti HTML formos elementą.
KwesFroms scenarijaus pridėjimas prie Astro
Kai naudojate kliento scenarijus su Astro, galbūt norėsite atsisakyti apdorojimo naudojant is:inline direktyva. Tai nurodo Astro palikti scenarijų ramybėje ir pateikti jį HTML kaip scenarijaus elementą.
Jūsų rive-form.astro failą, pridėkite:
// src/components/rive-form.astro
- <script src="https://kwesforms.com/v2/kwes-script.js" defer></script>
+ <script is:inline src="https://kwesforms.com/v2/kwes-script.js" defer></script>
KwesForms HTML pridėjimas
Štai kodas, kurį naudojau pavyzdyje (naudojant Galinis vėjas):
// src/components/rive-form.astro
<script is:inline src="https://kwesforms.com/v2/kwes-script.js" defer></script>
<form
id="riveForm"
class="kwes-form flex flex-col gap-6"
action="https://kwesforms.com/api/foreign/forms/abc123"
data-kw-no-reload
>
<div class="flex gap-4">
<div class="grow">
<label for="name">Name</label>
<input id="riveFormName" type="text" name="name" data-kw-rules="required" />
</div>
<div class="grow">
<label for="email">Email</label>
<input id="riveFormEmail" type="email" name="email" data-kw-rules="required|email" required />
</div>
</div>
<div>
<label for="name">Message</label>
<textarea id="riveFormMessage" name="message" rows="4" data-kw-rules="required"></textarea>
</div>
<button type="submit">Send Message</button>
</form>
The src repo galite pamatyti čia: rive-kwes-forms/src/components.rive-form.astro.
Yra keletas atributų, kuriuos naudojau konfigūruodamas savo formą. Prie visų įvestų, kurias pridėjau, pastebėsite: data-kw-rules="required". Tai nurodo KwesFroms, kad šiuose laukuose turi būti reikšmė, kad forma būtų laikoma galiojančia. El. pašto lauke naudojau papildomą atributą, kad užtikrinčiau, jog naudojami tik galiojantys el. pašto adresai, pvz., data-kw-rules="required|email".
Visas patvirtinimo taisykles galite pamatyti KwesForms formos dokumentacija.
Sukūrus formą, laikas pridėti „Rive“ animaciją.
Kas yra Rive?
Rive yra labai šauni, nes ji leidžia dizaineriams ir animatoriams sukurti animaciją naudojant naršyklės sąsają, o kai ji bus baigta, kūrėjai gali tiesiog atsisiųsti failą.
Astro Vite konfigūracijos keitimas
Norėdami naudoti a .riv failą su Astro, reikia šiek tiek konfigūracijos, kad Astro kompiliatorius žinotų, ką daryti su failais, kurie baigiasi .riv.
Norėdami naudoti „Rive“ su „Astro“, prie savo pridėkite toliau nurodytą informaciją astro.config.mjs failas:
import { defineConfig } from 'astro/config';
export default defineConfig({
vite: {
assetsInclude: ['**/*.riv'],
},
});
Atsisiųsti animaciją rive
Kitas žingsnis – susirasti „Rive“ animaciją, kurią norite naudoti, arba, jei jaučiatės kūrybingi, galite sukurti savo. Yra daugybė bendruomenė pavyzdžiai, kuriuos galima atsisiųsti ir naudoti nemokamai.
Failas, kurį naudoju, Animuotas prisijungimo simbolissukūrė Juanas Carlosas Cruzas iš Rive komandos. Norėdami pradėti, atsisiųskite failą ir išsaugokite jį viešajame kataloge.
Aš išsaugojau savąjį public/rive/2244-7248-animated-login-character.riv.
The src repo galite pamatyti čia: rive-kwes-forms/public/rive.
Inicijuojama Rive
Norėdami inicijuoti „Rive“ drobę, pridėkite toliau nurodytą informaciją rive-form.astro failas:
// src/components/rive-form.astro
<script>
const r = new rive.Rive({
src: '/rive/2244-7248-animated-login-character.riv',
canvas: document.getElementById('canvas'),
autoplay: true,
stateMachines: 'Login Machine',
});
</script>
<script is:inline src="https://unpkg.com/@rive-app/canvas@2.7.0"></script>
<canvas id="canvas" width="800" height="600"></canvas>
Kita dalis apima įvykių klausytojų įtraukimą į kiekvieną formos elementą, kad jie galėtų perkelti Rive animaciją į skirtingas animacijos būsenas.
Rive valstybinės mašinos
Atsisiuntimo puslapyje pamatysite, kad ši animacija turi keletą „būsenų“. Tai yra skirtingos animacijos būsenos, kurios gali būti suaktyvintos įvykus tam tikriems formos įvykiams.
Rive valstybinės mašinos gali būti vienas iš šių tipų:
- gaidukas, turintis a
fire()funkcija - skaičius, turintis vertės numerio savybę
- Būlio reikšmė, turinti Būlio ypatybę
Animacijoje apibrėžtų būsenų mašinų tipas lems, kaip juos iškviesite iš formos įvykių klausytojų. (Prie to grįšiu po akimirkos.)
Įvykių klausytojų pridėjimas
Kiekvienam laukui formoje pateikiau an id atributas, ir iš čia galiu pridėti reikalingus įvykių klausytojus kiekvienam įvykiui, kurį norėčiau pasiekti.
Šie įvykiai būdingi KwesForms. Galite pamatyti visus tinkintus įvykius KwesForms dokumentacija. Štai formos kodas:
const form = document.getElementById('riveForm');
form.addEventListener('kwSubmitted', function () {
console.log('form: kwSubmitted');
});
form.addEventListener('kwHasErrors', () => {
console.log('form: kwHasErrors');
});
O štai el. pašto lauko kodas. Tai yra standartiniai JavaScript įvykiai sutelkti dėmesį ir suliejimas. Tą patį pridėjau vardo ir pranešimo laukams:
const name = document.getElementById('riveFormName');
name.addEventListener('focus', () => {
console.log('name: focus');
});
name.addEventListener('blur', () => {
console.log('name: blur');
});
„Rive State Machines“ suaktyvinimas iš formos įvykių
Čia viskas susijungia. Kai įvyksta formos įvykis, galiu iškviesti vieną iš animacijos būsenų.
GetTrigger funkcijos kūrimas
Tiesiog po inicijavimo kodu pridėkite šį kodo fragmentą:
<script>
const r = new rive.Rive({
...
+ const getTrigger = (name) => {
+ return r.stateMachineInputs('Login Machine').find((input) => input.name === name);
+ };
</script>
Ši funkcija priima a name parametras. Tai valstijos pavadinimas, kaip matyti anksčiau atsisiuntimo puslapyje. Funkcija grąžina Rive egzempliorių stateMachineInputskuri leidžia nustatyti reikšmes, o tai savo ruožtu paverčia animaciją į skirtingas būsenas.
Trigerio iškvietimas iš įvykių klausytojo
Kai formoje yra klaidų, aš prisijungiu prie KwesForms kwHasErrors renginį ir paskambinti trigFail paleisti naudojant fire funkcija:
form.addEventListener('kwHasErrors', () => {
console.log('form: kwHasErrors');
+ const trigger = getTrigger('trigFail');
+ trigger.fire();
});
Kai tik pavadinimo laukas sufokusuojamas, aš nustatau isChecking į trueir visur, kur pavadinimo laukas yra neryškus, aš nustatau isChecking į false:
name.addEventListener('focus', () => {
console.log('name: focus');
+ const trigger = getTrigger('isChecking');
+ trigger.value = true;
});
name.addEventListener('blur', () => {
console.log('name: blur');
+ const trigger = getTrigger('isChecking');
+ trigger.value = false;
});
Kai tik el. pašto laukas sulaukia dėmesio, nustatau isHandsUp į trueir kai tik el. pašto laukas susilieja, nustatau isHandsUp į false:
email.addEventListener('focus', () => {
console.log('email: focus');
+ const trigger = getTrigger('isHandsUp');
+ trigger.value = true;
});
email.addEventListener('blur', () => {
console.log('email: blur');
+ const trigger = getTrigger('isHandsUp');
+ trigger.value = false;
})
Išvada
Naudojant „KwesForms“ įvykių ir standartinių „JavaScript“ įvykių derinį su „Rive“ animacija, formos klaidos gali būti atskleistos beveik bet kokiu būdu.
Jei turite klausimų, susijusių su tuo, ką aptariau šiame įraše, nedvejodami susiraskite mane Twitter / X: PaulieScanlon.
Norite daugiau informacijos apie Astro? Peržiūrėkite mūsų visiškai naują knygą „SitePoint Premium“: Astro galios išlaisvinimasTamas Piros, kuris parodys, kaip maksimaliai išnaudoti šios modernios „viskas viename“ sistemos galimybes, kad sukurtumėte greitesnes, į turinį orientuotas svetaines.
