WordPress

【最短】WordPress(ワードプレス)で問合せフォームを設置する方法

Word pressは初期設定のままではお問い合わせフォームが備わっていません。しかし、お問い合わせフォームは、サイトを利用する人にとって疑問や不安点を解決する有効な手段となります。設置方法について難しそうに感汁かもしれませんが、プラグインを利用することで簡単な設定のみでお問い合わせフォームを設置することができます。手間や時間をかけずにお問い合わせフォームを作成する方法を紹介します。

お問い合わせフォームの設置方法

word pressの公式プラグインである『Contact Form 7』を使用して、お問い合わせフォームを設置する流れを説明していきます。
『Contact Form 7』

プラグインを追加する

お問合せフォームを作成するには機能を拡張させるために「プラグイン」というツールを使います。

プラグインをインストールする方法には、管理画面から検索してインストールする方法とインストールするプラグインをアップロードする方法があります。
word press公式のプラグインである『Contact Form 7』を使用する場合には、管理画面から設定することができます。

プラグインを検索する

管理画面の左側のメニューにある「プラグイン」をクリックすると既にインストールされているプラグインの一覧が表示されます。ページの上にある「新規追加」をクリックすると検索することができます。

プラグインを有効化する

インストールしただけでは、使用することができず有効化することが必要です。インストール後に表示される「有効化」ボタンをクリックすると有効化されます。

お問い合わせフォームを作成する

プラグインのインストールを完了すると、管理画面に「お問合せ」というメニューが追加されるのでそこからテンプレートを作成します。フォームは、複数作成することが可能です。
「お問合せ」をクリックすると、このような画面が表示されます。

コンタクトフォームのページから新規追加または既に作成されているフォームを編集します。
編集画面は、タイトル・フォーム・メール・メッセージ・その他という項目に分けられているのでそれぞれを編集します。

タイトル

タイトルは、編集画面ではページ上部に表示されています。

これは、フォームを管理するためのものでサイト閲覧時には表示されないため自分がわかりやすいものを付けてください。

フォーム

デフォルトでは、名前・メールアドレス・題名・メッセージ本文・送信ボタンが設定されているのでシンプルな内容で良い場合は、編集する必要はありません。

内容を編集したい場合には、画面上部に表示されるテキストボックスのボタンをクリックしてフォームに追加していきます。

自由に選択して項目を追加することができるため、一つ一つ異なるフォームを作成することが可能です。また、フォームに表示する文章を編集することができます。
一番左の[テキスト]をクリックするとなフォームタグ設定画面が表示されるのでそれぞれ設定を行います。

・項目タイプ
必須項目にチェックすると、入力必須の項目になります。
・名前
項目の名前です。
・デフォルト値
項目に初期表示される値です。
・Akismet
スパム対策のプラグインであるAkismetが有効化されている場合に、フォームの入力値を検証し、スパム判定が行われます。
・ID属性
HTMLコードのIDに付加する値で、cssやJavaScriptを使用する場合のみ設定します。
・クラス属性
HTMLコードのclassに付加する値で、ID属性同様cssやJavaScriptを使用する場合のみ設定します。

このような詳細な設定画面は[テキスト]だけでなく[メールアドレス]や他のボタンをクリックしても表示されます。

メール

「メール」ではお問合せが送信された際、その内容が管理者にメールで送信されるのでその内容について設定を行います。設定する内容は、送信先・送信元・題名・追加ヘッダー・メッセージ本文・ファイル添付などです。

[your-name]や[your-email]と表示されるのは、フォームで入力した内容が置き換えられたものになります。
・送信先
お問合せ内容についてのメールを受信したいメールアドレスを設定します。
・送信元
メール送信元となるアドレスを入力します。サイトのドメインと入力したメールアドレスのドメインが異なっている場合、「サイトのドメインに属していないメールアドレスが送信元に設定されています」と表示され、メールサーバーがスパムと認識してメールを受信することができなくなってしまう可能性があります。
・題名
メールを受信した時に件名として表示されるのでわかりやすいものを設定しましょう。
・追加ヘッダー
受信メールに対して返信するアドレスを指定するヘッダーです。
デフォルトの状態では「Reply-To:[your-email]」と表示されますが、メールアドレスを書き換えることで返信元を指定することができます。
・メッセージ本文
メール本文にあたります。デフォルトの状態で、差出人・題名・お問合せ内容については確認することがきますが、メールタグを組み合わせて表示する内容を変更することもできます。
・ファイル添付
この項目にアップロードされたファイルに対応するメールタグを設定するとファイルを添付することができます。

