アレンジ等を担当させていただいた曲がリリースされました!

WPFormsが簡単すぎる!?オススメの「問い合わせ」WPプラグイン

「問い合わせフォーム」として「Contact Form 7」が多くのサイトに使われていますが、カスタマイズ性に優れる反面、初心者には使いづらい点もあります

「問い合わせページ」をただ作りたいだけならもっと簡単に実装できるプラグイン「WPForms」があるので、操作方法などと合わせて紹介します。

Contact Form by WPForms

「Contact Form 7」の場合はコードを入力したりする必要がありますが、「Contact Form by WPForms」の場合はドラッグ&ドロップで感覚でフォーム設定を行うことができます

wpforms

「WPForms」は日本語で表示されていないので敬遠する人も多かもしれませんが、特に難しい英語を使われていないので難しくないと思います

参考

wpformswpforms.com

WPForms の基本操作

「WPForms」はWP公式プラグインなので、管理画面より新規追加からインストールすることができます。インストールしたら、早速「問い合わせフォーム」を作成してみましょう。

wpforms

管理画面のメニューバーに「WPForms」と表示されるので、そこから「Add New(新しく追加)」を選択します。その他の項目は、下記の通り。

WPFormsの項目
  • All Forms(作成したフォーム一覧)
  • Entries(有料にアップグレード)
  • Setting(プラグインの設定)
  • Tools(インポート・エクスポート)
  • Addon(有料機能の追加)

基本的には、「Add New(新しく追加)」と「All Forms(作成したフォーム一覧)」しか使わないと思います

新規で問い合わせフォームを設定

「Add New(新しく追加)」をクリックすると、まず下図のページが表示されます。ここでは、一覧で判別できるようにフォームに「名前」、そして「テンプレート」を選択します。

wpforms

まず、(1:Form Name)に名前を入力してください。あくまで一覧で見た時の名前となるので、好きな名前を設定して大丈夫です。もちろん、後で変更することも可能。

(2:Select a Template)では、「問い合わせフォーム」のテンプレードを選択します。ここでは、「Simple Contact Form」にカーソルを合わせ、「Create Simple Contact Form」のボタンをクリックします。

他には「Blank Form(1から作成)」や「Newsletter Signup Form(ニュースレター用)」があるので、これらを選んで作成をしても良いでしょう。

Fields(フィールド)を設定する

「Fields(フィールド)」では、「問い合わせ」の項目を追加・削除することができます。無料で利用できる項目は、以下となっています。

wpforms

