wordpressでフォームを簡単に作成するのに最適なプラグインとは?

mwwpformのプラグイン
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

HTMLやCSSには自信があるコーダーでも、お問い合わせやお見積もり用のフォームを設置するとなるとシステム構築の人を頼ってしまう、という方はいらっしゃると思います。

それもそのはず。フォームを実際に動かすには、(主に)PHPなどのプログラミング言語を使って様々な処理を書いていく必要があります。
正しく動くフォームのプログラムをきちんと書いて管理していくのは、プログラミングが得意だったとしても意外と骨が折れるものです。
しかもサイトによってはまったく違う複数種類のフォームを設置することもあるかもしれませんよね。

しかし!WordPressをお使いのあなた。WordPressにはたくさんのユーザーによって作成された数え切れないほどの様々なプラグインがあります。
もちろん、フォームを設置するのに適したプラグインもたくさん作られています!こういったフォームプラグインを使えば、プログラミングをしなくてもきちんと動作するフォームを簡単に作成・設置することができます。

今回は wp.make イチオシの実用性が高い日本製プラグインを二つ、簡単な使い方も合わせてご紹介します。WordPressサイトにフォームを設置することになった際には、是非参考にしてくださいね。

Contact Form 7

Contact Form 7 は Javascript を使ったページ遷移のないフォームが特徴です。
ページの切り替えを挟むことなく、その場でエラーチェックや送信処理を行うことができるため、ユーザーの使用感は非常にスムーズです。
実はこのサイトのお問い合わせフォームも Contact Form 7 によって作成されています!

使い方

Contact Form 7 のプラグインを導入すると、管理画面左側のメニューに「お問い合わせ」が追加されます。通常の WordPress の投稿などと同様に、サブメニュー等から「新規追加」をクリックすることで新しくフォームの作成を始めることができます。
プラグインをインストールすると最初から一つフォームが作成されていますので、これを参考に作っていくこともできますね。

基本的には HTML を記述するのとほぼ同じ要領ですが、フォームのinputタグや送信ボタンなどを設置する箇所に限り「テキスト」「メールアドレス」などのボタンをクリックして、現れたダイアログに必要な情報を入力することで専用のタグを配置していきます。
[メール]タブをクリックすると、管理者宛メールの件名や送信先、本文を編集したり、自動返信メールの設定などを行うことができます。

何かタイトルをつけて「保存」をクリックすると [contact-form-7 id=”(数字)” title=”(タイトル)”] といったショートコードが画面上部に表示されるので、フォームを配置したい場所(固定ページや投稿など)にこのコードを貼り付けることでフォームの設置が完了します!
複数のページに同じ内容のフォームを設置したい場合は、同じコードをあちこちに貼り付けることで何個でも設置することができます。

注意点

通常では確認画面(フォームへ情報を入力したあと、ユーザーに内容確認をさせるための画面)がありませんが、必要であれば専用のプラグインを入れることですぐに追加することができます。

MW WP Form

MW WP Form は送信されたデータをデータベースへ保存・蓄積しておく機能が特徴的です。
一件一件に対して対応済みかどうかをチェックしておける機能や、csvファイルでのダウンロード機能などもあり、送信された問い合わせ等を溜めておくことが大事なケースではとても重宝するプラグインです!

使い方

MW WP Form のプラグインを導入すると、管理画面左側のメニューに「MW WP Form」が追加されます。こちらも Contact Form 7 と同様にサブメニュー等から「新規追加」をクリックすることでフォームを作ることができます。
大きいエディタの部分に HTML を記述していき、フォームパーツを置きたい箇所は「フォームタグを追加」ボタンを使うところも Contact Form 7 に似ていますね。こちらはボタンが並んでいる代わりにプルダウンメニューから項目を選んでボタンをクリックすることでタグを追加していきます。

各フォームパーツの入力を必須にしたり、間違った入力をはじくための条件の設定はページ下部の「バリデーションルール」を編集することで行います。「バリデーションルールを追加」ボタンを押すと、項目名を入力する箇所とチェックボックスが出てきますので、適切なものを選びましょう。
バリデーションが必要な項目が複数ある場合は、必要なだけルールを追加していきます。

フォームのパーツ配置などが終わったら画面右側から自動返信メールと管理者宛のメールの件名・文面・送信先や、データベースに保存するかどうかなどの設定を行います。
空欄にしておくと、サイトの管理者として設定されたメールアドレス宛が設定されるので、変えたい場合はメールアドレスなどを入力しましょう。

一通り設定が終わったら「保存」をクリックすると、画面右側の「フォーム識別子」に[mwform_formkey key=”(数字)”]といったショートコードが出てきます。
フォームを設置したい固定ページなどにこのコードを貼り付ければ設置完了です!

注意点

この状態だと、入力画面・確認画面・完了画面はすべて同じURLになります。そのままでもちゃんと動作しますが、いろいろな理由で確認画面・完了画面は別のページに設置したい場合があります。
そんな時は「URL設定」へ設置したいURLを入力しましょう。

「URL設定」に入力したURLと違うところにフォームのコードを貼り付けてしまうと、その場所にアクセスできなくなるなどの不具合が出ることがありますのでご注意ください!

まとめ

今回はフォームを作成することができるプラグインを二つご紹介しました。どちらのフォームプラグインを使ってフォームを作成・設置するかは、サイトの目的や好みにもよると思いますので、合っていると思う方を選んでみましょう。
目的に応じて他のプラグインを探してみるのもいいかもしれませんね。

関連記事

土井純也

土井 純也 Twitterアイコン Facebookアイコン

WordPressスペシャリスト・エンジニア
株式会社プレートテクノロジー 取締役
1985年北海道生まれ。200社以上のWordPressサイトの制作を担当し、「wp.support」では一部上場企業を含め、様々なサイトのWordPress保守・セキュリティをサポートしている。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

記事が気に入ったら
wp.supportを "いいね!"
Facebookで更新情報をお届け。

WordPressの保守・セキュリティ対策なら「wp.support」

その開発、弊社に外注しませんか?

WordPress専門の制作会社
「wp.make」

お見積もりのご依頼やご相談など、まずは下記フォームよりお問い合わせください。

WordPressでのサイト開発を専門に行う弊社が、どのような内容にもお答えさせて頂きます。