Building Contact Me in Websites

A friend asked me how he can build a Contact-Me form for his website for free. I thought for a moment only to conclude that there is probably no easy, straightforward and free versions way to implement the same. So, I did a quick survey of ways in which we can implement it.

1: Use Google Forms:

Use a simple Google form in my personal Google Drive, shared here and paste the share by iframe link to the HTML page. Responses are shared in the Google Forms.

<div>

    <iframe src="https://docs.google.com/forms/d/e/xxxx/viewform?embedded=true" width="800" height="1000" frameborder="0" marginheight="0" marginwidth="0">
        Google Forms within an iFrame
    </iframe>
</div>

Demo is here:

2: HTML mailto link:

One can simply use HTML mailto link to implement this as showcased below. I am using this approach in own website’s contact me form, check it out here. This approach is very safe as it lets the clients on user’s device handle the mailing part, but can cause a lot of drop offs.

    <a href="mailto:vishwaraj.anand00@gmail.com?Subject=Hello">Send Mail</a>

Demo is here:

Note that this method can cause drop off is email client isn’t set:

3: Use third party services:

One can also choose to use third party servive providers for implementing the Contact Me button. Also check whether your website hosting service provides any free plugins or not, because third party could be paid or may be limited in features for free tier. One such example is Simple Form, which I have not implemented/demoed but thought to reference here for completeness. Note that adding the API tokens in plain HTML will lead to abuses and its usually required to manage them via a secrets store or have it only in the backend (example if using PHP).

<form action="https://getsimpleform.com/messages?form_api_token=&lt;XXXX&gt;" method="post">
    <input type="hidden" name="redirect_to" value="http://vishwarajanand.com/" />
    <input type="text" name="name" placeholder="Name" />
    <input type="text" name="email" placeholder="Email Address" />
    <input type="text" name="message" placeholder="message" />
    <input type="submit" value="Submit" />
</form>

My Take Away

I felt it was not so straightforward to implement but frankly also not have many dependencies to slow down. This aggregated knowledge maybe found only on other blogs. As POC, I made a simple website to demo this: ContactFormDemo.