プラグイン

【WordPress】ブログ初心者でも簡単!問い合わせフォームを作ろう

2020年4月8日

初心者も簡単!お問い合わせフォームを作ろうのアイキャッチ画像


どうも、たべばかです。

今回はブログにお問い合わせフォームを作ってみようと思います。


問い合わせフォームを作るとなると、HTMLやらCSSなどの知識がいるんじゃない?と思う方もいるかもしれませんが、ご安心ください。

ブログ初心者でもContact Form 7というプラグインを利用すると、専門的知識がなくても簡単に問い合わせフォームを作ることができます。

まだ作成していない方は、本記事を参考に問い合わせフォームを作成してみましょう。


問い合わせフォームを作るメリット

 

  • メールアドレスや電話番号を非公開にできる
  • 仕事の依頼が来る
  • 読者の声が聞ける
  • 利用者の信頼につながる
  • スパムメールが減る
  • 自動返信でメール送信できる

 

そもそも問い合わせフォームって必要ですか?と思われる方もいるかもしれないので、問い合わせフォームを作るメリットについてご紹介します。


メールアドレスや電話番号を非公開にできる相手にメールアドレスや電話番号を公開することなく、問い合わせを受け付けることができます。
仕事の依頼が来る多くのブロガーさんが述べていますが、仕事の依頼が飛び込んでくることがあります。
読者の声が聞けるあなたのファンとの窓口になります。 ブログを書く活力につながりますね。
利用者の信頼につながる問い合わせ先があることで、利用者の信頼につながります。 何か問題が生じた場合も適切に対応することで信頼を獲得できます。
スパムメールが減るメールソフトを使用していないため、スパムメールのほとんどを防ぐことができます。
自動返信でメール送信できる問い合わせ者に、前もって用意した自動返信メールを送信することができます。

※なお、Googleアドセンス取得に問い合わせフォームが必須!という声もありますが、結論は必要ありません。現に、私は問い合わせフォームがない状態で、Googleアドセンス申請を合格することができました。


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

contact form 7プラグインです


では実際にContact Form 7をインストールして、問い合わせフォームを作成していきましょう。

WordPressの左メニューのプラグインから「Contact Form 7」をインストールして有効化します。

プラグインのインストール方法については、こちらの記事を参考にしてください。

【WordPress】未経験アラフォーのブログ開設!(プラグインの使い方&必須プラグインを3つ)
【WordPress】初心者 プラグインの使い方&必須プラグインを紹介

続きを見る

 

お問い合わせページをつくる

WordPress左メニューより固定ページをクリック
固定ページを新規追加する
固定ページのタイトルを入力


まず「お問い合わせ」という名前で固定ページを作成しましょう。

WordPressの左メニューの固定ページを開き、「新規追加」をクリックします。

固定ページのタイトルに「お問い合わせ」と入力します。

忘れずにパーマリンクを設定後、「更新」をクリックしましょう。


WordPressの左メニューのお問い合わせからコンタクトフォームを選択する
ショートコードをコピーします


WordPressの左メニューのお問い合わせから「コンタクトフォーム」をクリックします。

コンタクトフォーム1と書かれた右側の「ショートコード」の内容をコピーします。


固定ページの編集をクリックします


先ほど「お問い合わせ」という名前で作成した固定ページを開きます。


ブロックエディタのウィジェットからショートコードを選択
ウィジェットでショートコードの追加が完了しました


「ウィジェット」から「ショートコード」ブロックを追加して、先ほどコピーした内容を貼り付けます。


お問い合わせページをプレビューで確認します


「プレビュー」をクリックして、お問い合わせフォームが表示できたら「更新」をクリックします。

これで、お問い合わせページの作成は完了です。


Contact Form 7の設定


さきほど作成したお問い合わせページの内容は、Contact Form 7の設定を変更することで、カスタマイズできます。


コンタクトフォームを編集します


WordPressの左メニューのお問い合わせから「コンタクトフォーム」を開き、コンタクトフォーム1と書かれた下にある「編集」をクリックします。


ContactForm7の設定画面の4つのタブ


フォーム、メール、メッセージ、その他の設定、という4つのタブが確認できると思います。

Contact Form 7の設定はこの4つのタブで行います。


フォームの設定


フォームタブでは、お問い合わせフォームページに新しい入力フォームを追加することができます。

初期設定のままでも良いですが、今回は住所とURLの入力フォームを追加してみましょう。


住所を追加

<label>住所
</label>
フォームタブのフォームに住所入力フォームを追加する


住所を追加したい場所を選択して、上記のように入力しましょう。

上記の</label>左側を選択して、上部の「テキスト」をクリックします。


テキストフォームの設定を行います


はじめから入力フォームにメッセージを表示させたい場合は、デフォルト値に表示させたいメッセージを入力します。今回は「住所を入力してください」と入力してみます。

「このテキスト項目のプレースホルダーとして使用する」にチェックを入れましょう。


<label>住所
[追加されたショートコード]</label>
テキストフォームの設定を入力してタグを挿入します


「タグを挿入」をクリックすると、ショートコードが追加されます。

最終的に、上記のような形で入力されていればOKです。


