On this article, I’ll present you find out how to add KwesForms to your Astro web site after which convey the shape to life utilizing customized occasions and Rive.
Customized occasions can be utilized to regulate the completely different states of a Rive animation each time an “occasion” within the type happens. This might be when a subject turns into invalid, or when the shape has been efficiently submitted.
If you happen to’re eager to leap forward, I’ve created an instance repo containing all of the code, and a stay preview:
Getting Began with Astro
To get began with Astro, you’ve a few choices. You’ll be able to both comply with the guidelines for installing Astro with the Automatic CLI, or (my most popular strategy) install Astro manually.
Create a web page
If you happen to’ve put in Astro manually, create a brand new file referred to as index.astro within the following listing: src/pages.
Create a part
Create a brand new file referred to as rive-form.astro within the src/parts listing.
Add the part to the web page
Add the next to render the RiveForm part within the index web page:
---
import RiveForm from '../parts/rive-form.astro';
---
<RiveForm />
For the remainder of this text, I’ll be including code to the rive-form.astro file.
The src could be seen within the repo right here: rive-kwes-forms/src/pages/index.astro.
Getting Began with KwesForms
I used KwesForms for a consumer mission lately, and cherished the expertise. There are, after all, some ways to deal with type knowledge, however I discovered utilizing KwesForms actually helped simplify the requirement to have each client- and server-side validation!
To get began, go forward and sign up (it’s free). There are two methods to incorporate the KwesFroms code in your web site: you may both set up through npm, or use a script aspect. On this instance, I’ll be utilizing the script aspect.
The remaining 5 steps within the setup part will information you thru find out how to add an HTML type aspect to your web site.
Including KwesFroms script to Astro
When utilizing client-sides scripts with Astro, you would possibly wish to opt out of processing utilizing the is:inline directive. This tells Astro to depart the script alone and to render it within the HTML as a script aspect.
In your rive-form.astro file, add the next:
// src/parts/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>
Including KwesForms HTML
Right here’s the code I’ve used within the instance (utilizing Tailwind):
// src/parts/rive-form.astro
<script is:inline src="https://kwesforms.com/v2/kwes-script.js" defer></script>
<type
id="riveForm"
class="kwes-form flex flex-col gap-6"
motion="https://kwesforms.com/api/overseas/varieties/abc123"
data-kw-no-reload
>
<div class="flex gap-4">
<div class="develop">
<label for="title">Title</label>
<enter id="riveFormName" kind="textual content" title="title" data-kw-rules="required" />
</div>
<div class="develop">
<label for="e mail">Electronic mail</label>
<enter id="riveFormEmail" kind="e mail" title="e mail" data-kw-rules="required|e mail" required />
</div>
</div>
<div>
<label for="title">Message</label>
<textarea id="riveFormMessage" title="message" rows="4" data-kw-rules="required"></textarea>
</div>
<button kind="submit">Ship Message</button>
</type>
The src could be seen within the repo right here: rive-kwes-forms/src/components.rive-form.astro.
There are a few attributes that I’ve used to configure my type. You’ll discover on the entire inputs I’ve added the next: data-kw-rules='required'. This tells KwesFroms that these fields should comprise a price earlier than the shape could be thought-about legitimate. I’ve used a further attribute on the e-mail subject to make sure solely legitimate e mail addresses are used — for instance, data-kw-rules='required|e mail'.
You’ll be able to see all of the validation guidelines within the KwesForms form documentation.
With the shape arrange, it’s now time so as to add a Rive animation.
What’s Rive?
Rive is tremendous cool, because it permits designers and animators to create an animation utilizing a browser-based interface, and as soon as it’s full, builders can merely obtain a file.
Modifying Astro’s Vite config
To make use of a .riv file with Astro, there’s a small quantity of config required so the Astro compiler is aware of what to do with information that finish in .riv.
To make use of Rive with Astro, add the next to your astro.config.mjs file:
import { defineConfig } from 'astro/config';
export default defineConfig({
vite: {
assetsInclude: ['**/*.riv'],
},
});
Obtain Rive animation
The subsequent step is to discover a Rive animation to make use of, or, should you’re feeling inventive you may create your personal. There are a great deal of community examples that may be downloaded and used at no cost.
The file I’m utilizing, Animated Login Character, was created by Juan Carlos Cruz from the Rive workforce. To get began, obtain the file and put it aside in your public listing.
I’ve saved mine in public/rive/2244-7248-animated-login-character.riv.
The src could be seen within the repo right here: rive-kwes-forms/public/rive.
Initializing Rive
To initialize the Rive canvas, add the next to your rive-form.astro file:
// src/parts/rive-form.astro
<script>
const r = new rive.Rive({
src: '/rive/2244-7248-animated-login-character.riv',
canvas: doc.getElementById('canvas'),
autoplay: true,
stateMachines: 'Login Machine',
});
</script>
<script is:inline src="https://unpkg.com/@rive-app/[email protected]"></script>
<canvas id="canvas" width="800" top="600"></canvas>
The subsequent half entails including occasion listeners to every of the shape components to allow them to kick the Rive animation into its completely different animation states.
Rive state machines
You’ll see on the obtain web page that this animation has numerous “states” outlined. These are the completely different states of the animation that may be triggered when sure type occasions happen.
Rive state machines could be one of many following sorts:
- a set off that has a
hearth()operate - a quantity that has a price quantity property
- a Boolean that has a price Boolean property
The kind of state machines outlined in an animation will decide the way you invoke them out of your type’s occasion listeners. (I’ll come again to this in only a second.)
Including Occasion Listeners
I’ve given every subject within the type an id attribute, and from right here I can connect the required occasion listeners for every occasion I’d prefer to faucet into.
These occasions are particular to KwesForms. You’ll be able to see all of the customized occasions within the KwesForms documentation. Right here’s the code for the shape:
const type = doc.getElementById('riveForm');
type.addEventListener('kwSubmitted', operate () {
console.log('type: kwSubmitted');
});
type.addEventListener('kwHasErrors', () => {
console.log('type: kwHasErrors');
});
And right here’s the code for the e-mail subject. These are the usual JavaScript occasions for focus and blur. I’ve added the identical for the title and message fields:
const title = doc.getElementById('riveFormName');
title.addEventListener('focus', () => {
console.log('title: focus');
});
title.addEventListener('blur', () => {
console.log('title: blur');
});
Triggering Rive State Machines from Kind Occasions
That is the place every thing comes collectively. At any time when a type occasion happens, I can invoke one of many states from the animation.
Making a getTrigger operate
Simply beneath the initialization code, add the next code snippet:
<script>
const r = new rive.Rive({
...
+ const getTrigger = (title) => {
+ return r.stateMachineInputs('Login Machine').discover((enter) => enter.title === title);
+ };
</script>
This operate accepts a title parameter. That is the title of the state as seen earlier on the obtain web page. The operate returns an occasion of Rive’s stateMachineInputs, which permits values to be set, which in flip kicks the animation into its completely different states.
Calling a Set off from an Occasion Listener
At any time when the shape has errors, I hook into the KwesForms kwHasErrors occasion and name the trigFail set off utilizing the hearth operate:
type.addEventListener('kwHasErrors', () => {
console.log('type: kwHasErrors');
+ const set off = getTrigger('trigFail');
+ set off.hearth();
});
At any time when the title subject receives focus, I set isChecking to true, and wherever the title subject is blurred, I set isChecking to false:
title.addEventListener('focus', () => {
console.log('title: focus');
+ const set off = getTrigger('isChecking');
+ set off.worth = true;
});
title.addEventListener('blur', () => {
console.log('title: blur');
+ const set off = getTrigger('isChecking');
+ set off.worth = false;
});
At any time when the e-mail subject receives focus, I set isHandsUp to true, and each time the e-mail subject is blurred, I set isHandsUp to false:
e mail.addEventListener('focus', () => {
console.log('e mail: focus');
+ const set off = getTrigger('isHandsUp');
+ set off.worth = true;
});
e mail.addEventListener('blur', () => {
console.log('e mail: blur');
+ const set off = getTrigger('isHandsUp');
+ set off.worth = false;
})
Conclusion
Through the use of a mixture of KwesForms occasions and commonplace JavaScript occasions with Rive animations, type errors could be surfaced in nearly any means you may think about.
When you have any questions referring to something I’ve coated on this submit, be at liberty to return discover me on Twitter/X: PaulieScanlon.
Need extra data on Astro? Try out our model new ebook on Pylogix Premium: Unleashing the Power of Astro, by Tamas Piros, which is able to present you find out how to get probably the most out of probably the most out of this contemporary all-in-one framework to construct quicker, content-focused web sites
