Contact Form 7 の基本的な使い方

このガイドは WordPress 用プラグイン Contact Form 7 の初歩的な解説です。WordPress の管理者としての基本的な知識が必要です。このチュートリアルではページにフォームを表示したり、フォームやメールの内容をカスタマイズする方法について、実際の例をまじえながら説明していきます。

フォームを表示する

まずはフォームをページ上に表示することから始めましょう。WordPress の管理パネルにある ‘お問い合わせ’ > ‘編集’ のメニューを開いてください。そこで複数のお問い合わせフォームを管理することができます。

Contact Form 7 プラグインのインストールしたばかりなら、”コンタクトフォーム 1″ という名前のデフォルトのフォームが用意されていて、そこに次のようなコードが見られるはずです。

[Contact-form 1 "コンタクトフォーム 1"]

このコードをコピーしてください。そうして、ページの編集メニュー (‘ページ’ > ‘編集’) を開いて、お問い合わせフォームを配置したいページを開きます。”お問い合わせ” という名前のページをお問い合わせフォーム用に作るのが一般的です。先ほどコピーしたコードをそのページの本文中にペーストしてください。

これでお問い合わせフォームは完成です。あなたのサイトに来たビジターたちがフォームを見つけてさっそくあなたの悪口を送ってくるでしょう。

次は、フォームとメールの内容をカスタマイズする方法について見ていきましょう。

フォームをカスタマイズする

デフォルトのフォームは簡素すぎるように思ったかもしれません。フォームに項目を追加してみましょう。フォームのテンプレートを編集して項目を追加するのも ‘お問い合わせ’ > ‘編集’ のメニューから行います。

フォームに項目を追加するには、タグを作ってそのタグを ‘フォーム’ 欄に挿入します。‘フォーム’ 欄になじみのないコード、例えば、[text* your-name] なんていうものがあるのに気付いたと思います。こういったコードのことを Contact Form 7 の語彙で「タグ」と呼んでいます。

タグの構文はけっこうややこしいです。でもご心配なく! 覚えなくても大丈夫です。「タグの生成」ツールで欲しいタグを作ることができます。

タグの2番目の単語はそのタグの名前です。例えば、[text* your-name] というタグの名前は ‘your-name’ になります。この名前はあとでメールのテンプレートのなかで使うことになるので重要です。

メールをカスタマイズする

メールのテンプレートの編集は、‘メール’ 欄でフォームに対して行ったのと同じ要領で行います。ここでも同様にタグが使えますが、メールで使うタグはフォームで使ったタグとは異なるので注意してください。

メールのテンプレートで使うタグはカッコのなかにひとつの単語だけを含み、例えば [your-name] のようになります。気付いたかと思いますが、この ‘your-name’ は先ほどの例で使ったフォームのタグの名前と同じです。これらの2つのタグは同一の名前で結びついています。

実際のメールでは、[your-name] は対応するフォーム項目、つまりこの場合は [text* your-name]、にユーザーが入力した値によって置き換えられます。

演習

好きな野菜を選ぶドロップダウンメニューを表示する
このタグを ‘フォーム’ 欄に挿入します: [select vegetable "トマト" "ジャガイモ" "ピーマン"]
ユーザーが選択した野菜をメールの本文中に表示する
このタグを ‘メッセージ本文’ 欄に挿入します: [vegetable]