Fields(フィールド
  • Single Line Text(1行の入力欄)
  • Paragraph Text(文章の入力欄)
  • Dropdown(ドロップダウン)
  • Multiple Choice(1つを選択)
  • Checkboxes(複数を選択)
  • Name(名前の入力欄)
  • Email(メールアドレスの入力欄)

これらの下にある「Fancy Fields」という項目ですが、これらな有料となるので必要な場合はアップグレードしてください。

ただ、ここにある電話番号やURLのフィールドは「Single Line Text(1行の入力欄)」を使えば事足りると思うので、アップグレードする必要はほとんどないと思います

「Field(フィールド)」を追加するには、左の一覧から右にドラッグ&ドロップするだけ。もちろん、上下の順番もドラッグ&ドロップで行えます。

削除したい場合は、それぞれの項目右上に「×」のマークがあるので、そこをクリックして「OK」を押せば完了です。

wpforms

それぞれの「フィールド」を設定

「フィールド」の内容を設定するには、「Fields Option」または直接「フィールド」をクリックします。すると、設定画面が表示されます。

Name(名前)フィールドの変更

「Name(名前)」では、表示や入力欄の設定を行えます。

wpforms

ベーシックオプション
  • Label(入力欄の上に表示させる文言を設定)
  • Format(入力欄の枠数を設定)
  • Description(説明を設定)
  • Required(必須かどうかを設定)
MEMO
「Format(入力欄の枠数を設定)」では「姓」と「名」を分けたりできますが、基本的には「Simple(1枠)」で良いでしょう。

Advanced Options を設定

基本は上記だけで事足りますが、「Advanced Options(高度な設定)」も設定することをオススメします。上記のすぐ下にあるので、項目を広げて見てください。

アドバンスオプション
  • Field Size(入力欄の幅を設定)
  • Name(入力例を設定)
  • Hide Label(Labelを非表示)
  • Hide Sub-Labels(Sub-Labelsを非表示)
  • CSS Classes(cssを追加)

「Field Size(入力欄の幅を設定)」はデフォルトで「mediumu(中)」になっているので、好きな幅に変えてみましょう。「Large」にすると、幅いっぱいに表示されるようになります。

「Name(入力例を設定)」では、入力欄の中にうっすらと文字が表示されます。入力する人が迷わないように「例:山田太郎」のような感じで表示させても良いでしょう。

「Hide Label(Labelを非表示)」と「Hide Sub-Labels(Sub-Labelsを非表示)」はラベル表示をさせないようにするチェックボックスですが、基本的にチェックを入れることはないでしょう。

「CSS Classes(cssを追加)」は、cssでデザインを変更したい時に入力してください。

Email(メールアドレス)フィールドの変更

「Email(メールアドレス)フィールド」では、メールアドレスを入力する欄の設定を行うことができます。基本的には「Name」で紹介した内容と変わらないのですが、1箇所だけ異なる部分があります。

wpforms

「Enable Email Confirmation」という項目がるのですが、チェックを入れると入力に間違いがないかの確認欄が表示されます。2度もメールアドレスを入力させるのは嫌われる可能性も高いので、よっぽどではない限りチェックは入れなくて良いと思います。

Setting:裏側の設定

「Fields」の設定が完了したら、次は「問い合わせフォーム」の裏側の設定に進みましょう。右のメニューバーから、「Setting」を選択してください。

General(一般)

「General(一般)」では、最初に設定した「フォーム名」の変更や「送信ボタン」に表示させる文言を設定できます。

wpforms

「Submit」とは、「提出する」と言った意味。デフォルトでは「Submit Button Text」には「Submit」となっているので、日本語で「送信する」などに変更すると良いでしょう。

「Submit Button Processing Text」は、ボタンを押した直後に送っている旨を伝える文言になります。日本語で、「送信中…」などに変えてみると良いでしょう。

Notifications(通知)

「Notifications」では、「送信ボタン」を押されたら自分に送られてくるメールの内容を設定できる項目になります。「フィールド」で設定した項目はデフォルトでメールに転送されてくるので、基本的に変更する必要がありません。

ただ、「フィールド」以外に欲しい情報がある場合には、「Message」に追加することができます。追加項目は、「Show Smart Tag」をクリックすればできます。

wpforms

アフィリエイターなどなら説明不要だと思いますが、「Refferer URL」を選択すれば直前に閲覧したページのURLをメールに表示させることもできます。

「Author Name」を選べば、複数のメンバーが記事を書いている場合には誰が書いた記事に対して問い合わせが来たのかが分かりやすくなります。

Confirmation(確認)

「問い合わせフォーム」を埋めてもらって「送信ボタン」を押してもらったら、その後に表示させる「メッセージ」や「ページ」を設定することができます。

wpforms

デフォルトでは「Message」となっていて、送信後に文章だけを表示させるには文言を設定してください。「Thanks for 〜」となっている部分を、「2〜3日以内には、担当よりご連絡します」といった内容を入力しても良いでしょう。

他に「Show Page」「Go to URL」があり、送信してもらったら別のページに飛ぶように設定することもできます。

問い合わせフォームをサイトに貼る

「WPForms」をサイトに表示させるには、2通りの方法があります。まずは、ウィジットから。

WPFormsをウィジットで

「WPForms」はウィジットで設定が可能なので、サイドバーなどに「問い合わせフォーム」を簡単に表示させることができます。

wpforms

ただ、この設定方法の場合はウィジットが使える範囲だけとなるので、任意の場所に貼り付けることはできません。ページの途中に表示させたい場合などは、次の方法で設定してください。

WPFormsをショードコードで

「WPForms」の「All Forms(作成したフォーム一覧)」を開くと、これまでに作成したフォームが表示されます。その中から、表示させたいフォームの項目にある「Shortcode(ショートコード)」を丸っとコピーして任意の場所へ貼り付けます。

wpforms

MEMO
ショードコードはカッコ内の数字だけでなく、カッコの部分を含めたものを「Shortcode(ショートコード)」と呼びます。

「問い合わせ」を表示できたら、機能しているか1度は試してみてくださいね

さいごに

基本的に英語となるので拒否反応を示す人もいるかと思いますが、設定が簡単なのでぜひ「WPForms」を試してみてください!