メール(2)

メールの設定画面を下にスクロールしていくと、メール(2)という項目が表示されます。

これは、お問い合わせをしてくれた方に自動返信メールを送信するための設定です。必須項目ではないため設定しなくても大丈夫ですが、フォームを送信した人にとって、きちんと送信されているかの確認や、送信したメールの控えとなるため便利な機能です。
「メール(2)を使用」にチェックを入れると、以下のような画面が表示されます。

・送信先
自動返信を送る宛先となるメールアドレスを指定します。デフォルトで入力されている[your-name]のままで大丈夫です。
・送信元
送信元としたいメールアドレスを指定します。
・題名
自動返信メールの題名を入力れています。デフォルトで入力されている[your-subject]では、メールフォームで入力された件名が表示されます。
・追加ヘッダー
自動送信メールに返信する場合に送り先となるメールアドレスを指定します。
送信元へ返信されるようにしたい場合には、「Reply-To:….」は削除し、別のメールアドレスに送信されるようにしたい場合には、メールアドレスを入力します。
・メッセージ本文
自動送信メールで送信したい内容を入力します。
[your-name]、[your-email]、[your-message]は、自動的にメールフォームに入力された「名前」「メールアドレス」「メール本文」に置き換えて送信されます。

メッセージ

「メッセージ」では、お問合せが送信された際に表示するメッセージを設定することができます。

その他

凝った設定になるため、デフォルトのままの状態で大丈夫です。

ここまで全ての設定を入力したら、「保存」ボタンをクリックします。
続いて、保存したフォームをページに反映させるための設定を行います。

フォームをページに追加する

フォームは設定するだけでは、サイトに反映されないためページに追加する必要があります。まず、フォーム編集ページのタイトルの下に表示されている「[ ]」で囲われているコンタクトフォームのコードをコピーします。


コピーしたテキストをメニューにある固定ページをクリックして、投稿記事またはテキストウィジェットに貼り付けます。

すると、作成したお問合せフォームを表示させることができます。


デフォルトの項目のままであると、このようにお問い合わせフォームが表示されます。

カスタマイズ

上記では、主にデフォルトの状態での作成方法を紹介しましたが、編集を加えて更に機能を追加することも可能です。カスタマイズの例を幾つか紹介します。

電話番号

お問い合わせフォームで電話番号も入力してもらいたい場合には、まずテンプレートに電話番号を追加します。
フォームの編集画面にある[電話番号]をクリックします。すると、フォームタグ生成画面が表示されます。

項目タイプ:必須項目としたい場合にチェックを入れます。
デフォルト値:入力例を表示したい場合に入力して、チェックを入れます。
「タグを挿入」をクリックすると、以下のように表示されます。

これをコピーして貼り付けるだけで、電話番号(必須)の入力欄を作成することも可能です。
画面上ではこのように表示されます。

ドロップダウンメニュー

ドロップダウンメニューを利用して選択肢を表示する方法を紹介します。今回は、お問い合わせ内容を選択できるように設定します。
まず、テンプレートに「お問い合わせ内容の選択」を追加します。
次に、ドロップダウンメニューを利用して選択肢を表示するための設定を行います。
「フォーム」の編集画面にある[ドロップダウンメニュー]をクリックします。

すると、フォームタグを生成する画面が表示されます。


項目タイプ:必須項目とする場合にはチェックを入れます。
名前:ドロップダウンメニューで作成する質問項目の名前を入力します。
オプション:選択肢を1つにつき1行以内で入力します。
複数選択を可能にする場合には、チェックを入れます。
ドロップダウンメニューの先頭を空白にしたい場合、チェックを入れます。
ID属性、クラス属性は、何も入力しないままで大丈夫です。

これを入力し、「タグを挿入」をクリックすると以下のようにフォーム内にタグが挿入されます。

