ドラッグ＆ドロップでフォームを作成できるFormidable Formsプラグイン

はじめに

今回紹介するのはビジュアルな操作でフォームを作成できる「Formidable Forms」プラグイン。下記のようなフォームを作成することができる。

このプラグインの特徴はいろいろあるが、実際に使ってみて良かった部分を７つピックアップした。

１．直感的にフォームを作成できる
２．名前が「姓」と「名」に分かれている
３．フィールドの並び順も簡単に入れ替えできる
４．エラーメッセージを独自のものに変更できる
５．住所のような複雑なレイアウトも簡単に設定できる。
６．フォームから送信された内容をDBに自動で保存してくれる。
７．リダイレクト設定ができる

それでは１つずつ見ていきたい。

１．直感的にフォームを作成できる

左の「Add Fields」エリアから「テキスト」や「Paragrah」などのコンポーネントを右側にドラッグすることで配置できる。
配置を移動するのもマウスで簡単に行えるので初心者にもおすすめできる。

２．名前が「姓」と「名」に分かれている

Contact Form7で名前を「姓」と「名」分けて入力してもらおうとすると、結構面倒な修正が必要になるが、このプラグインでは「Name」というフィールドを利用することで最初から「姓」と「名」が分かれた入力欄を利用することができる。

ラベルの変更も左側の「Field Options」から設定できる。

３．フィールドの並び順も簡単に入れ替えできる

「性別」を「メールアドレス」の下に移動したい、といった場合でもマウスで簡単に操作できる。やり方は移動したいフィールドの右上にマウスを持っていくと「Move Field」とポップアップが表示されるのでその箇所をドラッグして、配置したい位置で移動できる。

このように性別をメールアドレスの下に移動させることができた

４．エラーメッセージを独自のものに変更できる

Contact Form7を使用していると必須入力のフィールドは全てメッセージが同じになる。
inputフィールドならこのままでもいいかもしれないがラジオボタンやプルダウンは「選択してください」に変えたくなる場合がある。そのような場合でも「Formidable Forms」プラグインなら簡単に行える。

まず、プレビュー画面で性別をクリックする。
次に「Field Options」の「必須」にチェックを入れる。
最後に「Validation Messages」で表示したいエラーメッセージを入力する。

実際のフォームで確認してすると、性別のエラーメッセージが設定した通りになっていることを確認できる。

５．住所のような複雑なレイアウトも簡単に設定できる。

住所入力欄は下記のように1行に複数の項目を表示したい。

1行目：郵便番号、都道府県、市区町村
2行目：以降の住所

このような複雑なレイアウトも「Formidable Forms」プラグインなら簡単に行える。

最初に「郵便番号」「都道府県」「市区町村」の3つのフィールドをマウスを使って横一列に並び替える。

次に「郵便番号」の幅を1/6に設定する。
・プレビュー画面で「郵便番号」をクリックする。
・左側にある「CSS Layout Classess」の「…」になっている箇所をクリックして、その下の1/6のボタンをクリックする。

その次に「都道府県」の幅を1/4に設定する。
・プレビュー画面で「都道府県」をクリックする。
・左側にある「CSS Layout Classess」の「…」になっている箇所をクリックして、その下の1/4のボタンをクリックする。適切な幅にできた。

６．フォームから送信された内容をDBに自動で保存してくれる。

Contact Form7の場合は別途送信したメールをDBに保存する他のプラグインをインストールしなければならないが「Formidable Forms」プラグインなら最初からその機能が存在する。

「Formidable Forms」プラグインの管理画面にある「投稿」タブを開くと確認できる。

７．リダイレクト設定ができる

Contact Form7の場合は送信後にリダイレクトをするにはfunctions.phpにコードを追記するか、別途プラグインの導入が必要になるが、「Formidable Forms」プラグインならその必要はない。

やり方は、プラグインの設定画面で「設定」タブをクリックし、「ON SUBMIT」の下にあるプルダウンで「URLへ転送」を選択する。
次にその右にある入力欄に転送したいURLを入力する。

グーグルアナリティクスのコンバージョンを計測したい場合にメールアドレスが必要な場合でもリダイレクトのURLにフォームで入力されたメールアドレスをパラメータとして付与することができる。
やり方はリダイレクト先のURL欄の右にあるアイコンをクリックして挿入したいパラメータを選択するだけで良い。

終わりに

本日は「Formidable Forms」プラグインのいいところを７つ紹介した。フォームの要件が今回紹介したような基本的なものなら、ぜひおすすめしたいプラグインだが、

・ファイルのアップロードをできるようにしたい
・カレンダーで日時を入力させたい
・クレジットカードの情報を登録させたい
・繰り返しの入力欄を表示したい
・ショッピングカートにしたい

といった少し凝った要件の場合は有料のプロ版を購入する必要があるのが難点である。