Materialize Forms and Formspree
As you can see with the title above, this is more of like an omake (extra) step in building your wireframe/layout using the Materialize framework. Around this time, you should now be familiar with Materialize’s awesome components and how you can use them the proper purposes. I’ve already used quite a number of those components in the CBLW layout, and one of these components have become my favorite: Materialize Forms.
This is the contact form that I recently built with Materialize Forms. This is located at the bottom of the Exits section.
You can also view the demo right here to test the form.
Now, the Materialize documentation teaches you how to add certain functions that you would normally find in an online form, such as text fields, textarea fields, radio buttons, multiple boxes, etc. As you can see, building this form using Materialize is super-easy, except for one thing.
The form doesn’t have a processing script that would make this form work.
Why not use a PHP form script? Every (hobbyist) web designer/developer does!
It’s an easy solution to suggest using a free PHP form script of some sort to make our Materialize form work. I would for sure go for a PHP form script if I’m building CBLW with PHP functionalities and saving my files in PHP file format. But as you can see, I’m not.
Hugo is a Golang-based static site generator that generates HTML files through Markdown files and other types of text files that are not server-side. This would mean that Hugo doesn’t do server-side scripting like PHP and others like Ruby and Python. This would also mean that Hugo doesn’t do databases either. Therefore, in short, a PHP form script will not be read by Hugo at all.
I checked out FormKeep first, and it does look promising, but then something turned me off. FormKeep is a subscription-based service, and that you would have to pay a monthly subscription fee to use their form processing service. The cheapest one is $29/mo for only 4 forms. If you want to use FormKeep for more than 4 forms for your future projects, you would have to pay more. So, I abandoned this idea and went to next option.
Formspree became a God send for me. First, you don’t need to sign up for an account whatsoever. On the main page, the necessary codes and instructions, as well as options to improve your form are all available to you right there. You have an option of upgrading your account to a Gold level if you want more features (such as better security, access to submissions archives, etc.). Unlike FormKeep’s ridiculous subscription prices, you pay $9.99/mo. I’m not gonna be a power user just yet, so I’ll be sticking to the free version.
Integrating Formspree with our form
Here is the code for the contact form that you’re seeing on the screenshot above and the demo link you just visited.
As you can see, there are some missing attributes there, such as the
action attribute and the
method attribute. This is where we will be using Formspree’s code to activate our form.
After going through the options indicated in the Formspree home page, here is the code that I implemented. Read the comments in the code too for explanations on each field.
And that’s it! Your form is up and ready to go!
A few extra steps in the future?
There may be some omake steps that I will be adding here if I run into some trouble. Just stay tuned and keep visiting the site for more!