[Hot Sun Trail ver2.0]Contact Form 7でつくる、問い合わせページ

前から実装しようとしていた問い合わせページ。今回実装してみた。

こっちのブログも近いうちに設置しなければ。

設置まで

まず、WordpressのプラグインであるContact Form7をインストール。
有効化すると、左のメニューに「お問い合わせ」という項目が増えていることが分かる。

「お問い合わせ」をクリックして、「新規作成」をクリック。
そうするとコンタクフォーム編集画面が表示される。
その後、”無題”となっているタイトルをクリックして入力。保存を押すとコードが表示される。
このコードを、作成しておいた固定ページに張り付ける。これだけで一応フォームとしては成立するのだけれど、もう少し設定をしていく。

“フォーム”欄に移動。ここで必要な入力欄を削ったり増やしたりできる。
CSSで編集することも考え、ここで様々なタグ付けを行える。

増やす場合は、右にある「タグの作成」をクリック。一覧が現れるのでほしいモノをクリック。
特に変更がなければその”このコードをコピーして、左のフォーム内にペーストしてください。”の下にあるコードを左のフォーム欄に挿入。

そして”メール”欄。右の”メッセージ本文”に、上記の”フォーム”欄のパーツを下図のように挿入。
ポイントはパーツの名前だけを書くということ。例えば、[text* your-name]だったら、[your-name]のように書く。

“メール(2)”欄では、送信内容確認メールを送る設定ができるが今回は設定しないので次へ。

一番下の”メッセージ”欄も様々な変更ができるけれど、特に変えるところがなければそのままで大丈夫。ちなみに上の画像の”フォーム”欄にある[response]タグは、コレを表示させるためのもの。デフォルトでは一番下に表示されるが、変えたい場合は上の画像のように場所を変えることが出来る。

デザイン

参考までに、今回私がデザインしたフォームのコード。

このようにContact Form 7プラグインを使えば、簡単に問い合わせフォームが作れるので、試してみてもらいたい。