<label>お問い合わせ内容の種類

  [select* menu-280 “会員登録・登録情報” “商品に関するお問い合わせ” “資料請求” “その他”]</label>

これをコピーして貼り付けるだけで、お問い合わせ内容選択欄を作成することも可能です。選択肢を書き換えるだけで他の内容に変更できます。

実際の画面ではこのように表示されます。

チェックボックス

ドロップダウンメニューではなく、チェックボックスを用いても同じように選択肢を表示することが可能です。
チェックボックスの生成画面の入力手順は、ドロップダウンメニューと同じです。

入力を終え挿入するとこのようなタグが挿入されます。

<label> お問い合わせ内容の種類

   [checkbox checkbox-35 “会員登録” “商品に関するお問い合わせ” “資料請求” “その他”]</label>

これをコピーして貼り付けるだけで、お問い合わせ内容選択欄を作成することも可能です。選択肢を書き換えるだけで他の内容に変更できます。

実際の画面上にはこのように反映されます。

ラジオボタン

ドロップダウンメニュー、チェックボックス以外にラジオボタンを用いて選択肢を表示することも可能です。
ラジオボタンの生成画面は、他の2つと同じように入力します。

以下のタグが入力されます。

<label> お問い合わせ内容の種類

   [radio radio-59 default:1 “会員登録” “商品に関するお問い合わせ” “資料請求” “その他”]</label>

これをコピーして貼り付けるだけで、お問い合わせ内容選択欄を作成することも可能です。選択肢を書き換えるだけで他の内容に変更できます。

画面上では、このように入力されます。

テキストエリア

デフォルトの状態でも、「メッセージ本文」というユーザーの書き込むことのできる欄が設けられていますが、それを増やしたい場合にはテキストエリアを用いて設定します。
フォームタグ生成を入力しタグを挿入します。

項目タイプ:必須項目としたい場合には、チェックを入れます。
デフォルト値:入力例や内容について表示したい場合には入力しチェックを入れます。
ID属性、クラス属性については入力しないままで大丈夫です。

以下のようなタグが挿入されます。

<label> お問い合わせ内容

   [textarea textarea-177] </label>

これをコピーして貼り付けるだけで、お問い合わせ内容の入力欄を作成することも可能です。「お問い合わせ内容」の部分を書き換えるだけで他の入力欄に変更できます。

画面上ではこのように表示されます。

デフォルトの状態に、電話番号、お問い合わせ内容の種類、お問い合わせ内容の入力欄のタグを足すとこのようなフォームになります。

<label> お名前 (必須)
[text* your-name] </label>

<label> 電話番号 (必須)
[tel* tel-60]</label>

<label> メールアドレス (必須)
[email* your-email] </label>

<label> お問い合わせ内容の選択
[select* menu-470 “会員登録” “商品に関するお問い合わせ” “資料請求” “その他”]</label>

<label> 題名
[text your-subject] </label>

<label> お問い合わせ内容
[textarea your-message] </label>

<label> その他
[textarea textarea-177] </label>

これをコピーして貼り付けてフォームを作成することも可能です。
ページにはこのように表示されます。


このようにタグを追加した際には、編集後にコンタクトフォームの編集画面で「保存」をクリックし、固定ページの編集画面で「更新」をクリックしなければページ上に反映されないため注意しましょう。

他のプラグイン

Contact Form7を使った方法を説明しましたが、Contact Form7ではデフォルトの状態であると確認画面がついていません。また、カスタマイズをする場合には、知識が必要になります。別のプラグインも幾つかあるため、それぞれの特徴について紹介します。

Jetpack Contact Form


Jetpack Contact Formは、Word pressの開発元であるAutomatic社が提供するプラグインです。固定ページや投稿ページの編集画面から作成が可能であるため、Webサイト内で簡単にお問い合わせフォームを設置することができます。簡単なお問い合わせフォームを作成する場合には便利なプラグインですが、凝ったフォームを作成したい場合には、「お問い合わせ内容の確認画面が表示されない」「自動返信機能がない」「作成したフォームを保存することができず、新しいフォームに変更する際に作り直さなければない」といった点に注意が必要です。

Trust Form

