A Form builder built with svelte and tailwindcss
Most Form builders offer a powerful way to integrate and manage inputs, but they lack the design customization.
We built this simple form builder that can adapt easily with any website design.
Open Source
More details on how to install and use can be found on Form builder repo
Demo Link
Try it on Fouita Form Website
Cusomization
<script>
import FormEditor from "@fouita/form-editor"
// you can create a button to toggle the editable variable
let editable = true
let form = {
"name": "My Form",
"version": "18"
}
const settings = {
textColor: "250 250 250";
bgColor: "0 0 0";
outlineColor: "165 180 252";
buttonBgColor: "79 70 229";
buttonTextColor: "255 255 255";
borderColor: "200 200 200";
form: formSimple;
rounded: "rounded-none";
size: "full";
rtl: false;
transparent: false;
btnsPosition: "start"; // start, end, center
}
// get updated data
$: if(form) {
// form is updated
}
function handleSubmit(evt) {
// send data to your server
}
</script>
<FormEditor bind:form {editable} {...settings} on:submit={handleSubmit} />
Hope you like it,
Any feedback is very appreciated.
Top comments (0)