WordPressでブログを作ろう

前回に「ラジオボタンの追加」を説明しましたが、何か動作がおかしいようです。以前の「Contact Form 7 プラグイン」はラジオボタンとチェックボックスが正常に動作しなかったのですが、バージョンアップによって動作するようになったものとばかり思っていました。

ラジオボタンはセレクトメニューで代用できるので、さらなるバージョンアップに期待して待つことにします。チェックボックスについては次回に検証したいと思います。

◆セレクトメニューの追加

１．例えばお住まいの地域などを選択してもらう場合、「フォーム」欄の下にある「タグの作成」から「ドロップダウン・メニュー」を選択します。「ドロップダウン・メニュー」作成欄が表れますので、「名前」には、例えば「chiiki」とします。「id」「class」は空欄でいいでしょう。

２．「選択項目」には選択肢を１行ずつ記入します。この場合は、

　北海道
　青森
　・
　・
　鹿児島
　沖縄

と、全部の都道府県を書き込みます。

３．「複数選択を可能にしますか?」にチェックを入れても複数選択はできないようです。これができるとチェックボックスとしての代用になるのですが。

４．「先頭に空の項目を挿入しますか?」にチェックを入れると選択肢が横線になった（つまり、選択肢が選択されていない状態の）セレクトメニューが表示されますし、チェックを入れないと「選択項目」に書き加えた一番上の選択肢が表示されて送り手がセレクトせずにそのまま送信すると一番上の選択肢がそのままメールで送られてくるようになります。

５．「次のコードをコピーしてフォームにペーストして下さい。」に生成された

[select chiiki "北海道" "青森" ・・・ "鹿児島" "沖縄"]

を

<p><label>地域<br />
[select chiiki "北海道" "青森" ・・・ "鹿児島" "沖縄"] </label></p>

のように、「フォーム」欄に追加します。

６．「メッセージ本文」欄には

　●地域：
　[chiiki]

を追加します。

７．「保存」すれば完了です。
ブログ内に作ったフォームを確認すると「地域」の項目が追加されているはずです。
送信テストをしてください。

フォームの内容を編集する続きです。テキストエリアを追加する場合（たとえば、入力必須にしないご住所の記入欄追加）は、
<p><label>お名前 (必須）<br />
[text* your-name] </label></p>
をコピー＆ペーストして、

　お名前 (必須） → ご住所
　[text* your-name] → [text address]

に変更します。すると、こうなります↓
<p><label>ご住所<br />
[text address] </label></p>

あと「メッセージ本文」欄に

　●ご住所：
　[address]

を追加するだけです。

◆ラジオボタンの追加

１．「男性」か「女性」かなど、少しの選択肢から１つを選んで欲しい場合は、「フォーム」欄の下にある「タグの作成」から「ラジオボタン」を選択します。

２．「ラジオボタン」作成欄が表示されますので、「名前」には、例えば「sex」とします。「id」「class」は空欄でいいでしょう。

３．「選択項目」には選択肢を１行ずつ記入します。この場合は、

　男性
　女性

ですね。

４．「次のコードをコピーしてフォームにペーストして下さい。」に生成された

[radio sex "男性" "女性"]

を

<p><label>性別<br />
[radio sex "男性" "女性"] </label></p>

のように、「フォーム」欄に追加します。

５．「メッセージ本文」欄には

　●性別：
　[sex]

を追加します。

６．「保存」すれば完了です。
ブログ内に作ったフォームを確認すると「性別」の項目が追加されているはずです。
送信テストをしてメールが届きましたか。

フォームメールのテストがＯＫでしたら、新しいフォームを作りましょう。

１．赤字の「新規追加」をクリックします。

２．「無題」をクリックすると、テキストを変更できるようになりますので、分かりやすい適当な名前に変更します。

３．デフォルトの「フォーム」の内容は以下のものですね。

<p><label>お名前 (必須）<br />
[text* your-name] </label></p>

<p><label>メールアドレス (必須）<br />
[email* your-email] </label></p>

<p><label>題名<br />
[text your-subject] </label></p>

<p><label>メッセージ本文<br />
[textarea your-message] </label></p>

<p>[submit "送信"]</p>

「text」と「email」の後についている「*」は入力必須項目であることを表しています。つまり、入力必須にしたい項目の後に「*」をつけるだけで記入しないと送信できないようにできます。「textarea*」とすれば、「Your Message」欄に何か書かないと送信できません。

４．「題名（your-subject）」は送信者に記入してもらうのでなく、固定しておくのが一般的ですから、ここはカットしてしまいましょう。

<p><label>お名前 (必須）<br />
[text* your-name] </label></p>

<p><label>メールアドレス (必須）<br />
[email* your-email] </label></p>

<p><label>メッセージ本文<br />
[textarea your-message] </label></p>

<p>[submit "送信"]</p>

５．「題名（your-subject）」を固定するには、「メール／件名:」の「[your-subject]」を「フォームメールより○○への問合せ」などのように変更します。

６．「メール／メッセージ本文:」は、デフォルトでは「[your-message]」となっています。このままではテスト送信でもお分かりのように、「[your-message]」欄に書かれた内容のみがメールで送られてきます。

７．メールの「from」欄に明記されますが「お名前」や「メールアドレス」もメールの本文に整理されて送られてくるほうが後々便利です。「メール／メッセージ本文:」を以下のようにしてみましょう。（ [your-name] [your-email] [your-message] 以外は適当にアレンジして結構です）

●お名前：
[your-name]

●メールアドレス：
[your-email]

●メッセージ本文：
[your-message]

８．一番下までスクロールして「保存」ボタンを押します。

９．「新規追加」の前に新しいフォームが追加されました。また、「次のコードをコピーして投稿の本文中にペーストして下さい。」も追加されましたので、前回のテスト送信同様にテストしてみましょう。

１０．なお、新しく作ったフォームを管理画面で変更・修正して保存し直すと、ブログ上にできているフォームの内容もそれに応じて変更・修正されます。