Recently I ported my WordPress blog to Hexo. I became frustrated with the invalid login attempts to my site driving up the costs of hosting on my Pay-As-You-Go plan with Azure. The benefit of a static site created by Hexo is that I do not have to worry about those attacks, however static sites do come with some drawbacks.
The first drawback I encountered was creating a contact form for my site. Since there is no communication between the browser and the server to send an email from the form I used a third-party client FormSpree. The benefit here is they check the message before sending it to me. I have since used their service, which is free for under 1,000 messages per month, for a couple of clients wanting static sites.
I started by creating a contact page in hexo and adding the page content to the index.md file generated by hexo.
After writing this I created a template for the contact form. I want to have the option of creating multiple contact pages for various purposes such as blog content, podcast editing, or freelance work.
Using Bootstrap’s grid system I set the form to the left of the page and the content from the index.md to the right. I tried several variations and eventually found an example at www.knownly.com. This is also where I learned about the FormSpree. I adjusted the example to fit within the hexo framework and added some of my own style.
Each field in the form is encapulated in a fieldset element. FormSpree requires a name for each input with the return email address as “_replyto”. The “hidden” inputs check for bots and add a subject line respectively.
In the CSS below you can see the transition and transformation made when the input element is in focus or when filled. The input field itself is hidden until the label is selected and then the label transitions to below the input element. This creates a pretty cool effect demonstrated in the following image.
To see the full source code of the themes I’ve built check out my BitBucket account.