【簡単】ワードプレスでお問い合わせフォームの作り方!Contact Form 7プラグイン

投稿者: | 2018年8月20日

ワードプレス(wordpress)でお問い合わせフォームを追加するのは難しいのでしょうか?プログラミングの知識などは必要ですか?

【Contact Form 7】プラグインを使用すると、意図も簡単にお問い合わせフォームを導入することができます。

難しいプログラミングの知識やサーバー知識も一切不要です。

お問い合わせフォームの設置に関しては、アドセンスブログを運営するのであれば間違いなく必須の機能です。

簡単に実装できますので、ご参考にしてくださいね。

 

ブログをまだ作ったことが無いという方は、下記の記事を最初にご覧ください。

⇒ エックスサーバーの契約からドメイン設定・ワードプレスのインストール手順まで

 

 

【簡単】ワードプレスでお問い合わせフォームの作り方!Contact Form 7プラグイン

サイトを運営するにあたり、ユーザーからのご意見などを収集するための【お問い合わせフォーム】は欠かせません。

また、グーグルアドセンスでブログやサイトを運営する際は、コンタクトをとれる手段が必要となり、お問い合わせフォームの設置は必須です。

何より、情報を公開している側がコンタクトをとれる手段を設置していないのは、不自然であり、警戒されてしまいます。

 

実装するのはとても簡単です。

ワードプレス(wordpress)プラグインツールを用いると、難しいプログラミング知識や、サーバーの知識が無くてもお問い合わせフォームを簡単に作成することができます。

お問い合わせの内容に合わせて、添付ファイルの機能やラジオボタン、チェックボックスなどの追加、スパム防止機能など様々な設定を簡単に導入することができます。

このツールを知らないと、CGIなどのプログラミングスキルが必要となり、導入するだけでも少々労力と時間が必要となります。

是非、プラグインツールを利用して、お問い合わせフォームを実装してみましょう!

 

 

 

contact form 7プラグインツールのインストール

 

【プラグイン】⇒【新規追加】をクリックします。

キーワードに、【contact form 7】と入力入力します。

プラグインをインストールします。

 

プラグインがインストールされたら、【有効化】ボタンをクリックします。

 

プラグインが正常に有効化されたことを確認します。

 

 

 

contact form 7プラグインの詳細設定について

 

ワードプレスのメニューに【お問い合わせ】の機能が追加されます。

【コンタクトフォーム】をクリックし画面を表示します。

コンタクトフォームを追加:【お問い合わせフォーム】と入力します。

【フォームタブ】の設定値です。今はこのままでOKです。

 

【メールタブ】の設定値です。

デフォルト設定値でOKです。

メールを複数持っており、双方に同じ内容を送信したい場合などは【メール(2)】にチェックし追加していきます。

 

【メッセージタブ】の一覧です。

基本的にはこのままでOKです。今後、自身のサイトに合わせて変更します。

 

【その他の設定タブ】の一覧です。

この設定もこのままでOKです。

【保存】ボタンをクリックし、設定情報を保存します。

 

 

下記のようにコンタクトフォームに【お問い合わせフォーム】の一覧が追加されました。

【ショートコード】をクリックし、コードをコピーします。

このコードを記事に貼り付けると、お問い合わせフォームが表示されるのです。

 

例として、【固定ページ】⇒【新規作成】をクリックし、新しくページを作成します。

先ほどコピーしたタグを下記のように貼り付けます。

【プレビュー】ボタンをクリックし、表示を確認します。

 

 

下記のように、お問い合わせフォームが表示されたことを確認できましたでしょうか?

 

このまま運用してもOKですが、今回は、下記の2点を変更してみたいと思います。

「メッセージ本文」 ⇒ 「お問い合わせ内容」 に表示を変更

「添付ファイルを送信できる」ように機能を追加する

 

 

 

contact form 7の簡単なカスタマイズの例

 

もう一度、【お問い合わせ】⇒【コンタクトフォーム】の一覧より、先ほど作成した【お問い合わせフォーム】の編集画面を表示します。

 

画面の通り、【メッセージ本文】 ⇒ 【お問い合わせフォーム】に変更します。

[submit “送信”]の上に、カーソルを合わせ、【ファイル】ボタンをクリックします。

 

【フォームタグ生成ファイル】のポップアップ画面が表示されます。

【タグを挿入】ボタンをクリックします。

 

下記の画面のように、表題および、添付ファイルのコードが作成されたことを確認します。

【保存】ボタンをクリックします。

 

 

再度、お問い合わせフォームのタグを貼り付けた記事を更新すると、表題の変更および、添付ファイルを送信するためのボタンが追加されたことを確認することができます。

 

 


 

最後にまとめ

 

いかがでしょうか。

このプラグインの存在を知らないと、お問い合わせフォームを追加しようとすると、CGIプログラム等を作成しなければいけません。

そうすると表題の変更や、添付ファイルボタンの機能を追加するだけも、プログラム修正などが発生し、プログラムのバグやセキュリティトラブルなどで、運用に障害がでるケースが考えられます。

今回ご紹介したプラグインツールを用いることで、容易にカスタマイズすることができ、ユーザビリティの高いお問い合わせフォームを実現できるのではないでしょうか。

 

 

★合わせて読みたい参考記事
⇒ 【無料】ワードプレスおすすめプラグイン12選!ブログ効率UPに期待できます。

⇒ そのブログで使用する画像やアイキャッチ画像は使っても大丈夫?商用フリー写真をご紹介します

⇒ 簡単!ワードプレスの見出しデザインをプラグインで装飾設定・使い方

 

 

 

【簡単】ワードプレスでお問い合わせフォームの作り方!Contact Form 7プラグイン」への2件のフィードバック

  1. yukko

    こんにちは、ブログランキングから来ました。
    ワードプレスのお問い合わせフォームあるといいですよね。
    記事わかりやすくて参考になりました。
    ありがとうございます。
    応援ポチッと押しました。

    返信
  2. kuma 投稿作成者

    yukkoさん、メッセージありがとうございます。
    アイコンも可愛いです。

    お問い合わせフォームはあるととても便利ですし、しかも意外と簡単に作成できるのでいいですね。
    記事も時間をかけて作成した甲斐がありました。
    参考にしていただけてとても嬉しいです。

    yukkoさんの美容系ブログも訪問させていただきました。
    ぽちっとクリックもしました!

    また、遊びに行きますね。

    返信

コメントを残す

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