HTML Form to File.txt

Summary: HTML/JavaScript form that saves user input into a text file in Markdown format with YAML front matter for use on your local computer. Use to quickly create a post for publishing with a static website generator such as Hugo or Jekyll.

After a site redesign my photo publishing workflow is as follows:

1. After choosing a photograph in Lightroom, I export it into the images folder of my Hugo-powered site on my computer.
2. I create a plain text file (in my case, in Markdown format with YAML front matter) specifying the title, date, location, tags, and so on, and save it in the content folder.
3. I type ./deploy in the Terminal so Hugo generates the site with latest changes and pushes them to a GitHub repo that generates simongriffee.com.

Opening a text editor and writing down the information takes time so I thought I’d try to make the workflow faster. I could have written a Lightroom script to publish a photograph’s EXIF information to a text file, but decided instead to make an HTML form with some JavaScript to do the same.

I did this because:

1. As is often the case with web programming, someone else had already done most of the work.
2. Anyone who has a web browser can make use of the script, and it can be modified for other use cases.
3. A web form is a familiar user interface with built-in advantages provided by the browser like pressing the Tab key to go to the next field and remembering previous input with autocomplete for repetitive entries. For example, if I often publish photos taken in New York City, using a form input field like Location: lets me type the letter N, press the ↓ down arrow and then press Tab to fill in the previously entered value and move to the next field.

Here’s a demo. Go ahead and fill it in and click the Save to File button:

To use:

1. Download and save this index.html file to your desktop or any location on your computer.
2. If you like, edit index.html to add your own front matter fields. This involves modifying the JavaScript and HTML. Comments indicating these fields are present in the code.
3. Open index.html locally with your web browser, fill in the form fields and click Save To File. You can also put index.html in a folder on your web server so you can access it from any computer, as I’ve done here.

I’ve tested the script on the latest version of Firefox on Mac OS. It also also works on Chrome, but the autocomplete doesn’t seem to work unless the form fields are wrapped in a form tag with the autocomplete attribute (<form autocomplete="on">…</form>), and when I do this the entire form disappears in Firefox. I’m investigating and appreciate pull requests on GitHub.