Trashしごうするのか、されるのか。使ってみると非常に使いやすくメリットもあるプラグインだったので紹介します。Formですが、更新が1年ぐらいストップしており「このまま更新停止になるのでは?」と不安でした。更新されないプラグインはWordPress本体のバージョンアップで使えなくなったり挙動がおかしくなったりします。セキュリティの脆弱性が放置されたままになりサイトのセキュリティに問題が生じる可能性も否定できません。Formをあまりおススメできないかなあ、などと思っていました。2018年7月下旬に更新されました!不安材料が消えたので記事する気になったというわけです。簡単に設置できる単に「管理人に連絡」的なお問い合わせフォームなら簡易なフォームでも良いのですが、サービス購入申込フォームなどに利用しようとする場合、ユーザーが入力内容を確認できる画面は設置したいところです。いうプラグインを導入すると確認画面を設定できるようになるのですが、ちょっと物足りない感じです。確認画面に変わってもページ遷移せず、フォームに「送信」「戻る」のボタンが表示されるだけでフォームの入力欄などがそのまま表示されてしまうため、ユーザーが確認画面だと意識しづらいと感じます。エラー画面それぞれに異なるURLを設定できます。これらのすべてを同じURLで運用する(つまりページ遷移しない)こともできます。「それっぽく」見せるだけであればページ遷移させる必要はありませんが、コンバージョン率などを検討する際に、ユーザーがフォーム送信完了する前にどこで離脱してしまったのかなどを確認したければ、異なるURLを設定した方が良いでしょう。Analyticsデータなどでユーザーがサイトを離脱したページを確認できれば修正ポイントが見える可能性もあります。何度もエラーに直面して送信を断念するユーザーが多い場合は、フォームをよりわかりやすく直したり、必須入力項目を減らす必要などに気づくはずです。画面遷移時の自動スクロールの設定もできるたとえばフォーム送信後に表示されるページの上部に不要な記述が見えてしまうと、ユーザーはその下にある記述に気づかないかもしれません。ユーザーがスクロールすれば済むことですが、ユーザーに余計な不安を抱かせないに越したことはありません。フォーム送信後の画面遷移時に確認メッセージの冒頭にスクロールする設定をすることもできます。公式プラグインとして登録されているため、WordPressの管理画面からインストールすることが可能です。Formが表示されたら「今すぐインストール」ボタンをクリックします。インストールが完了したら表示される「有効化」ボタンをクリックしましょう。Formのインストールと有効化は完了です。Formで問い合わせフォームを作成する基本的な流れは次の通りです。Form」メニューが表示されます。ここをクリックして次の画面で「新規作成」ボタンをクリックします。フォームの名前を入力する作成したフォームの名前を決めて入力します。ここでは「サンプルフォーム」としておきます。フォーム識別子がフォームを表示させるショートコードなお、この画面の右側の方に、「フォーム識別子」という項目があります。フォームを表示させるためのショートコードです。フォームを表示したページ・投稿のテキスト編集画面でこのショートコードをコピペすればフォームが表示されます。作成中のフォームをプレビューで確認したい場合は、新規ページなどを作成し、テキスト編集画面(ビジュアルではなく)に貼り付けてページのプレビューを見てみましょう。フォームタグを入力フォームを構成する各要素であるテキストやテキストエリア、郵便番号や電話番号、日付ピッカーやメールアドレス、ラジオボックスやチェックボックスなど、さまざまな種類のフォームタグが用意されています。フォームタグは直接記入しなくても下の画像のようにドロップダウンリストで選択できるので簡単です。ちなみにこのリストから選択して「フォームタグを追加」ボタンで入力する場合は、編集画面が「テキスト」でなく「ビジュアル」であっても問題ないようです。したがって、ビジュアルモードでフォームの見た目を確認しながらフォームタグを入力していくことも可能です。「フォームタグを追加」ボタンを押すと、タグの名前やclass、サイズなどを設定できる画面が開きます。「name」だけは入力しないと先に進めません。ラジオボタンを配置する場合などは、選択肢や配置を垂直にするかどうかなどもここで設定します。基本的なフォームの例として下のものを配置したフォームの例は下記の画像のようになります(ビジュアル編集モード)。確認ボタン・戻って修正ボタン・送信ボタンショートコードを設置した問い合わせページのプレビューはこんな感じ。見た目はWordPressのテーマによって異なります。気に入らなければCSSで手直しすることになりますね。バリテーションルールを設定する次に、フォームの各項目ごとにバリテーションルールを設定します。バリテーションルールとは、入力フォームに対する入力制限や入力チェックを行うルールのことです。「カタカナしか入力を受け付けないようにする」、「メールアドレス確認欄にはメールアドレス欄と一致するものが入力されていないとエラーにする」などを設定するわけです。フォーム編集画面を下の方にスクロールしていくと、「バリテーションルールを追加」ボタンがあります。「バリテーションルールを追加」ボタンを押すと、ルールを入力する画面が開きます。「バリデーションを適用する項目」には、ルールを適用したいフォームタグについて先ほど設定した「name」を正確に入力します。入力して欲しいものには「必須項目」にチェック、たとえばカタカナ限定にしたければ「カタカナ」にチェック、メールアドレス形式しか受け付けないなら「メールアドレス」にチェックを入れるなどします。メールアドレスの入力が間違っていないかを確認する場合は、「必須項目」「メールアドレス」にチェックを入れるとともに「一致する項目」に照合対象となるメールアドレスを入力してもらうフォームタグに設定しているnameを入力します。上の例では「サンプルメールアドレス確認」に入力されているデータが「サンプルメールアドレス」に入力されているデータと一致するかどうかを確認しています。バリテーションルールに反する入力がされた場合(あるいは必須なのに入力がない場合)は「確認画面へ」ボタンを押してもフォームにエラーが赤字で表示されます。次の画像のような感じ。入力されると入力確認画面で次のように表示されます。完了画面メッセージを入力する次は、フォーム送信完了画面に表示するメッセージを入力します。下の方にスクロールしていくと、「完了画面メッセージの入力欄」があります。ここに入力した内容が、フォーム送信後にユーザーに表示されることになります。エラー画面のそれぞれを異なるURLにしたい場合はそれぞれ次のように設定します。/contact/error/ただし、使用しているWordPressのテーマによってはうまく動かない場合もあるようです。私自身は特に厳密にデータをとる必要もないので、すべて空欄にして同一ページ上でリダイレクトされるようにして使用しています。自動返信メール・管理者宛てメールを設定するフォーム編集画面の右側の方に、「自動返信メール」「管理者宛てメール」の設定画面があります。「自動返信メール」は、フォームを送信したユーザーが入力したメールアドレス宛てに自動的に返信するメールです。「管理者宛てメール」は、フォーム送信されたことを管理者に知らせるメールです。自動返信メールの設定画面はこちら。下にある「自動返信メール」の欄には、フォームのどの項目に入力されたものを宛先にするかを指定します。この例では「サンプルメールアドレス」を指定しています。管理者宛てメールの設定画面はこちら。いずれもメール本文に各フォームタグのnameを記載すると、そのフォームに入力された値を表示できます。{サンプルお問い合わせ内容}プライバシーポリシーのご確認:{サンプルプライバシーポリシー確認}などと書いておきます。各フォームタグのnameを{}で囲むという書き方です。これらは少なくとも管理者宛てメールには記載しておかないと、フォームで送ってもらった内容を把握することができません。その他の設定(画面遷移時のスクロールなど)をするその他の設定をするメニューもあります。フォーム編集画面の右側に次のような項目があります。もとに投稿などをを取得してメールフォームに引き継げるようになるという機能のようです。1つのフォームで複数日程のイベントに対応できるように記事タイトルやカスタムフィールドの内容をフォームに引き継ぐなどして使えるようになります。個人的にはあまり使いどころが見つかりませんのでチェックしないで使っています。「問い合せデータをデータベースに保存」にチェックを入れると、WordPressの管理画面上で問合せデータを参照したり、フォームごとの問合せ件数を確認したりすることができます。管理者宛てメールで確認するだけでは不安なので是非ともチェックを入れておきたいところです。画面変遷時のスクロールを有効にする」にチェックを入れると画面遷移時にフォームの位置に自動的にスクロールするようになります。フォームの前に長文が置かれていたり、フッターに問い合わせフォームを設定していたりする場合にはチェックを入れておいた方が良いでしょう。確認画面付きの問い合わせフォームを非常に簡単に設置できる便利なプラグインです。挙動や確認画面の表示のされ方なども洗練されていて、「それっぽい」お問い合わせフォームを作成するには最適だと思います。フォームの見た目はテーマに依存しますが、多少CSSをいじればかなり立派なフォームに見えると思います。この記事では適当な見た目のスクショを上げましたが、実際に使う際はデザインを整えています。この記事で紹介しきれなかったようなこともできるようですので、関心のある人は作者の方のプラグインページにアクセスしてみると良いでしょう。plugins.2inc.org心配していた更新もされて私自身安心しましたが、是非他の人にもおススメしたくなる有能なプラグインです。プラグインページはこちら。はてなブログProしごうです。屑箱行きになるようなことを書き散らします。「しごう」は「魚をさばく」または誰かを「ぶちのめす」みたいな意味ですが、私が物騒な人間というわけではありません。45歳というわけではありません。ブログもtwitterもfacebookも始めたばかりです。記事により文体が変わります。このサイトへのリンクは自由です。できるだけ誤りのないように書いているつもりですが、当サイトに掲載する情報の正確性は保証できません。掲載している情報は執筆日現在の情報です。当サイト、当サイトリンク先、広告リンク先の利用によって生じたいかなる損害についても一切の責任を負いません。当サイトはGoogleアドセンス、Amazonアソシエイト、その他アフィリエイトの広告を掲載している場合があります。当サイトご利用の場合は上記の事項に同意したものとみなします。スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。