項目タイプ必須項目にチェックを入れると、その項目が入力必須になります
名前そのままでOK!
デフォルト値はじめから表示させたいメッセージを表示
「このテキスト項目のプレースホルダーとして使用する」
にチェックすると入力時にメッセージが消えます
Akismetスパムメール対策ですが、初めは特に必要ありません
ID属性未入力でOK!
クラス属性未入力でOK!


URL追加

<label>URL
</label>
フォームタブのフォームのURLボタンをクリックします


住所を追加したい場所を選択して、上記のように入力しましょう。

上記の</label>の左側を選択して、上の「URL」をクリックします。


URLフォームの設定を行います


はじめから入力フォームにメッセージを表示させたい場合は、デフォルト値に表示させたいメッセージを入力します。今回は「https://」と入力してみます。

「このテキスト項目のプレースホルダーとして使用する」にチェックを入れましょう。

「タグを挿入」をクリックすると、ショートコードが追加されます。


フォームに住所とURLが追加されました
<label>URL
[追加されたショートコード]</label>


上記のように入力されていればOKです。

保存をクリックして変更を反映しましょう。


項目タイプ必須項目にチェックを入れると、その項目が入力必須になります
名前そのままでOK!
デフォルト値はじめから表示させたいメッセージを表示。
「このテキスト項目のプレースホルダーとして使用する」
にチェックすると入力時にメッセージが消えます
Akismetスパムメール対策ですが、初めは特に必要ありません。
ID属性未入力でOK!
クラス属性未入力でOK!

問い合わせフォームの確認

お問い合わせページに住所とURL入力フォームが追加されました


固定ページで作成したお問い合わせフォームを開いて確認してみましょう。

住所とURLの入力フォームが追加され、先ほど入力したデフォルト値が表示されています。

デフォルト値が入力された入力フォームに何か入力してみると、デフォルト値で表示したメッセージが消えることが確認できれば完了です。


メールの設定


メールタブでは、受信メール自動返信メールのカスタマイズ設定を行うことができます。


受信メール設定

問い合わせメールを受信するメールアドレスを設定します


問い合わせメールを受信するメールアドレスを変更する場合は、送信先のメールアドレスを変更しましょう。

他の設定は初期設定のままでも良いですが、今回は上記で追加した住所URLの内容を、メールに追加してみましょう。


問い合わせフォームに追加した住所とURLのショートコードが表示される

「メール」と書かれた下の部分に、先ほど追加した入力フォームのショートコードが表示されているので、メール本文にこのショートコードをコピーして貼り付けます。


受信メールの文面に住所とURLを追加

例えば今回は、「住所:[text-448]」と「URL:[url-906]」という形でメール本文に追記しました。

「保存」をクリックして、変更を反映します。

これで入力フォームに入力した住所とURLの内容をメールに表示することができます。

試しにお問い合わせフォームに適当に入力して「送信」をクリックしてみましょう。


住所とURLを含んだメールを受信した

送信先に設定したメールアドレスにこのようなメールが届けば完了です。


送信先問い合わせを受信するメールアドレスを入力
メッセージ本文受信するメッセージの内容を変更します
メールと書かれた下部に表示されるショートコードを入力すると、
対応する入力フォームの内容がメールに表示される


自動送信メール設定

メール(2)にチェックを入れて自動返信メールの設定を行います


メールタブを下にスクロールすると、「メール(2)」と書かれたチェックボックスがあるので、ここにチェックをいれましょう。

これで問い合わせを送信した利用者に、自動返信メールを送信することができます。


自動送信でも問い合わせに追加した住所とURLのショートコードが表示される

メール(2)と書かれた下の部分に、受信メールと同様に追加した入力フォームのショートコードが表示されているので、こちらも住所とURLの内容を、メールに追加してみましょう。


自動送信メールにも住所とURLを追記して、文面も丁寧に編集しました

やり方は、受信メール設定のメール本文とまったく同じです。

※この文面は利用者に送信されるので、読みやすいように心がけましょう。

「保存」をクリックして、変更を反映します。


お問い合わせした人へ自動送信されたメール

試しにお問い合わせフォームに適当に入力して「送信」をクリックしてみましょう。

お問い合わせフォームで入力したメールアドレスに自動返信メールが届けば完了です。


メッセージ本文利用者に自動送信するメッセージの内容を変更します
メール(2)と書かれた下部に表示されるショートコードを入力すると、
対応する入力フォームの内容がメールに表示される


メッセージ、その他の設定


メッセージタブでは、様々な状況で利用者に表示する内容をカスタマイズできますが、基本設定のままで大丈夫です。

その他の設定も特に設定は必要ありません。


以上でContact Form 7の設定は終了です。

お疲れ様でした。


まとめ


ブログに問い合わせフォームを追加すると色々なメリットがあることをお伝えしました。

  • メールアドレスや電話番号を非公開にできる
  • 仕事の依頼が来る
  • 読者の声が聞ける
  • 利用者の信頼につながる
  • スパムメールが減る
  • 自動返信でメール送信できる


Contact Form 7プラグインを使用すれば、専門的な知識がない初心者でも簡単に問い合わせフォームを追加することが出来ます。

設定項目も多くないので、本記事を参考にお問い合わせフォームを追加してみましょう。



-プラグイン