The Humble Web Form

I am an independent web dev and have been for most of my life. If there is one thing you can count on as a dev, it’s that you will be making a web form.

If I have to use a form allot I am going to make it as easy to use and as idiot proof as possible. I realized I was doing my users a dis-service if I put any less effort into any of the forms I created for public consumption .

web form
a web form that I use on the reg

The image above is a screencap of the (v-)form I use for the manual link submission at HEADLIN3S. I use it often enough that I put significant thought into it. Providing visual cues about field length, expected input, and errors all improve the usability of this form. The icons, debatable.

I say (v-) because in the code it is a v-form. That’s because HEADLIN3S uses Vue and Vuetify as a front-end.

Web Form Submissions

The most common use of the web form is as a way to contact a website’s owner. This brings up the issue of what do you do when a contact form is submitted? Traditionally contact forms sent a website admin an email. Maybe the forms content is also added to a contacts database.

This made sense back when websites ran on machines that also ran mail servers, before everyone went SMS, etc. These days whether you are deploying to the GCP, Linode, CloudFlare Pages, etc. running a mail server in a pain is the ass.

I have approached this in a number of different ways:
  • Firebase functions
  • MailGun
  • Actual SMTP Mail Server
  • 3rd Party Form End Points

Each has its pluses and minuses.

If you are using the GCP Firebase functions are awesome. They are also overkill for a simple contact form. If you want to database your form submissions, perform some logic on the submission, etc. then Firebase Functions might be the way to go. Keep in mind that Firebase Functions include a good deal of overhead and will increase the size of your project.

Mailgun and similar services provide what I think of as virtual mail servers. You can send the content of your webform to the Mailgun API and choose what happens next. You will need to update MX records to choose this option.

If you are scared of MX records you are free to completely skip this section. Running a mail server is no joke. Even admins that know all the ins and outs of a web server can get tripped up trying to configure a mail server. Even if you do get it set up you have to make sure other mail servers trust it. It is an expensive solution as well.

Form Endpoints

That brings us to fourth option – third party endpoints. These are services that provide APIs that you can send your form data to. Basically you are subcontracting handling form data to a third party. I had no idea how many services like this exist. There are three that I can recommend:

Formcake

I like Formcake the best out of all web form services that I have tried so far. All things being equal I am going to sign up for the paid dev plan after my testing phase.

The other 3 services that I have tried and that work as advertised are Formspree, 99Inbound and Formcarry. I would like to recommend Form.taxi but in my case it took hours for the submissions to show up. That is a deal breaker for me.

Leave a comment

Your email address will not be published. Required fields are marked *