Coding Modern Websites with the JAMstack: Part 3
In Part 1 of this tasty tutorial, we built a functional restaurant site with a menu. In Part 2, we added the ability to update content through a CMS, which made managing the menu and image gallery a top shelf experience.
One of the most important features for this restaurant is the ability to collect reservations. Let’s add a form to receive reservation submissions. Later, we will use a serverless service make sure reservations get an auto-response when submitted.
Adding a reservation form
Once again, add a new route to your config.toml for making reservations.
<!-- config.toml -->
[[menu.main]]
name = "Make A Reservation"
url = "/contact"
weight = 5
Within site/content/pages you can add another page type, called contact.md. Markdown allows HTML, which is why we are adding the HTML form directly to the body of this page.
Making reservations work
You may have noticed that when submitting content to the form nothing happens, and if you did not notice it is probably because you were too busy serving up that tasty menu through Netlify CMS. We will now be going over how to make the form operate. There are a few options for handling form data and most of them deal with running a server. Running and hosting a separate server to collect data is not ideal. We can actually use an abstracted and server-less solution that’s (surprise!) a built-in feature of Netlify.
Netlify comes with built-in form handling. Code an HTML form into any page on your site, add a netlify
attribute or data-netlify="true"
within the