お問い合わせフォームの作り方を簡単に解説

お問い合わせフォーム

質問や感想などの問い合わせをする

お問い合わせフォーム

お問い合わせフォームの作り方は、ワードプレスならプラグインを使用することで簡単に作成できる。

今回は、お問い合わせフォームにドロップダウンリストを設置する方法と、通知メール、自動返信メールの設定を解説したいと思う。

Contact Form 7

お問い合わせフォームを簡単に作成するプラグイン

Contact Form 7

まずはダッシュボートのメニューからプラグイン→新規追加を選択

右上の検索窓にContact Form 7と入力。

インストールして有効化させよう。

有効化させたら

まずはフォームを作成しよう。

Contact Form 7では、読者が入力するお問い合わせフォームと、お問い合わせがあったことを知らせるメール設定。

この2つの設定をすることができる。

フォーム作成

メニューからお問い合わせ→新規追加を選択

タイトルには「お問い合わせフォーム」などわかりやすい名前を入力。

フォームのタブを選択。

デフォルトで下記画像のように入力されているので、なにもしなくてもすぐに使用することができる。

このブログのお問い合わせフォームは、下記画像のように「メルマガやブログへの引用可否」と「質問概要」にドロップダウンリストが設置されている。

このお問い合わせフォームを参考に、ドロップダウンを設置する方法を簡単に解説する。

もちろんデフォルトのままでも問題ないので、難しいと思ったらデフォルトのまま使用しよう。

フォームタブのテキスト「題名」を「メルマガやブログへの引用可否」に変更しよう。

変更したテキストの下にあるコードを削除。

このとき</label>は残しておこう。

上にあるメニューから「ドロップダウンメニュー」を選択。

下記のようなウィンドウが表示されるので入力していく。

「必須項目」にチェックを入れると、空欄のまま送信をクリックした際にエラーを表示させることができる。

「名前」はデフォルトで「menu-数字」が入力されている。

名前を変更する際は数字部分のみ変更して「menu-」は必ず残しておこう。

「オプション」に選択肢を入力。

入力が完了したら「タグを挿入」をクリック。

すると先程削除したコードに「名前」「オプション」が挿入される。

このとき、<label>からはじまって</label>で終了しているのを確認しよう。

もし間違えて削除した際は、先頭は<label>、後ろは</label>と入力しよう。

同じように質問概要を作成しよう。

テキストを変更してコードを削除。</label>は残しておこう。

そしてドロップダウンメニューをクリック。

おそらく先程と同じ名前が入力されているので変更しよう。

さっきの名前は「menu-838」だったので、今回は「menu-839」にした。

「オプション」に選択肢を入力。

最後に「タブを挿入」をクリック。

「空の項目を先頭に挿入する」にチェックを入れると、下記画像のようなデフォルト表示になる。

タグを挿入すると下記画像のように「名前」と「オプション」が挿入される。

最後に質問内容を作成する。

今度は

<label> 質問内容

と直接テキスト入力してみよう。

</label>は最初に入力してもいいし、タグを挿入してから入力してもどちらでも大丈夫だ。

次にテキストエリアをクリック。

テキストエリアは特に入力する箇所はないので、必要に応じて「必須項目」にチェックを入れよう。

最後に「タグを挿入」をクリック。

以上でフォーム作成は完了だ。

ご覧のようにドロップダウンも設置されている。

固定ページやサイドバーに挿入する際は、下記コードをコピーして貼り付ける。

メール設定

次はメール設定。

メールのタブをクリック。

「メール」は読者からのお問い合わせ内容を自分宛に通知するメールだ。

メッセージ本文はメールの内容。

下記はこのブログのメール内容だ。

フォームで設定した「名前」が挿入されているのがわかるだろうか。

「題名」はmenu-839(質問概要)

「引用可否」はmenu-838(引用可否)

メッシージ本文はtextarea-659(質問内容)

フォームの名前を入力することで、質問者が選択した項目や質問内容がメール本文に表示される。

フォームの名前を入力する際は、メールタブの下に一覧があるので、名前をクリックしてコピーしよう。

メール(2)設定

次はメール(2)の設定。

こちらは自動返信メールの設定なので、自動返信を設定しないのなら不要だ。

設定するには「メール(2)を使用」にチェックを入れる。

下記画像はこのブログの自動返信メール文だ。

冒頭に[your-name]と入力されているが、このコードの入力さていると

質問者が入力した名前が自動で反映される。

あとは先程と同じようにフォームの名前を入力しよう。

以上で自動返信メールの設定も完了だ。

下記画像はお問い合わせ通知メールの内容。

こちらは質問者への自動返信メール。

フォーム設置方法

お問い合わせフォームの設置はとても簡単だ。

固定ページの本文にコードを貼り付けるだけだ。

固定ページの作成方法はこちらの記事を確認しよう。

↓  ↓  ↓

ヘッダー下にメニューを設置する【グローバルナビの作り方】

サイドバーに設置する方法は、プラグインのimage widgetを使うと簡単に設置できる。

image widgetの使い方はこちらの記事を確認して頂きたい。

↓  ↓  ↓

プロフィールをわかりやすい場所に設置する【サイドバーに設置する方法】

それと、お問い合わせやプロフィールを作成した際も、パーマリンクの設定を忘れないようにしよう。

↓  ↓  ↓

ブログ初投稿の書き方【ワードプレスの投稿方法と画面説明】

最後に

実は私はお問い合わせフォームを作成するのに

とても苦労した記憶がある。

テストメールを送っても全く送れなかったんだ。

調べに調べてやっと完成した時は、本当に嬉しかった。

今はこうして普通にブログを更新しているけど、最初の頃は上手くいかなことだらけだった。

ブログのことでも、せどりのことでも何かわからないことがあれば、遠慮なくこちらからお問い合わせ頂きたい。

苦労して作成したお問い合わせフォーム。

そのフォームからお問い合わせがあると嬉しさもひとしおだ。

プロフィール、お問い合わせフォーム、グローバルナビなどが完成すると、だいぶ形になってきて嬉しいよね。

形になってきたからこそ、バックアップの準備もしておこう。

↓  ↓  ↓

ワードプレスおすすめのバックアップ方法【興奮で宙返りをしている】

この記事が気に入ったら
いいね ! しよう

Twitter で

シェアする

フォローする