プラグイン 2023.02.06

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

この記事を書いた人

土井 純也

WordPressスペシャリスト・エンジニア/株式会社e2e 取締役 / CTO

1985年北海道生まれ。
200社以上の大手上場企業のWordPressサイトの制作、保守・セキュリティをサポートしている。

【 展開しているサービス一覧 】
■WordPress開発サービス「wp.make
■WordPress保守/運用サービス「wp.support
■WordPressハッキング/緊急復旧対応サービス「wp.rescue
■WordPressバージョンアップ代行サービス「wp.versionup

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

これは、HTMLやCSSがサイトの見た目に関する領域(=フロントエンド)であるのに対し、フォームに関してはサーバーとのデータのやりとりや入力値に応じたメール処理といった領域(=バックエンド)であるためです。

しかし、WordPressにはフォームに関するプラグインも存在し、バックエンドの知識がない方でも、簡単にフォームを作成してお客様からのお問い合わせを受けることが可能でうs。

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

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

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

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

注意点

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

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

『MW WP fprm』の使い方について詳しく見る

まとめ

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

関連記事

WordPressサイト制作・カスタマイズなら「wp.make」にお任せ!

WordPressでのサイト制作やリニューアルを検討する時、以下のようなお悩みはありませんか?

  • WordPressに詳しい制作会社に依頼したいが、どこがいいかわからない…
  • セキュリティ対策をしっかりしたいが、社内にノウハウがないのでプロに任せたい…
  • WordPressに最適なサーバーの選定や構築から依頼したい…
  • SEO対策や高速化も考慮したサイト構築を行なってほしい…
  • 制作後の保守・運用についてもサポートしてほしい…
  • 今のサイトを簡単に運用できるようにしてほしい…

「wp.make」は、WordPressのプロフェッショナル集団によるWordPressサイト制作・カスタマイズサービスです。
サイトの制作だけでなく、WordPressに最適なサーバーの選定や構築といったインフラ面の支援から、SEO対策や表示スピードの高速化、高度なセキュリティ対策や制作後の保守・運用サポートまで、WordPressに関わることならあらゆるお悩みを解消いたします。

既存のお客さまからも
「コミュニケーションが取りやすく、クオリティが高い」
「WordPressのプロとして信頼感がある」
と大変ご好評をいただいています。

WordPressサイトの制作・カスタマイズをご検討されているなら、ぜひ以下からお気軽にご相談ください。

>> wp.makeに無料相談する

WordPress開発・カスタマイズなら 『wp.make』

wp.make資料

全案件WordPressのみ!
株式会社e2eの『wp.make』はWordPress専門のWeb制作サービスです。

WordPress案件だけを扱っているから、技術・ノウハウ・対応力が圧倒的!

【WordPressサイト制作でよくあるお悩み】
・運用シーンが想定されておらず、更新しづらかった…
・打ち合わせで専門用語が多くてわかりづらい…
・制作後の保守には対応してくれなかった…


こんな事態になる前に、ぜひ一度、ご相談ください!
WordPressサイトを作るなら、一番WordPressに詳しいところへ!