https://github.com/fouita/form-editor

NoCode form builder built with Svelte and Tailwindcss https://fouita.com/explore/form-builder
https://github.com/fouita/form-editor

form-builder form-editor forms svelte tailwindcss widget

Last synced: about 1 month ago
JSON representation

NoCode form builder built with Svelte and Tailwindcss https://fouita.com/explore/form-builder

• Host: GitHub
• URL: https://github.com/fouita/form-editor
• Owner: fouita
• License: mit
• Created: 2022-12-29T13:20:39.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2022-12-30T09:50:27.000Z (almost 2 years ago)
• Last Synced: 2024-09-29T14:36:33.216Z (3 months ago)
• Topics: form-builder, form-editor, forms, svelte, tailwindcss, widget
• Language: JavaScript
• Homepage:
• Size: 259 KB
• Stars: 43
• Watchers: 2
• Forks: 5
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Form Builder With Svelte & Tailwindcss

NoCode Customizable Form Editor

### Demo 

[Demo Form Builder](https://fouita.com/explore/form-builder/forms/0x57341/edit) 

### Screenshots

![Form Builder Fouita](https://cdn.fouita.com/0x2713/media/imgs/form-builder-2-1672321442528.png)

![Form builder Fouita](https://cdn.fouita.com/0x2713/media/imgs/form-builder-6-1672322223740.png)

![Form builder Fouita](https://cdn.fouita.com/0x2713/media/imgs/form-builder-5-1672322203693.png)

## Features

- 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

### Install

```bash

npm i @fouita/form-editor

```

### How to use

Inside your svelte app

```html

  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

  }

```

### Generate CSS

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

1. Copy the file `tailwind.config.js`

2. Generate a seperate CSS for the Form Editor using the following command in your project 

```bash

npx tailwindcss -i ./src/global.css -o ./public/form-editor.css --minify

```

( change `global.css` to your css file that includes `@tailwind`) 

`gloabl.css`

```css

@tailwind base;

@tailwind components;

@tailwind utilities;

```

Include the file in your HTML index file

```html

```

## Use it as widget

You can use the form-editor in your project as an external widget, with backend data collection at [Fouita](https://fouita.com/explore/form-builder) for Free