HTML and CSS have been wonders for many seeking to build and display content on the internet, and while form elements have been part of the spec forever, the ability to solidly process data collected is still a challenge for many. The simple ability to take form data, email it, and show the user a confirmation message has come in many options.
For me, I would originally use a formmail script in Perl, but it was buggy and contained many security holes. Later when I learned PHP, it grew easier to have the data sent to a confirmation page (or even within the same page) and then display a message, but refreshing the page for a simple form can lead to issues as well, and I wanted forms that didn’t need a page refresh.
The biggest challenge to this issue was mostly on what technology I wanted to use. I had many peers speak of just using a CMS, or downloading a framework and using its functions, but I’m a very DIY kind of person and I like to know how things work as much as I want them to work. After plenty of research, I found my answer in AJAX (Acynchronous JavaScript and XML).
My start was to see how one pulls data from a web form using JavaScript and then to send it someplace. This is not a total JavaScript solution, but one combined with PHP. The JavaScript takes care of the processing of the data as well as animations, and the PHP handles sending the data to an email, or posting it on a database.
Once I had figured out how to pull the data and send it as a data string to the PHP, I then worked to make sure the appropriate messaging would be sent to the end user. It wasn’t just about a “success” and “error” message, but also a “processing” message as the form does its task. I also wanted this form to clear itself after processing, again to fully show the user his/her data has been sent. Security was also worked in, but I’d prefer to not elaborate on how I secure my forms.
This simple script has been in my repertoire for a long time, and I still use it to this day. I’ve had some impress on me how I could “do better” with WebSockets, but I agree more with the opinions that simple email forms do not need such a large powerhouse. Granted I’d use WebSockets if I were making an app in React of Vue, or use whatever form processing setup a CMS might offer, but it’s still great to have an option for more static sites that aren’t using a full back end.
I currently have validation on a more simple level where if one of the required fields isn’t fulfilled, then you get the “error” message, but I’ll eventually put in a switch and expand the script so it will tell the user which field(s) they need to complete. I also wouldn’t mind revisiting it and creating some kind of “generator” so one could make their own script easily with the form setup they want to use, or somehow fix up this script so one doesn’t need to customize it based on how many form fields they put in their web form.