⑬お問い合わせフォームも簡単!プラグイン「Contact form 7」の使い方

コンタクトフォーム7

こんにちは、natsukiです。

WordPressでは、なんと、お問い合わせフォームも無料プラグインで作れちゃいます。

つまり、何かイベントとかをやるときも、参加申込みフォームを無料でいくつでも作れるのです(>_<)

これはスゴイ。

WordPressでフォームと言えば、「Contact form 7」が鉄板です。
日本人の方が作っている超有名プラグインになります。
参考:プラグインとはなんぞや?(WordPress初心者向け)
そんなわけで、早速お問い合わせフォームを作っていきましょう。

「Contact form 7」をインストール

WordPRess Contact7
「プラグイン」>「新規追加」を開きます。
右上の検索欄に「Contact form 7」と入力して検索。
Contact form 7を選んで、「今すぐインストール」をクリック。
その後出てきた画面で「有効化」をクリックして、有効にします。

「Contact form 7」の設定

Contact Form 7  設定
プラグインが有効化できたら、左のメニューの中に「お問い合わせ」という項目が追加されているはずです。
ここをクリックすると、作成済のフォームの一覧が出てきます。
この画像では3つのフォームができていますが、一番はじめは1つだけだと思います。
今回はこのフォームを使うので、「コンタクトフォーム1」をクリックして編集します。
(新しく作りたいときは「新規追加」から作れます)

お問い合わせフォームを編集

 Contact Form 7  設定
何やらよく分からない画面が出てきました(汗)
まず一番上の「コンタクトフォーム1」というのは、自分が分かりやすい好きなタイトルに変更できます。
そしてフォームの内容ですが、今回はそのまま使います(笑)
編集が終わったら右側の「保存」ボタンをクリック。

もし追加したり変更したい場合は、こちらを参考にしてみて下さい。
使い方 | Contact Form 7 [日本語]

お問い合わせフォームのメール設定

Contact form7 メール設定
上半分が、フォームが送信されたときに自分宛てに自動で送られるメールの設定。
下半分が、送信してくれた方宛てに自動返信で送られるメールの設定です。
(「メール(2)を使用」にチェックを入れると設定できます)
設定が終わったら「保存」ボタンをクリックしてください。

自分宛てメール

①送信先 自分宛てのメールなので、自分のアドレス
②送信元 送信元のアドレスは、サイトと同じドメインに属するアドレスを入力しないとエラーの表示が出ます。(※1)[your-name] には相手が「お名前」の項目に入力した名前が表示されます。
③題名 メールのタイトルです。[your-subject]には相手が「題名」の項目に入力した題名が表示されます。
④追加ヘッダー 無くてもOKです。初期入力の意味は、送信されたメールに返信すると、宛先が[your-email](相手が「メールアドレス」に入力したアドレス)になりますよという意味です
⑤メッセージ本文 メール本文です。 [your-name] [your-email][your-subject][your-message]にはそれぞれ相手が入力した項目が表示されます。

送信してくれた人宛てのメール

⑥送信先 相手宛てのメールなので、相手のアドレス[your-email]です。
⑦送信元 送信元のアドレスは、サイトと同じドメインに属するアドレスを入力しないとエラーの表示が出ます。(※1)
⑧題名 メールのタイトルです。普通は「ありがとうございます」などと書きます。
⑨追加ヘッダー 無くてもOKです。Reply-Toの後ろにアドレスを入力すると、自動返信メールに返信したときの宛先メールアドレスを指定できます。
⑩メッセージ本文 メール本文です。 [your-name] [your-email][your-subject][your-message]にはそれぞれ相手が入力した項目が表示されます。

※1:
サイトと同じドメインというのは、例えばこのサイトのアドレスは「lifeworkpress.site」なので、このドメインを使ったメールアドレス「●●@lifeworkpress.site」というものになります。
ドメインのアドレスは、それぞれの契約したサーバーの管理画面から作れるようになっています。

同じドメインのメールアドレスでないと、勝手に人のアドレスからメールが送信されているように装うこともできるので、スパムとして扱われるかもしれないですよってことです。
ただ画面には「このコンタクトフォームには 1 個の設定エラーがあります。」とは表示されますが、サイトドメインでないアドレスを設定することも、可能は可能です。
参考サイト:メールのセットアップに関するベストプラクティス

お問い合わせフォームを表示させる

早速作ったフォームを表示させてみましょう。
Contact form7で作ったフォームの表示はとっても簡単です。
フォームの管理画面に表示されている「ショートコード」を表示したいところにコピペすればOKです。
ショートコードとはこういう感じのやつです[contact-form-7 404 "Not Found"]

Contact form7 固定ページに表示
今回はお問い合わせページを作るために、「固定ページ」>「新規追加」から新しいページを作成します。
タイトルは「お問い合わせ」、パーマリンクは「contact」にしました。(もちろん自由に決めて下さい。)
そして本文に先ほどのショートコードを貼り付けて、ページを「公開」すれば完了です。

もちろん、他にも色々文章を入れても大丈夫です。
固定ページではなく、ブログの「投稿」に入れることもできます。
これで、https://lifeworkpress.site/contact/というアドレスをクリックするとお問い合わせフォームが表示されるようになりました。

お問い合わせページをメニューに追加する

でもこのままでは、誰も「お問い合わせ」ページに気付いてくれないので(笑)、メニューにこのページへのリンクを追加します。
メニュー WordPress
「外観」>「メニュー」を開いて、「固定ページ」の中から先ほど作った「お問い合わせ」にチェックを入れ、「メニューに追加」をクリックします。

メニュー WordPress
追加できたら、「お問い合わせ」の▼をクリックして、「説明」のところにメニューの下に入れたい文字を入力します。
終わったら右側の「メニューを保存」をクリックしてください。
これでヘッダーメニューにお問い合わせのリンクが追加されました。
フッターメニューに入れたい場合は、フッターメニューにも追加して下さい。
参:⑭メニューの作り方

お問い合わせページ完成

お問い合わせページ完成
これでお問い合わせフォームが無事完成しました。

PROFILE

natsukiWEBクリエイター
WordPressでサイトを作ってます。
とにかく面白いコトが好き。面白い人には簡単についていきます。
福井在住。東京に時々出没。3児のシングルマザー。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA