Really Simple Form App
-
OK, bit naughty (sorry) adding this as a wishlist, but here we go.
I've struggled to find a suitable simple form app.
Everything is a darned obese elephant doing a job which a mouse can do.
And the mouse does a better (as in more functional) job !
(Yep, looking at you Nextcloud, formio, ohmyform, lime-survey etc. etc.)So I built one "to scratch my itch".
And it only seems fair to share it in case it helps others.https://git.cloudron.io/timconsidine/custom-form-cloudron
Configurable Form storing to Directus
This is a simple web app running in NodeJS to display a form and write the responses to a
Directus collection
.By "simple", I mean it is NOT a full-blown forms solution, and is not meant to be. This gets the job done simply, easily, without installing an elephant to pull what a single mouse can do by itself.
The primary page displays the form with fields you set in
config.json
.A second page allows the viewing of responses as a web page, which can be printed using standard browser functionality to paper or PDF.
Data is in Directus ready for use in another app if needed.
A key feature of the app is that the primary app and form elements can be set in the app's
.env
file.- DIRECTUS_TOKEN
- DIRECTUS_COLLECTION_URL
- YOUR OWN FORM FIELDS !!
- VIEW_PAGE_USERNAME
- VIEW_PAGE_PASSWORD
- PAGE_TITLE
- HEADER_TITLE
- SUBHEADER_1
- SUBHEADER_2
- FOOTER_BACKGROUND_COLOR
- FOOTER_TEXT_COLOR
- YOUR LOGO (upload to /app/data/public)
Just edit
/app/data/.env
AND RESTART THE APP.The form is deliberately not highly styled.
Minimalist and functional, not whizz-bang.
Want whizz-bang ? Go for it - editindex.html
.The view page is password-protected - change the values in
/app/data.env
.
The view page is also very plain design, so that it can easily be printed to paper or PDF.
This is the form page.ToDo :
- add support for additional form field types (date, checkbox etc.)
[I only needed text and select initially]
-
Nice job!
-
I have added support for additional field types :
- decimal
- integer
- checkbox / boolean
- date
-
Thanks for this, Tim. Does it support uploading a file as part of the form? For example, could questions include:
Please upload a .pdf / .img / .mkv
If so, where would the storage be and how is it configured?
Also, do you have a screenshot of how things look when you have had several responses to a form? For example, if the form had three questions and 4 respondents, how would it look?
-
@LoudLemur file upload is not currently supported, but it's a great suggestion, and I will add it to the
ToDo
list.Storage : sounds like you have a preference ?
I'd probably add afiles path
to the configuration for somewhere in/app/data
, e.g. default /app/data/files.
Where would you want it to be ?Here's a mock-up with dummy data, showing the view page.
Design is "clean" to be printed to paper or PDF using browser print function.And the Directus view is quite clean and useful :
If you have a form in mind, let me know and I will knock one up for you.
-
Current
ToDo
list :- add simple admin screen to edit config.json (saves launching File Manager to open file)
- add additional text area to main form page (for instructions, explanations etc.)
- add some anti-spam measure, maybe just a privacy-friendly captcha (concept is open access form submission, but anything open can attract some robot after long enough)
- add sort functionality for the View page (to sort responses by a form field)
- add file upload
Happy to consider other additions.
-
Thanks for asking!
For data storage, I would like it to be the Cloudron default, /home/yellowtent/appsdata/...
Then wherever would be easiest for some alternative block/object storage, if another location were chosen. It would be sweet if a storage allowance for the application could be set to an arbitrary value from the admin panel. Maybe deleting older uploaded content on a first in / first out basis, if the limit is reached.
I hope that the form supports responses in the form of a radio button choice / check-box, too.
As a stretch goal when everything else is sorted, maybe code it in such a way that data could be presented using e.g. Apache eCharts: https://echarts.apache.org/examples/en/index.html#chart-type-sunburst
-
@LoudLemur a lot of it was written by AI !!
Reviewed by me (but might be better to trust AI more as I am not a Node developer ) -
@LoudLemur I will take a look at Apache Charts, but not really into it, and it might not be within scope of "really simple form" app.
Directus might also be able to store file uploads - haven't checked - but I am not a fan of files in database storage.