How can I create a Netlify CMS collection file upon the submission of a Netlify Form?

Question

I currently have a GatsbyJS app that is using Netlify CMS (NCMS) for content management and Netlify via GitHub for hosting/deployment.

I would like to build a very simple order form system, but I would like to use JSON files and NCMS collections to represent the data because I will have very minimal data requirements and I would like the ability to have the data administered entirely through NCMS.

For example, I have a Products collection and an Orders collection. Products is using a JSON extension and contains JSON files that represent each product. Everything is looking good there. For Orders, I want to be able to create new entries from NCMS OR from an order form in my app.

Creating Orders entries in NCMS should be simple enough using the relation widget to incorporate a Products entry into each order. What I'm trying to figure out is how I can create JSON files in my filesystem (repo) upon form submission. I assume this is possible in some way with GitHub webhooks because NCMS is doing this when you create files in their system.

Can I, using some combination of Netlify's Forms API, Netlify Functions and/or GitHub webhooks, create a file in my GitHub repository when a user submits a Netlify Form in my app?

If this isn't possible, my follow up strategy would be to save Orders data in a MongoDB database. I do not have any experience yet with Mongo, but I know it's based around a "flat" data format using a JSON like syntax. Could I possibly save my order data in a Mongo collection upon submission via a Netlify Lambda function, then trigger a build via Netlify, and in my app pull in Mongo data at build time, and somehow create a file for each order object, perhaps via Gatsby's API?

My last resort would be to set up an admin area of my app where orders could be viewed, modified, and deleted. I'd prefer to avoid this because a) I do not have Netlify Pro services and thus do not have access to password protected site access (though I'm not sure how NCMS utilizes Identity and is able to avoid the premium plan?), and b) I would like all data administration to occur through the same platform (Netlify CMS).

Answer 1

You can definitely do this with Netlify Form, Function & Github API. I've done something similar for one of my gatsby sites, where form data is submitted directly to a Netlify function.

If you'd like to take advantage of Netlify Form's features like spam prevention & email notification, I think it'll look something like this:

• Set up your Netlify Form

• Set up a Netlify function that listens to the submission-created event. In the body of the request, you'll find a payload object that contains the form data, as well as info about your site (in case you have a bunch of them). Netlify has a package that really ease up the development process.

• Trigger a call to Github API to either create a file for that submission or update an existing file that contains all submissions.

• At this point, you can set up netlifyCMS to read the content of that folder / file & allow admin to review / modify the submissions.

Hope it helps!