I’m trying to create a website that has a form that allows people to enter data directly into a json/yaml/toml file (doesn’t matter which, I don’t have a preference).
It’s easy to pull data out of the file to display, but I want people to submit their own information and have it saved to the file.
I don’t have any code yet since I’m not even sure where to start on the form. I thought it would be super simple, just create a form and have it submit the data to the file, but I can’t find the instructions in my Hugo book or online, here or otherwise.
I’d love some help if anyone has time to give me a hand.
Thank you!
You would need a way to send a POST either using a form or AJAX. That’s not something that can be done with a ‘pure’ static setup. You’ll need to use some type of server side code or you will need to use some type of ‘serverless’ functionality (basically the client calls a different server, usually some type of FaaS (Function as a Service)).
There are also kinds of security implications to accepting user data, so it’s non-trivial.
I appreciate the reply. I thought I could make it happen with Node.JS, but I can’t seem to figure out how to write to the JSON file (I know it should be a simple fs.write(), but I’m not sure how to integrate that with Hugo. It’s so simple to read JSON in Hugo, and I get that it’s static, which is the whole point. But it’s just submitting trivial data (no PII or anything) to a json file. I just wish it was simpler.
I figured ajax would work as well, but I’m not really savvy with ajax so I wasn’t sure/where to implement it.
Thank you for your thoughtful reply.
Take a step back and think about how you want to deploy the page. What you want is not in the scope of a STATIC page. You need a way to get the info from the form into your site which in Hugo’s case basically means you want a form to submit into a git repository. Depending on WHERE you host your site you can use services doing that. On Netlify I would use what they call “Functions” that takes a form submit and does something with it (like transforming POST data into a JSON structure). Other providers have other features.
If that is not possible where you are hosting, then using a static site generator is wrong for your use cases. There is a reason why there are CMSses with databases.
A quick google brought this “awesome” list to light… maybe something in there to help your case?
Thanks, I suppose I should have given a scope of my project in the original post. But basically it’s going to be super simple. It’s a site that provides budgetary information on social services, we want people to be able to search the information we already have collected into our json file (super simple, reading json/toml/yaml in Hugo is amazingly easy). The bump comes when we want to collect information from users. I know Netlify has a form you can add in to get responses, but we don’t want to have to manually add that information into the json file so I’m looking for way to have to written to the file.
The project seems super simple in theory! I don’t wanna use Flask, but that’s my other option. I appreciate your response, and hopefully my information clarified what I was looking for. I’m going to go through that list and see what might be most useful.
Thank you!
Google Docs Forms? Adds the responses to a spreadsheet. Implement it via iframe on your site? As far as I know there are API ways to get a Google Spreadsheet into json format in the end.
1 Like