Open-Source NoCode Form builder

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.