Ghostはメール送信関連の機能を有していますが、少なくとも現在は標準的な問い合わせフォームの機能を提供していません
ここでは、Ghostで構築したサイトにGoogleFormを使って問い合わせフォームを追加する方法についてまとめます

目的

Ghostで構築されたサイトにWordPressのContactFormのような問い合わせページを追加したい

背景

何らかの連絡手段は用意しておきたいが、メールアドレスは公開したくないためメールフォームを設置したい

選択肢

外部のメールフォームサービスは数多く存在し、かつGhostが静的ページを生成できる(HTMLタグに対応している)ことから多くのサービスがそのまま使用可能と思われる

解決策

ここでは最も無難な外部サービスであるGoogleFormを採用することした
理由は割と柔軟で無料で広告もなく日本語に対応しており設置も管理も楽だからだ

入力項目(質問)を作成する

GoogleFormで新しいフォームを作成し、まずはタイトルを入力する
仮にメールアドレス、名前、問い合わせの種類、内容を求める場合、項目を下記のように追加していく

• メールアドレス
  • ※このとき、メールアドレスを収集するか否か問われるので有効にしておく
• 名前
  • 必須
  • 記述式
• 種類
  • プルダウン
  • 必須
  • 任意の項目リストを作成
• 内容
  • 必須
  • 段落

回答を設定する

問い合わせ内容の保存先の設定

[回答]タブのスプレットシートアイコンをクリックして保存先のシートを設定する

新しい回答についてのメール通知を受け取るようにする

[回答]タブの展開ボタン(:)からメール通知を有効にしておく

新規問い合わせがあったときにメール通知するように設定する

[回答]タブのスプレットシートアイコンをクリックしてスプレットシートを開き、[ツール]->[通知ルールの設定]で、ユーザーがフォームを送信したとき&その都度を設定しておく

デザインの設定

画面右上のカラーパレットから色の変更ができる
埋め込むことを想定するので、浮かないようにサイトの背景色と似た独自カラー(#FFFFFF)に設定しておく

確認メッセージの変更

画面右上の設定画面->[プレゼンテーション]の[確認メッセージ]に任意のメッセージを入力する

埋め込みコードを取得する

画面右上の[送信]->[<>アイコン]で表示されるHTMLタグをコピーしておく
横幅等は後で変更できるので気にしなくていい

Ghostに反映する

問い合わせフォームを設置したい任意の記事を編集し、埋め込みコードを入力する
このとき、widthとheightは調節したほうがよい

横幅を出来る限り最大化する

埋め込みコードをそのまま使わずに抜き出してjavascriptとcssを使えばより柔軟なデザインも可能だが、手間なので埋め込みコードのiframe要素に対して

style="width: 100%;"

を適用しておく

テストする

項目を入力して送信して、メールが通知されるのを確認しておく