[Hot Sun Trail ver2.0]Contact Form 7でつくる、問い合わせページ
前から実装しようとしていた問い合わせページ。今回実装してみた。
こっちのブログも近いうちに設置しなければ。
設置まで
まず、WordpressのプラグインであるContact Form7をインストール。
有効化すると、左のメニューに「お問い合わせ」という項目が増えていることが分かる。
「お問い合わせ」をクリックして、「新規作成」をクリック。
そうするとコンタクフォーム編集画面が表示される。
その後、”無題”となっているタイトルをクリックして入力。保存を押すとコードが表示される。
このコードを、作成しておいた固定ページに張り付ける。これだけで一応フォームとしては成立するのだけれど、もう少し設定をしていく。
“フォーム”欄に移動。ここで必要な入力欄を削ったり増やしたりできる。
CSSで編集することも考え、ここで様々なタグ付けを行える。
増やす場合は、右にある「タグの作成」をクリック。一覧が現れるのでほしいモノをクリック。
特に変更がなければその”このコードをコピーして、左のフォーム内にペーストしてください。”の下にあるコードを左のフォーム欄に挿入。
そして”メール”欄。右の”メッセージ本文”に、上記の”フォーム”欄のパーツを下図のように挿入。
ポイントはパーツの名前だけを書くということ。例えば、[text* your-name]だったら、[your-name]のように書く。
“メール(2)”欄では、送信内容確認メールを送る設定ができるが今回は設定しないので次へ。
一番下の”メッセージ”欄も様々な変更ができるけれど、特に変えるところがなければそのままで大丈夫。ちなみに上の画像の”フォーム”欄にある[response]タグは、コレを表示させるためのもの。デフォルトでは一番下に表示されるが、変えたい場合は上の画像のように場所を変えることが出来る。
デザイン
参考までに、今回私がデザインしたフォームのコード。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/*Contact Form 7*/ .wpcf7 p{ font-size:0.8em; } .wpcf7 p span{ color:#F00; } .wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 input[type="url"], .wpcf7 textarea{ border:1px solid #aaa; border-radius:5px; padding:5px; background:#F9F9F9; box-shadow:inset 1px 1px 1px rgba(0,0,0,0.2); } .wpcf7 textarea{ width:360px; } .wpcf7-submit{ text-align:center; width:100px; padding:10px 15px; color:#666; margin-bottom:30px; } |
このようにContact Form 7プラグインを使えば、簡単に問い合わせフォームが作れるので、試してみてもらいたい。
コメントを残す