MW WP Formを使った問合せフォームの作り方

MW WP Formを使った問合せフォームの作り方

Web制作ではフォームは欠かせない要素の一つです。例えば、お問い合わせフォームや会員登録フォーム、購入フォームなどがありますね。どれも、HPからの売上に直結することがわかります。

さてフォームを設置するにはいくつかの方法がありますが、WordPressを使っているならプラグインを使うといいでしょう。簡単な手順でフォームを設置することができますよ。

今回は数あるフォーム系プラグインの中から、New Standard推奨の「MW WP Form」を取り上げます。プラグインのインストールからフォームの作成、設置、動作確認まで。ステップバイステップでご紹介していきましょう。

MW WP Formとは?

MW WP Form

MW WP Form — WordPress Plugins

MW WP Formとは、フォーム作成ができるプラグインです。簡単な操作でフォームが作れますし、設置もショートコードと呼ばれる一文をコピペするだけととてもシンプル。フォーム項目のカスタマイズや細かな設定も比較的簡単に行うことが可能です。

MW WP Formの使い方

さて、それではMW WP Formを使って実際に問い合わせフォームを作っていきましょう。

MW WP Formをインストール・有効化する

最初にすることは、MW WP Formをインストール・有効化することです。プラグインのインストール・有効化の方法については、下の記事で解説してあります。参考にしてください。

WordPressのプラグインの追加方法

フォームを作成する

それではMW WP Formを使って問い合わせフォームを作っていきましょう。インストール・有効化が完了したら、下のように管理画面に「MW WP Form」というメニューが表示されるようになります。「MW WP Form」から「新規追加」をクリックしてください。

「MW WP Form」から「新規追加」をクリック

「フォームを追加」画面が表示されたでしょうか。

「フォームを追加」画面が表示された

それではよくある法人向けの問合せフォームを作ってみましょう。

タイトル欄に法人向けフォームなどわかりやすい名前を入力したあと、フォーム項目を追加していきます。「メディアを追加」の下に「選択してください」とありますね。ここから「テキストフィールド」を選んで右の「フォームタグを追加」ボタンをクリックします。

「テキストフィールド」を選んで右の「フォームを追加」ボタンをクリック

下のようにダイアログが表示されたかでしょうか。

ダイアログが表示された

「name」に「法人名」と入力して、「Insert」ボタンをクリックします。すると、下のようにフォーム要素が追加されました。

フォーム要素が追加された

同様に、下の内容でフォームを作っていってください。

項目名 フォームタグの種類
法人名 テキストフィールド
氏名 テキストフィールド
MAIL Email フィールド
問合せ内容 セレクトボックス
備考 テキストエリア
送信ボタン 送信ボタン

完成した様子がこちら。

完成した様子

「氏名」と「MAIL」、「問合せ内容」は、必須項目として設定します。本文入力欄の下に「バリデーションルール」欄があるので、「バリデーションルールを追加」ボタンをクリックします。下のようにバリデーションルールの入力欄が表示されたでしょうか。

バリデーションルールの入力欄

「バリデーションを適用する項目:」に「氏名」と入力して、「必須項目」にチェックを入れてください。これで「氏名」を必須項目として設定できました。同様に、「MAIL」と「問合せ内容」も必須項目として設定してください。

確認・送信画面を設定する

次に、問い合わせフォームの確認・送信画面の設定をします。本文入力欄の下にある「完了画面メッセージ」に、完了画面に表示させたい文言を入力します。

「完了画面メッセージ」欄

確認画面と完了画面のURLを変更したい場合は、「URL設定」欄で入力をしておきましょう。

「URL設定」欄

メールの設定

問い合わせがされたときに、ユーザーに自動で返信メールを送信する際の設定です。画面右端にある「自動返信メール設定」欄で必要事項を入力、選択します。

「自動返信メール設定」欄

次に、問い合わせ管理者(お問い合わせ担当)のメール設定を行います。同じく画面の右端にある「管理者宛メール設定」欄で設定を行ってください。

「管理者宛メール設定」欄

右上の「公開」ボタンを押せば、フォームの作成は完了です。

フォームを設置する

作成したフォームをHPに設定します。先ほどのフォーム作成画面に「フォーム識別子」欄がありました。

「フォーム識別子」欄

ここに表示してあるショートコードをコピーして、任意のページにペーストしてください。これだけで、フォームの設置は完了です。作成したフォームを見てみましょう。ショートコードを貼りつけたページをひらくと、無事にフォームが表示されている様子がわかります。

設置したフォーム

動作を確認しよう

最後に、フォームを使って動作確認をしておきましょう。先ほどのページから、実際に問い合わせを行ってみてください。

問い合わせ完了

完了画面が表示され、メールが送信されます。自動返信の設定を行った場合はそれぞれにメールが届くかも確認しましょう。以上で、MW WP Formの使い方は終わりです。

あとがき

MW WP Formを使ってフォームを設置する方法についてご紹介しました。記事でご紹介した手順は基本的なものでしたが、いろいろとカスタマイズしてHPに合うフォームを作っていただければと思います。

3時間で最先端のHPを持ち帰るワークショップ vol.09

毎回大人気のワークショップ! 次回は4/16(日)14時に開催します。プロのWebデザイナーがあなたといっしょにホームページを作ります。

ファーストビュースタイル

カラー

※製品版では自由に配色を選べます

ヘッダー表示