DEV Community

Cover image for Open-Source NoCode Form builder
haynajjar
haynajjar

Posted on

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} />
Enter fullscreen mode Exit fullscreen mode

Hope you like it,

Any feedback is very appreciated.

Top comments (0)