WordPressメールフォームページの作り方

メールフォームページ作成用WordPressプラグイン

代表的なものでは、「Contact Form 7」と「MW WP Form」があります。
「MW WP Form」は、送信時確認画面付きで、「Contact Form 7」は送信時確認画面はありません。
ですが、必ずしも送信時確認画面が必要とは限りません。
確認画面が表示される時間や、入力画面とややレイアウトが異なった画面で確認するストレスを考えると、送信時確認画面が無い方が良い場合もあります。
また、送信時確認画面で確認してもらうよりも、送信ボタンの上に「もう一度入力内容を確かめて送信してください。」と記載するだけで済むこともあります。
ケースバイケースでお決めになればいいと思いますが、ここでは「Contact Form 7」での作成方法を説明します。

Contact Form 7でメールフォームページを作る方法

「固定ページ」→「新規作成」で、「固定ページ編集」画面を表示します。
「ここにタイトルを入力」欄にタイトルを入力
通常は、「メールフォーム」で良いのですが、SEOを意識するのなら「○○○○○○○○の□□□□□□へのメール」としておきましょう。
※○○○○○○はキーワード、□□□□□□は会社名や屋号
「パーマリンク」欄は、最初は日本語タイトルそのままに表示されます。
ケースによっては、日本語のままでSEO的に有効なこともありますが、こういうメールフォームページの場合には「mail」や「mailform」で充分です。
パーマリンク「編集」→「mail」又は「mailform」と入力→「OK」ボタンで決定。
フォーム欄の上に説明文を入れる場合には、コンテンツ欄に文章を入れておきます。
例：「3営業日以内にはお返事をさせていただく予定ですが、お急ぎの場合にはお電話でお願いします。」など
「公開」しておきます。
ここで一旦、Contact Form 7の設定に移ります。
「編集」をクリックして「編集画面」を開きます。
最初に、「フォーム」を設定します。

複数のメールフォームページを作成する時は、整理しやすい名前で「タイトルを入力」しておきます。
入力欄には、
「お名前」
「メールアドレス」
「題名」
「メッセージ本文」
「送信」
がありますが、
「題名」は違和感がありますので、「ご用件」「ご依頼内容」などにしておきましょう。
「送信」ボタンは、このままでは、小さなボタンになりますから、「　　送　　信　　」のように間にスペースを入れておきましょう。
※あまり入れすぎると、スマホ対応などの時にレイアウトが崩れることがありますのでほどほどに。
「ふりがな」入力欄を作りたいこともあります。
———————–
お名前 (必須) 
[text* your-name] 
———————–
をコピーして、その下に貼り付けします。
そして、修正します。
[text* your-name] の箇所は、それを削除して、カーソルをそこに置いたままで、上図の青で囲った中の「テキスト」をクリックすると自動的に挿入されます。
———————–
ふりがな(必須) 
[text text-736] 
———————–
[text text-736]は、入力必須でない場合です。入力必須にすると、[text* text-736]となります。
入力必須項目にした場合には、下図の箇所にチェックを入れておくと、自動的に[text* text-736]のように挿入されます。
「（必須）」を画像にする方法

※上記画像はコピーして自由に使っていただいて結構です。
画像をアップロードする。
→ 「WordPressのカスタマイズ(2)ヘッダー」の「ロゴ画像やその他の画像を入れ替える方法」欄に掲載している方法でアップロードしてください。
———————–
お名前 (必須) 
[text* your-name] 
———————–
↓
———————–
お名前 <img src=”（アップロードした画像のURL）” /> 
[text* your-name] 
———————–
のように書き換えてください。
項目の下に、アンダーラインを表示する場合
お名前 <img src=”（アップロードした画像のURL）” /> 
[text* your-name] 
dashed＝破線
dotted＝点線
solid＝1本線
#CCCCCC＝グレー色
#FF99CC＝ピンク
#0099FF＝空色
margin-bottom:10px;＝罫線と次の項目との間隔

Contact Form 7でメール設定する方法

ご自身のメールアドレスに送信する設定です。
最初に表示された項目だけなら、この「メール」は触らなくても、WordPressをインストールした時のメールアドレスに送信されますが、入力項目を増やした場合には、ここで追加の記述が必要です。
青囲みの中のタグをコピーして「メッセージ本文」内に貼り付けします。
タグだけでは、何の内容だったのか分からなくなることもありますので、そのタグを何の項目に使っているのかを、元の「フォーム」ページで確かめておきましょう。
例：「ふりがな：[text-410]」
この「メール」欄の下に、「メール (2)」欄があります。
これは、送信された方への確認の為の自動送信メールです。
お客様などに自動送信されるものですから、メッセージ欄には丁寧な文章を入れておきましょう。
例：
—————————-
このメールは、初心者が簡単にWordPressでホームページ作成する方法 http://www.rabbit-kumatori.com のお問い合わせフォームから自動送信されました。このメールに返信はできません。
—————————-
会社名：
住所：
連絡先：
—————————-

次は、→ サイトマップページの作り方