kitsune.technology

The website kitsune.technology is built with Next.JS, ReactJs, and TypeScript. This project required some thinking on how to incorporate features and utilize Next.JS. One of the trickiest parts was the contact form.

I wanted to implement a security measure to prevent spam and captcha is commonly recommended. One reason is that I wanted a more privacy focused captcha. This meant that Google’s captcha would not work since it will track and keep information about a person’s device plus other computer verifiable information. One alternative that I found was Hcaptcha which does not store personal information.

When submitted, the contact form takes the information from the forms including the captcha token and sends it to an API for further processing. It makes certain that information is filled out correctly such as name, email, and message along with the Hcaptcha token. The token is verified by sending a fetch request to the Hcaptcha API, which will return an indicator if the token is correct.

During the contact form’s many verification checks, it will either continue with the submission process or when encountering an error return, an error message response back to the contact page. The error message will display what the error is and how to correct it.

If all verifications pass correctly, the API will send the contact form information to a designated email address. When all verifications succeed, the API will send a success response back to the contact page. One of the benefits of how the contact form is designed, it can be modified for additional fields or functions with relative ease.