Adding a firebase backend to my portfolio form.

Previously, this form consisted of a PHP script that would just send me an email of the results. For me, this isn’t a very organized approach and I want something that is all managed in once place.

Enter GCP, and it’s generous free tier which will more than accommodate my site.

     // Use push to generate a new reference
    const newContactRef = push(ref(database, "contacts"));
    set(newContactRef, {
      name: name,
      email: email,
      message: message,
      timestamp: new Date().toISOString(),
    })

test entry for Firebase

We have a connection!

So now that the data has a place to go, what are some ways to make sure that the data is legit?

That was fast!…too fast 🧐

A first approach could be implementing a limit to how often a user can submit the form.

let lastSubmit = 0;
const submitInterval = 5000; //5 second timer

document.getElementById("contactForm").addEventListener("submit", function (event) {
  event.preventDefault();
  
  const now = Date.now();
  if (now - lastSubmit < submitInterval) {
    alert("Please wait before submitting again.");
    return;
  }
  
  lastSubmit = now;
  
  //form submission logic here
});

While this is a small preventative measure, like moving a wad of cash from your driveway to under the floor mat, it is quite easy to get around since this code is client-facing.

Honeypot fields 🐝

We could implement invisible fields in the form that a bot wouldn’t know to skip. If the field is filled out and submitted, we know that it is a spam entry. Again, this code would be client-facing and easily exploitable by anyone, but I really like this as an initial solution.

Some other options 📃