Even a simple static webpage frequently ends up with having a need to store some form data. Think of simple "business card" type of website, where you have a contact form. The standard solution is to use some third party service like Google Forms, but that is not always the best solution, especially when valuing privacy. After all, there is no escape from using some kind of backend if you don't want to send your data to some third party service.
Formodoro is a simple local solution to this problem. It is an extremely simple form data storage that proxies both form data and JSON data to MongoDB. Think of it as of a little better version of long JSON with your form data. It is up to you how to use this data later, you can bundled Mongo Express to export it to convenient format.
In addition, Formodoro includes nice notifiers library to send notifications to your favorite service. Refer to the notifiers documentation for a list of supported notification services.
- Extremely simple to use
- Select MongoDB or TinyDB as a backend
- Saves arbitrary form and JSON data to the selected backend
- Supports CORS for easy integration with static websites
- Supports multiple notification services
- Optionally redirects to a custom URL after form submission for totally static websites
- Clone the repository:
git clone https://github.com/Trel725/formodoro.git cd formodoro
- Adjust environment variables in docker-compose.yml. See its content for details. In the simplest case, you can only change
CORS_ORIGINS
to your website URL. It is a good idea to also set up notification by settingNOTIFIERS_PROVIDER
and its settings, as well as change passwords. The most important isME_CONFIG_BASICAUTH_USERNAME
as it's exposed externally. - Run the application:
the app is available at port 28100 by default.
docker-compose up -d
- Open your browser and go to
http://localhost:8081
to see the Mongo Express interface. - To test the form submission, you can use the following curl command:
curl -H "Origin: http://localhost:8080" -X POST http://localhost:28100/submit -d 'name=John' -d 'email=john@example.com' -d 'message=Hello'
- Or you can use the following curl command to send JSON data:
curl -H "Origin: http://localhost:8080" -X POST http://localhost:28100/submit -H "Content-Type: application/json" -d '{"name": "John", "email": "john@example.com", "message": "Hello"}'
Additionally, you can pass the redirect URL as a query parameter, e.g.
http://localhost:28100/submit?redirect=http://example.com
.
This might be useful if you want to redirect to a different URL after form submission.
Formodoro supports two backends: MongoDB and TinyDB. MongoDB is a powerful NoSQL database that is suitable for production use, while TinyDB is a lightweight, file-based database that is easy to set up and use for small projects or testing purposes. TinyDB is true open source, while MongoDB has its own license, enforcing some restrictions on usage, see MongoDB license. To be completely open source, Formodoro uses TinyDB as a backend by default. If you want to use MongoDB, you need to use docker-compose.mongo.yml
override as follows:
docker-compose -f docker-compose.yml -f docker-compose.mongo.yml up -d
In the simplest case, you can just add URL of your server running Formodoro to your form action. For example, if your server is running on https://yourserver.com
, you can use the following HTML code:
<form
action="https://yourserver.com/submit/?redirect=https://yourserver.com/success"
method="POST"
>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="surname">Surname:</label>
<input type="text" id="surname" name="surname" required />
<button type="submit">Submit</button>
</form>
Note that the redirect
parameter can be used to redirect to a different URL after form submission, e.g. to a success page without any JS or other dependencies. If the method fails, redirect will not be performed.
Take into account that this example assumes that /submit
is mapped to the Formodoro server. If you are using NGINX server, this can be achieved by adding the following lines to your NGINX configuration:
location /submit/ {
proxy_pass http://localhost:28100/submit;
proxy_set_header Host $host;
proxy_set_header Origin $http_origin;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
When reverse proxy is not used, you can directly use the Formodoro server URL in the form action, e.g. http://yourserver.com:28100/submit
, but this is strongly discouraged as it uses naked HTTP.
Ideas for improvement are warmly welcomed.