arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

[WordPress]お問い合わせフォームを設置しよう

ずいぶん時間が空いてしまいましたが、Wordpressにお問い合わせフォームを設置する手順を説明します。お問い合わせフォームはWordpressのメニューでは定番のコンテンツです。プロフィールページを作成したことのある方はご存知かもしれませんが、固定ページを使います。プラグインを使って簡単に設置しましょう。

Contact Form 7プラグインのインストール

ブログを閲覧している方がお問い合わせなどを行う場合に使うメールフォームを簡単に作成できるプラグインをインストールします。
管理画面左側にあるメニューのプラグイン>新規追加をクリックし、キーワードに「Contact Form 7」と入力して出てきた一番はじめのプラグインをインストールします。

インストールが終わると、「有効化」ボタンが現れますので、引き続きクリックして有効化します。

これでContact Form 7プラグインが使えるようになりました。

メールフォームを作成しよう

管理画面の左側にあるメニューに「お問い合わせ」が追加されたのに気付きましたでしょうか?

その中のコンタクトフォームをクリックします。

「コンタクトフォーム1」が既に用意されています。これをひな形として、新しく作ります。

コンタクトフォーム1にカーソルを当てると「複製」のリンクが現れますので、クリックします。

題名の「コンタクトフォーム 1_copy」を「お問い合わせフォーム」に変えておきましょうか。
フォームタグの中身は、記事や固定ページで表示されるフォーム部分、つまりよくお問い合わせで見かける構造を形作っています。このフォームでは既に「お名前」「メールアドレス」「題名」「メッセージ本文」の4つの欄と「送信」ボタンが表示されるようになっています。
もちろん、「お名前」を目的によっては「ご芳名」や「name」などに、「メッセージ本文」なども「お問い合わせ内容」や「ご依頼内容」に書き換えることができます。

次はお隣のタグ、メールタグに移動します。

ここでは「フォーム」に入力された内容をご自分が持つメールアドレスに送るための設定をします。
[your-name]や[your-message]などがありますが、これは後々カスタムすると考えてそのままにしておきましょう。
もちろん、ご自分のメールアドレスは変更可能です。確認したら一番下にある保存ボタンをクリックします。

これでメールフォームは作成できました。下の画像に赤線が引かれている部分、これはショートコードと言うのですが、次のためにコピーしておきます。

次は実際に表示させてみましょう。

メールフォームを使ってみよう

先ほど作成したメールフォームを使ってみましょう。ここでは新規の固定ページ作成画面を開いて、コピーしておいたコードを貼り付けます。

右メニューの公開ボタンをクリックして、ページを表示させてみましょう。

表示されました。
それでは実際にメールを送ってみましょう〜♪

動作確認しましょう

フォームの入力欄に適当に書いてみました。ささっと書いたので何かひっかかっても気にしないでください…

@マークを半角にするのを忘れないようにしてくださいね。
入力後、送信ボタンを押すと…

送れましたね。それでは自分のアドレスのメールボックスをみてみましょう。
上々ですね。
作成したフォームは投稿記事にも設置できます。

お時間がありましたら、試してみてくださいね。お疲れ様でした!


実際にやってみるとサクッと簡単に作成できるのですが、こうして記事にすると結構時間かかりますね…Contact Form 7の中身も見た目もカスタマイズ可能なので、その記事も近いうちに書けるといいなと思っています。ねこま(@necomacustom)でした。

Share

Leave a comment

PAGE TOP