Securing a google form in Jekyll

A long since made post on how I used a google form embeded in my previous version of this site as a contact me form backend. This showed how I added in extra security to stop malicious code being passed into the form and therefore being a spam magnet.

I’m a keen user of Jekyll for my web design and personal blog, but one of the short falls is not being able to easily install a contact form of your design and control. Here I build talk about what I learned putting a google form on a jekyll website.

What was I using before

I knew I didn’t want to just embed an email address. I knew that’s just to easy for bots to scrape and use to send spam. So a contact form was what I wanted. The options were limited but I settled on Formspree. They have a free plan and a good install which looked secure. It worked as expected as I was happy with what they enabled.

However, after reading how to style a google form to match my website with this blog post from Webjeda, I started to think about using this on my blog. Knowing and using google, I felt more comfortable using their tech in my site so set about to create a new form. Thanks to their instructions it was up and running in no time.

This had added benefits of storing the replies in the form in a google sheet and being able to create a bespoke email template when forwarding on the responses to the form (more on that in a later blog post)

The Problems

But one issue came up. Spam and links within the forms I didn’t want to see. Google have yet to insert any form of recaptcha or security on a form (come on google), and I didn’t fancy spam, or something worse, coming through.

Locking down the google form

Two parts to this with suggestions for both

1. Reducing what the front end would allow
2. Locking down what the form in the background would accept.

The front end

With forms you can set a pattern and what to include using regex. This sets what is and isn’t acceptable entries. You can see some variations below. They can be made to suit most common fields.

Letters and Spaces only

<input type="text" name="entry.111" value="" placeholder="Name" pattern="^[a-zA-Z\s]+" title="Letters and spaces only please." required>

Allowing only numbers to fit with the number you need.

<input type="tel" name="entry.1518353692" value="" placeholder="Telephone No" pattern="^[0-9]$">

Just letters and a few common punctuations for a text area such as commas, full stops, spaces and a few others.

<textarea name="entry.820186773" rows="8" cols="26" placeholder="What would you like to talk to us about?" pattern="^[a-zA-Z\s\d\U002E\U002D\U002C\U002B
\U0021\U003F\U0028\U0029\U00A3
\U0022\U0027\U0026]+" required></textarea>

The back end

What we must remember is, even though you embed the form on your site, someone can go to a url of your form. So we need to replicate what we’ve done on the front end on the form itself to ensure it’s protected no matter what.

You do this by adding in data validation to each question, making sure it only accepts what is needed.

So what’s next?

Now the form is much more secure, we have less concern about what can be submitted or the form used form. I did then turn that form submission into an automated email using google sheets. Perhaps one to pick up again in the future if I want to re-add a contact form to this version of the site.