Trust Formは、「Jetpack Contact Form」と同様にシンプルで簡単なお問い合わせフォームを作成するのに向いているプラグインです。しかし、Jetpack Contact Formとは異なり、お問い合わせ内容を確認画面で表示することができます。また。フォームを利用してショートコードを呼び出すことができます。カスタマイズした項目をテンプレートとして残すことができるためフォームを使い回すことが可能なため、複数のお問い合わせフォームを使い分けたい場合に便利なプラグインです。

MW WP Form


確認画面や自動返信メールを実装することのできるプラグインです。幅広くカスタマイズすることができますが、HTMLタグなどの知識が必要となるため初心者の方が使いこなすのは難しいです。しかし、有料の拡張機能を使用すればHTMLが苦手な方でもカスタマイズすることが可能になります。「確認画面」「送信完了画面」「エラー画面」などを設定できルコと、お問い合わせ内容をデータベース内に保存可能な点がContact Form7と異なります。基本的には、HTMLの知識を持つ中級者向けのプラグインですが有料でもカスタマイズを行いたいと初心者にも向いているプラグインです。

Visual Form Builder


基本的にドラッグ&ドロップで操作するため、簡単にお問い合わせフォームを作成することができますが、海外製であるため設定や解説画面が英語で表記されているため、操作手順がわかりにくい点がデメリットとして挙げられます。

Gravity Forms


Gravity Formsは、簡単な操作でオリジナルのお問い合わせフォームを作成することのできる海外製のプラグインでライセンスを取得することで利用可能になります。マルチページフォーム、スケジュールフォーム、価格フィールドなど多くの機能があります。

Typeform


Webサイト上でシンプルなフォーム、アンケートを作成することのできるプラグインです。フォームに使いたいパーツをドラッグ&ドロップで追加して作成するため作業が簡単です。アカウントを登録するとアンケートを作成することもできます。アカウントを登録しなくてもフォームを作成することはできますが、登録(無料)するとフォーム作成のほか回答データのダウンロードなど別の機能を利用することができます。

Googleフォーム


Googleフォームを編集することでお問い合わせフォームと似たフォームを作成することができます。作成したGoogleフォームのサイトの埋め込みコードをページ編集画面に貼り付けるだけで設置することができるため、プラグインよりも簡単に設置することができます。

まとめ

word pressのお問い合わせフォームの作成方法について説明しました。デフォルトの状態のままでも基本的な内容は備わっているため編集せずに利用しても大丈夫ですが、タグを挿入して入力フォームを充実させることもできます。主にContact Form 7を使う場合について紹介しましたが、他にもプラグインはあるので使いやすいものを利用することをオススメします。

ピックアップ記事

  1. インデックスとは?検索エンジンの仕組みとSEOとの関係を徹底解説
  2. [用途別]無料で使えるSEO便利ツール16選&特徴・使い方まとめ
  3. 初心者が知っておきたいwebマーケティングの専門用語を解説!
  4. Webマーケティングとは?基礎知識と種類ごとの導入メリット・活用方法
  5. SEOでいわれる「ブラックハット」と「ホワイトハット」の違い

関連記事

  1. WordPress

    WordPressのサイトマップを作成しよう!【作成方法の全手順を紹介】

    ブログを開設する際に「サイトマップ」は必要となってきます。しかし、Wo…

  2. WordPress

    こんなに簡単!?Photoshopで背景を透明にする方法

    画像の背景を透明にしないと画像を合成する時に背景が重なってしまい上手く…

  3. Photoshop

    Photoshopブラシツールの使い方とおすすめプリセット21選

    みなさんPhotoshopのブラシ機能は活用していますか?ブラシ機能を…

  4. WordPress

    WordPress(ワードプレス)でWebサイト全体を非公開にする方法

    サイトを製作している途中の段階やサイトや記事の内容に不備が見つかった際…

  5. WordPress

    WordPressでバックアップをとる方法【タイミング/用途別で解説】

    Wordpressに限った話でなく、Webやアプリを公開・運営していれ…

  6. Photoshop

    【Photoshop初心者向け】基本的なPhotoshopの使い方

    今回はPhotoshopで出来る「写真編集」「グラフィックデザイン」「…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP