https://github.com/jesobreira/Bulma-Form-Builder

Web app for drag drop building Bulma forms.
https://github.com/jesobreira/Bulma-Form-Builder

Last synced: 13 days ago
JSON representation

Web app for drag drop building Bulma forms.

• Host: GitHub
• URL: https://github.com/jesobreira/Bulma-Form-Builder
• Owner: jesobreira
• License: mit
• Created: 2018-03-03T17:24:35.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-03-03T17:35:24.000Z (over 6 years ago)
• Last Synced: 2023-08-02T05:13:29.964Z (over 1 year ago)
• Language: CSS
• Homepage: https://jesobreira.github.io/Bulma-Form-Builder/
• Size: 207 KB
• Stars: 29
• Watchers: 3
• Forks: 10
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Bulma Form Builder

## What's this?

A Drag-and-drop form builder for [Bulma](https://bulma.io/) based on [Bootstrap Form Builder](https://github.com/minikomi/Bootstrap-Form-Builder).

## Where can I see it in action?

It's hosted on github pages [here](http://jesobreira.github.io/Bulma-Form-Builder/).

### Notes

* For development & debugging change the data-main for the require script tag in `index.html` 

  to point at `assets/js/main.js`. (Look just before the closing `` tag!)

* Once done, change it back to  build for production using the `build.js` script in the `assets/js/lib`

  folder and [r.js](https://github.com/jrburke/r.js/). Then revert to `assets/js/main-built.js`

* The full command is `r.js -o assets/js/lib/build.js` which should be run from the base directory.

### Adding new form elements

* In the [js/data/ folder](https://github.com/jesobreira/Bulma-Form-Builder/tree/gh-pages/assets/js/data/) are yaml files, each of which corresponds to a tab in the form builder.

* If you just want to add a new element you need to:

  - describe it in one of these files

  - parse the yaml to json using parse.rb in the same folder

  - create a corresponding template in the [templates/snippet directory](https://github.com/jesobreira/Bulma-Form-Builder/tree/gh-pages/assets/js/templates/snippet)

  - add the template to [snippet-templates.js](https://github.com/jesobreira/Bulma-Form-Builder/blob/gh-pages/assets/js/templates/snippet/snippet-templates.js)

* If you want to add a new tab, you'll also need to adjust the [app.js file](https://github.com/jesobreira/Bulma-Form-Builder/blob/gh-pages/assets/js/app.js) to make sure the tab is loaded.

Don't forget to switch to main.js rather than main-built.js, or the changes you make before compiling with require.js won't show up!