WPForms-コンタクトフォームを作成するWordPressプラグイン

WordPressにコンタクトフォーム(お問い合わせフォーム)を設置可能にするプラグインは複数存在する。

その中でも非常に手軽に特別な知識なくお問い合わせフォームを設置することができるのが「WPForms」というプラグインだ。

この記事では2017年12月5日現在の情報をもとに「WPForms」の使い方を解説する。

WPFormsとは?

WPFormsは、WordPressで構築されたサイトにコンタクトフォーム(お問い合わせフォーム)を導入することができるワードプレスプラグインだ。

問い合わせフォームだけでなく他にも独自のフォームを1から作成することも可能だ。

WPFormsを用いたフォームの作成や設定には技術的な知識が一切必要なく、プレビュー画面でどのようなフォームになるのかリアルタイムで確認しながら各種設定を行うことが出来るので初心者の方でも簡単楽々にお問い合わせフォームを作成することが出来る。

WPFormsには無料で利用できるLite版と有料のPro版があるが、ベーシックなお問い合わせフォームの作成なら無料のLite版で全て事足りてしまう。

複雑なフォームを作成したい場合は有料版を検討するとよいだろう。

インストール方法

WordPressにログインし、管理画面左メニューの「プラグイン」から「新規追加」をクリックする。

右上のキーワード欄に「WPForms」と入力すると画面上に「Contact Form by WPForms - WordPress用のドラッグ&ドロップフォームビルダー」というプラグインが表示されるので「今すぐインストール」ボタンをクリックする。

「有効化」ボタンが表示されたら、「有効化」ボタンをクリックする。

Welcome to WPFormsと表示されたらインストール作業は完了だ。

お問い合わせフォームの作成方法

インストール完了後、以下の画面の「Create Your First Form」をクリックする。

もしくは、WordPress左メニューに「WPForms」メニューが追加されているので、「WPForms」から「AddNew」をクリックする。

Setup画面の設定

上記「Create Your First Form」をクリックすると、フォームのセットアップ画面(左メニューの「Setup」が選択された状態)が表示される。

「Form Name」にフォームの名前を入力し、「Simple Contact Form」をクリックする。

Fields画面の設定

上記の「Simple Contact Form」をクリックすると、左メニューの「Fields」が選択状態となり、フォーム編集画面が表示される。

左画面が各種の設定を行う画面で、右画面はプレビュー画面となっている。

右画面上の各項目(Name等)をクリックすると、それに対応した編集画面が左画面に表示されるようになる。

Name項目の編集

右画面の「Name」の所をクリックしてみよう。

左画面が切り替わり、「Name」項目について設定が可能になる。左画面で設定を変更すると右画面に変更がリアルタイムで反映される。

左画面「Advanced Options」をクリックすると追加で設定できるオプション項目が表示される。

Label

Nameと表示されている部分の文字列を設定できる。

変更例:名前

Format

Simple、First Last、First Middle Lastの三つから選択可能。

以下表示例。

Simple

First Last

First Middle Last

Description

Descriptionに文字を入力すると、名前入力テキストボックスの下に、入力した文字列が表示される。

Required

チェックボックスを付けると、名前の入力は必須となる。名前が入力されていない状態でフォームを送信しようとするとエラーになる。

Field Size

名前を入力するテキストボックスのサイズを「Small」、「Medium」、「Large」の3つから選択できる。

First Name(FormatでFirst Last選択時)

Placeholder

ここで入力した文字は、First Name欄に薄い文字で表示される。フィールドの記述例などを表示する場合に使用する。

Default Value

ここで入力した文字は、First Name欄にデフォルト値として設定される。

Last Name(FormatでFirst Last選択時)

Placeholder

ここで入力した文字は、Last Name欄に薄い文字で表示される。フィールドの記述例などを表示する場合に使用する。

Default Value

ここで入力した文字は、Last Name欄にデフォルト値として設定される。

上のFisrt NameとLastNameの箇所は「Format」オプションの選択によって適切な物に変化する。
Hide Label

「Hide Label」にチェックをつけると、名前入力テキストボックス上部に表示されているラベル文字が非表示になる

Hide Sub-Labels

「Hide Sub-Labels」にチェックをつけると、名前入力テキストボックスの下部に表示されているFirst Lastの文字(FormatでFirst Lastが選択されている場合)が非表示になる。

CSS Classes

CSSでName項目のデザインを変更したい場合、CSSクラス名を設定できる。

Email項目の編集

右画面の「Email」の所をクリックすると下記の編集画面が表示される。

Label

