Really Simple Form App

[timconsidine]

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 - edit index.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]

[andreasdueren]

Nice job!

[timconsidine]

I have added support for additional field types :

• decimal
• integer
• checkbox / boolean
• date

https://git.cloudron.io/timconsidine/custom-form-cloudron

[LoudLemur]

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?

[timconsidine]

@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 a files 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.

[timconsidine]

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.

[LoudLemur]

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]

Also, are you going to try and have AI review or even 1st draft the code?

[timconsidine]

@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 )

[timconsidine]

@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.