A while back, while I was working on my first web developer portfolio, I knew that I wanted a contact form on my page. Every solution I could find to handle emailing the form to myself required an API key. Having an API key means a hidden .env file on a backend else you might suffer the wrath of the endless army of bots scouring the web.

I will be honest, I did not want to write a backend just to handle a single ‘contact me’ form on my portfolio. It did not seem to be a valuable use of my time on this project. Sending an email to myself would have been the only reason for adding a backend to this project, and considering that I was already going to be hosting my first site (something I had never done before) on an AWS server (something I had never used), the idea of figuring out how to host a backend on this server as well just seemed to add a lot more time to my portfolio launch schedule. A longtime friend of mine had mentioned to me that he had heard you could use google forms as a workaround for something like this, and I began to research how I could go about doing this.

How to Tie Your Frontend Contact Me to Google Forms

So getting this to work is surprisingly a very simple process. Below is a code snippet of all the information required for the ajax post request (I am using Axios to write syntactically simpler AJAX calls, but this is not required). We need the public URL of the google form, the multiple entry ID’s to tie the form data into the post request, and the CORS proxy. Below that we just add all of the ID’s and the form data you captured from your frontend form. For now I would just enter empty strings for the URL and ID’s since we don’t have this information yet. Each of the ID’s must be appended to the form we’ve created as well as the corresponding information from the front we wish to associate with it. So MESSAGE_ID is the ID of the of the google form for the message field, and form.message is the information from my frontends message input field, more on this later. Finally, we take the CORS proxy, concat it to the public Google Form URL, and attach our newly structured form data and send it all in a post request.

#web-development #google-forms #contact-me #portfolio #javascript