Emailと表示されている部分の文字列を設定できる。

変更例:メールアドレス

Description

Descriptionに文字を入力すると、メールアドレスを入力するテキストボックスの下に、入力した文字列が表示される。

Required

チェックボックスを付けると、メールアドレスの入力は必須となる。メールアドレスが入力されていない状態でフォームを送信しようとするとエラーになる。

Enable Email Confirmation

チェックを付けると、メールアドレス入力欄が2つ表示され、ユーザーは確認のため2度メールアドレスを入力しないといけなくなる。

Field Size

名前を入力するテキストボックスのサイズを「Small」、「Medium」、「Large」の3つから選択できる。

Placeholder Text

ここで入力した文字は、メールアドレス入力欄に薄い文字で表示される。フィールドの記述例などを表示する場合に使用する。

Hide Label

「Hide Label」にチェックをつけると、メールアドレス入力欄上部に表示されているラベル文字が非表示になる

Default Value

ここで入力した文字は、メールアドレス欄にデフォルト値として設定される。

CSS Classes

CSSでEmail項目のデザインを変更したい場合、CSSクラス名を設定できる。

Comment or Message項目の編集

右画面の「Comment or Message」の所をクリックすると下記の編集画面が表示される。

Label

Comment or Messageと表示されている部分の文字列を設定できる。

変更例:内容

Description

Descriptionに文字を入力すると、コメントを入力するテキストボックスの下に、入力した文字列が表示される。

Required

チェックボックスを付けると、コメントの入力は必須となる。コメントが入力されていない状態でフォームを送信しようとするとエラーになる。

Field Size

コメントを入力するテキストボックスのサイズを「Small」、「Medium」、「Large」の3つから選択できる。

Placeholder Text

ここで入力した文字は、コメント入力欄に薄い文字で表示される。フィールドの記述例などを表示する場合に使用する。

Hide Label

「Hide Label」にチェックをつけると、コメント入力欄上部に表示されているラベル文字が非表示になる

CSS Classes

CSSでComment or Message項目のデザインを変更したい場合、CSSクラス名を設定できる。

フォームフィールドを追加したい場合

フォーム上にさらにフィールドを追加したい場合は、左画面の「Add fields」をクリックする。

各種フィールドアイテムボタンが表示されるので追加したいフィールドのボタンをクリックすれば、フォームに選択したフィールドが追加される。

Simple Contact Formでフォームを作成する場合、デフォルトでは問い合わせタイトル欄が用意されていないので、問い合わせタイトル用に「Single Line Text」フィールドを追加してみるのもよいだろう。

ちなみに、無料プランで利用できるのは「Standard Fields」に表示されているフィールドのみとなるので注意しよう。

Settings画面の設定

Fields画面の設定が終わったら次は「Settings」の設定を行おう。

General

Generalではフォームの基本的な設定を行う。

左メニューから「Settings」をクリックし、左画面の「General」をクリックする。

以下のGeneral設定画面で必要な情報を入力する。

FormName

一番最初に入力した「FormName」がすでに入力されているので、そのままで問題なければ変更の必要はない。

Form Description

フォーム画面見出し(FormNameで設定した文字)の下に、説明文を表示したい場合は、「Form Description」に説明文を入力する。

Hide form name and description area

フォーム画面上に、「FormName」と「Form Description」を表示させたくない場合はチェックを入れる。

Form CSS Class

CSSでFormのデザインを変更したい場合、CSSクラス名を設定できる。

Submit Button Text

フォームの送信ボタン上に表示されるテキストを設定する。

デフォルトは「Submit」と入力されているが、デフォルトが嫌なら「送信」等に変更する。

Submit Button Processing Text

送信ボタンをクリックし、送信処理実行中の時に送信ボタン上に表示されるテキストを設定する。

デフォルトは「Sending...」と入力されているが、デフォルトが嫌なら「送信中...」等に変更する。

Submit Button CSS Class

CSSでSubmit Buttonのデザインを変更したい場合、CSSクラス名を設定できる。

Enable anti-spam honeypot

チェックするとスパム対策機能が有効になります。spambotを防ぐために必ずチェックしておこう。

Nortifications

Nortificationsでは、フォームで入力さた情報をどのメールアドレスにどのように送信するのかを設定する。

左メニューから「Settings」をクリックし、左画面の「Nortifications」をクリックする。

以下のNortifications設定画面で必要な情報を入力する。

基本的にデフォルト設定のままで問題ない。

Send To Email Address

メールの送信先アドレスを設定します。

