今日のカウントダウンは、10分で問合せフォームを作成した話を取り上げようと思います。5分でできるようにまとめたので、少しおつきあいを。

まずは背景から。ShifterではPHPを動かすことができないため、従来の問合せフォームプラグインは利用できません。ユーザが送信ボタンを押して送ろうとしたデータが WordPress のデータベースに保存させようとしている限り、フォームは動作はしないでしょう。

これは、 Shifter がより安全かつ高速なサイトのために、徹底的に静的化された WordPress サイトを生成した結果、静的ファイルからはデータベースに直接通信できないためです。

このあたりについての詳細などは、サポートドキュメントの key features explained にて解説していますのでご参照いただくか、サポートまでいつでもお問い合わせください。

ともかく、問合せフォームを作成するためにプラグインをわざわざインストールする必要はありません。このデモでは、Formspree を使うことにします。

Formspree は問合せフォームサービスのプロバイダです。「静的サイトと最高の相性」という彼らのキャッチフレーズには、僕らも同意します。フォームの登録内容が目的のあて先に送信するという点では、他のフォームと同じではあるものの、Formspree には他にも多くの機能が備わっています。

スパム対策やフォームの設置ページのヘルプが必要だったり、複雑なルーティングが必要だったとしても、Formspree は静的サイトで上でもすべてが可能にしてくれます。

セットアップはこれ以上ないくらいにシンプル。無料で使うだけであれば、サービスへのサインアップすら必要ありません。フォームを作って、送信先のメールアドレスを入力するだけ。メールアドレスの認証が完了すれば、設定は完了。Shifter と WordPress を使うフォームの出来上がり。

ステップ・バイ・ステップのガイドは次の通り:

Shifter で新しくサイトを作るか、既存のサイトを起動してください。今回は 「Formspree デモ」と名前を付けて新しくサイトを作りました。自動インストールされた WordPress に、パスワードレスログインを使ってログイン (毎度のことながらこのログイン機能には驚かされます) 後、ページを作ります。タイトルは、それと分かるよう「Contact Us」とします。ここから面白くなります。WordPress の新しいエディタ Gutenberg には新しいブロック要素が備わっています。編集画面で直接 HTML を書き込めるようになっています。これはとてもありがたい機能で、僕も気に入っています。

formspree.io を開いて、サンプルコードをホームページからコピーし、HTML ブロックにペーストします。

このデモでは、このフォームを少し手を加えて、フィールドを追加しました。また、僕らの顧客がちょうどここのフォームを使用しており、そのサポートを必要としていましたし、僕らもその設定をいとわなかったこと付け加えておきます。

僕の作ったデモフォームは、オープソースにしているので、GitHub で見られます 。
Form Demo HTML次のステップが重要で、フォームの送信先に使うメールアドレスを更新する必要が出てきます。このデモで指定しているメールアドレスはあくまでも例です。

編集の必要な行はこの1行です。

action="https://formspree.io/email@domain.tld"

一度メールアドレスを追加して、ページを保存したら、まず新しく aritfact を生成してください。
これで、問合せフォームを備えた「 Contact Us 」ページのある、静的 WordPress サイトを作成します。

できたサイトはこちらです。

フォームは承認を待つのみとなっています。どんなメールアドレスでもフォームに設定できるわけではなく、承認をする必要があります。
フォームの動作テストを行うと、Formspree ページへリダイレクトされます。これが設定したメールアドレスへの確認メールの送信トリガーとなります。
メールソフトを開いてメールが届いているかを確認してください。
届いていたらメールを開き、本文内のアクティベーションリンクをクリックしてください。
この操作により、サイトの準備ができました。静的 WordPress サイト からのメールを Formspree で受け取ることができるようになります。スパムメールの対策について。
もちろん、スパム対策もhoneypot ボットを用いて更に多くの機能もあります。有料のプランに切り替えスケールをして、より多くの機能を使うこともできます。

Formspree を知るお手伝いができたかと思います。この会社は、面白い試みをする素晴らしい企業です。

ご意見・ご相談があればいつでもお知らせください。

追伸: デモサイトはこの URL にて公開中。