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.

In short, if you fill out the form right now, your entry is pretty much going nowhere. It won’t go to my email and it won’t go in some server-side database. Materialize doesn’t provide you ways on how to make the forum work, after all, the framework is just a CSS framework powered with some Javascript/jQuery.

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.

And you know how we web designers/developers are when it comes to security. One easy option would be to just build it using the old HTML, but then, it would be insecure, and then our inbox would be filled with a lot of these spambots. The only option we could think of that can be compatible to static site generators such as Hugo would be by using Javascript (to be more specific, jQuery and Ajax). But then, that would be extra work on our end and I am not well-versed with Javascript alone.

Hello Formspree!

I searched high and low around Google and ended up going to the Hugo help forums. Among the solutions, two of them were commonly suggested: FormKeep and Formspree.

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!