{admin_email}と記述しておけば、ワードプレスに登録している管理者アドレスにメールを送信します。

複数のメールアドレスに送信したい場合は、カンマで区切ってメールアドレスを入力すればよい。

Email Subject

メールタイトルを設定する。

From Name

メールの送信者名を設定する。

{field_id="0"}という記述はフィールドID0のフィールドに入力された値を利用するという意味だ。基本的にデフォルトで問題ない。

From Email

メールの送信者アドレスを設定する。

基本的にデフォルトの記述で問題ない。

Reply-To

Reply-Toアドレスとして指定したいメールアドレスがある場合は指定する。

Message

メール本文に入力する情報を設定する。

{all_fields}と記述すれば、ユーザーがフォームで入力した全てのフィールドの情報がラベル付きで送信される。

念のため{all_fields}の他に{user_ip}も追記しておいた方がいいと思う。

{user_ip}を指定しておけばフォームから投稿した人のIPアドレスをメール本文に含めることができる。

Confirmation

Confirmationでは、フォームで入力さた情報をどのメールアドレスにどのように送信するのかを設定する。

左メニューから「Settings」をクリックし、左画面の「Confirmation」をクリックする。

以下のConfirmation設定画面で必要な情報を入力する。

Confirmation Type

Confirmation Typeは「Message」、「Show Page」、「Go to URL(Redirect)」の3つから選択できる。

Message

フォーム送信後に、メッセージを表示させたい場合はConfirmation Typeに「Message」を選択する。

confirmation message

送信後に表示するメッセージを入力する。

デフォルトでは英文なので、日本人向けのサイトならば日本語に変更しておこう。

Automatically scroll to the confirmation message

チェックを入れておくとconfirmation messageまで自動でスクロールしてくれる。

チェック推奨。

Show Page

フォーム送信後に固定ページを表示させたい場合は、Confirmation Typeに
「Show Page」を選択する。

Comfirmation Page

リストから表示させたい固定ページを選択する。

Go to URL(Redirect)

フォーム送信後に特定のURLにリダイレクトしたい場合は、Confirmation Typeに「Go to URL(Redirect)」を選択する。

Confirmation Redirect URL

リダイレクト先のURLを入力する。

設定の保存

全ての設定が完了したら、右上にある「SAVE」ボタンをクリックして設定内容を保存する。

問い合わせフォームを表示するページを作成

お問い合わせフォームの作成が完了したら、作成したフォームを表示させるページを作成する。

今回は固定ページを作成し、そこにお問い合わせフォームを表示させることにする。

ショートコードのコピー

WordPressの固定ページを作成する前に、WPFormsの設定画面右上にある「EMBED」ボタンをクリックする。

すると、以下のように埋め込み用ショートコードが表示されるので、コピーしておく。

コピーしたら「CLOSE」ボタンをクリックして閉じる。

最後に右上の「×」ボタンをクリックしてWPFormsの設定を完了する。

WordPressで固定ページを作成

WordPress管理画面左メニューの「固定ページ」から「新規追加」をクリックする。

以下の手順を実行する。

①ページタイトルに「お問い合わせ」と入力

②問い合わせフォームの前に表示する文言を入力・

③先ほどコピーしたWPFormsのショートコードを表示したい位置に貼り付ける。

④順序に固定ページの表示順を設定(自身のサイトに合わせて適切に調整すること)

⑤「公開」ボタンをクリック。

以上でお問い合わせフォームの作成は完了だ。

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

まずは、作成した固定ページを表示させて見よう。

ナビゲーションメニューに「お問い合わせ」が追加されているので「お問い合わせ」をクリックする。

このように無事フォームが表示された。

次に、実際に動作するか確認してみよう。

名前、メールアドレス、内容欄にテスト用文字を入力し、「送信」ボタンをクリック。

送信完了後以下の表示に変わった。

以下は、実際に送信されてきたメールだ。

ぼかし処理をしたが、テスト内容の下の1の所にはIPアドレスが記述されている。

正常に動作できていることが確認できたら全ての作業は完了だ。

最後に

この記事では、WordPressプラグインの「WPForms」の導入、設定方法を紹介した。

WEBサイトにアクセスしてきたユーザーとコミュニケーションを取るために、問い合わせフォームは必ず用意しておきたい。

WPFormsを使えば誰でも簡単に問い合わせフォームを作ることが出来るので、ワードプレスでWEBサイトを構築している人に是非ともお勧めしたい。

レクタングル広告(大)広告
レクタングル広告(大)広告

シェアする

フォローする

レクタングル広告(大)広告