NoCode Customizable Form Editor
- Customize text and inputs (WYSIWYG)
- Multi Steps Forms
- Customize colors
- RTL support
- Add images and videos by inserting a link inside the text
- Form Schema is exported so you can manipulate the data yourself
- Form data is dispatched when user click on the Submit of the last step
npm i @fouita/form-editorInside your svelte app
<script>
import FormEditor from "@fouita/form-editor"
// you can create a button to toggle the editable variable
let editable = true
// initial form schema needed
let form = {
"name": "My Form",
"version": "1",
"steps": [{
"index": 0,
"props": {
"previousBtn": "Back",
"nextBtn": "Next"
},
"inputs": [
]
}]
}
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: form,
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} />To be able to see the styled Editor, you can either use form-editor.css in your index.html or you can build the CSS using tailwind
- Copy the file
tailwind.config.js - Generate a seperate CSS for the Form Editor using the following command in your project
npx tailwindcss -i ./src/global.css -o ./public/form-editor.css --minify( change global.css to your css file that includes @tailwind)
gloabl.css
@tailwind base;
@tailwind components;
@tailwind utilities;Include the file in your HTML index file
<link rel="stylesheet" href="/form-editor.css" />You can use the form-editor in your project as an external widget, with backend data collection at Fouita for Free
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent