プラグイン

【WordPressプラグイン】簡単にお問い合わせフォームを作れる「Contact Form 7」の設定・使い方

2020年5月5日

【WordPressプラグイン】簡単にお問い合わせフォームを作れる「Contact Form 7」の設定・使い方

Contact Form 7とは

【WordPressプラグイン】簡単にお問い合わせフォームを作れる「Contact Form 7」の設定・使い方

Contact Form 7の概要

Contact Form 7はWordPressで構築したウェブサイトで簡単にお問い合わせフォームを構築できるプラグインです。一般的なお問い合わせフォームと同じように項目の編集などもカスタマイズできます。

Contact Form 7の特徴

  • お問い合わせフォームの構築
  • 項目の編集も可能

Contact Form 7のダウンロード先

【WordPress公式ページ】Contact Form 7
https://wordpress.org/plugins/contact-form-7/

Contact Form 7の設定

WordPress管理画面

WordPressの左メニューの「お問い合わせ」をクリック。

Contact Form 7のコンタクトフォーム

上記が「Contact Form 7」のトップ画面になります。

Contact Form 7のコンタクトフォーム

「Contact Form 7」のトップ画面では、作成したお問い合わせフォームの一覧が表示されます。

Contact Form 7のコンタクトフォーム新規追加

新規でお問い合わせフォームを作成する場合は、トップ画面の「新規追加」のボタンをクリックします。

フォーム

Contact Form 7のフォーム設定

フォームでは、フォームに項目をカスタマイズすることができます。上部の「メールアドレス」「電話番号」などのタブをクリックすると項目を追加することができます。

メール

Contact Form 7のメール設定

メールでは、メール送信に関する設定を変更することができます。送信先・送信元のアドレスの設定から題名・メッセージ本文のカスタマイズが可能です。

メッセージ

Contact Form 7のメッセージ設定
Contact Form 7のメッセージ設定

メッセージでは、フォームへの入力・送信の際のエラー時に表示するエラーメッセージをカスタマイズできます。

その他の設定

Contact Form 7のその他の設定

その他の設定では、「Contact Form 7」のフォームをよりカスタマイズするためにソードコードを追加することができる項目になります。簡単なお問い合わせフォームの作成上は、特に入力は不要です。

Contact Form 7の使い方

「Contact Form 7」は単体では使うことができません。

「Contact Form 7」はフォーム部分のみ作成して、ショートコードを固定ページなどに貼り付けることでお問い合わせフォームを作成できます。

Contact Form 7のコンタクトフォーム編集画面

最初に「Contact Form 7」でフォームを作成します。作成が完了すると、フォームタイトルの下にショーコードが表示されます。ショートコードをコピーしておきます。

【ショートコード】
[contact-form-7 404 "Not Found"]

WordPress管理画面 固定ページ

WordPressの左メニューから「固定ページ」をクリック。

固定ページの新規追加

固定ページのトップ画面に遷移したら、上部の「新規追加」のボタンをクリックします。

固定ページの新規追加

新規追加画面の本文にショートコードを貼り付けます。

固定ページの新規追加

貼り付けた後は上記のような画面になります。「パーマリンク」の部分に公開した固定ページのURLが表示されます。

Contact Form 7の表示

実際にウェブサイト・ブログでは上記のような表示になります。

当サイトで申込みが多いプログラミングスクール・教室はこちら!

【1位】ポテパンキャンプ:Webエンジニア輩出率No1

【2位】CodeCamp:満足度96.6%のプログラミングレッスン

【3位】DMM WEBCAMP:プログラマー転職成功率98%

【4位】TechAcademy:プログラミングスクール受講者数No1

【5位】GEEK JOB:満足度・転職率が高い・20代社会人経験者向け

-プラグイン