Web制作ではフォームは欠かせない要素の一つです。例えば、お問い合わせフォームや会員登録フォーム、購入フォームなどがありますね。どれも、HPからの売上に直結することがわかります。
さてフォームを設置するにはいくつかの方法がありますが、WordPressを使っているならプラグインを使うといいでしょう。簡単な手順でフォームを設置することができますよ。
今回は数あるフォーム系プラグインの中から、New Standard推奨の「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をインストール・有効化することです。プラグインのインストール・有効化の方法については、下の記事で解説してあります。参考にしてください。
フォームを作成する
それではMW WP Formを使って問い合わせフォームを作っていきましょう。インストール・有効化が完了したら、下のように管理画面に「MW WP Form」というメニューが表示されるようになります。「MW WP Form」から「新規追加」をクリックしてください。
「フォームを追加」画面が表示されたでしょうか。
それではよくある法人向けの問合せフォームを作ってみましょう。
タイトル欄に法人向けフォームなどわかりやすい名前を入力したあと、フォーム項目を追加していきます。「メディアを追加」の下に「選択してください」とありますね。ここから「テキストフィールド」を選んで右の「フォームタグを追加」ボタンをクリックします。
下のようにダイアログが表示されたかでしょうか。
「name」に「法人名」と入力して、「Insert」ボタンをクリックします。すると、下のようにフォーム要素が追加されました。
同様に、下の内容でフォームを作っていってください。
項目名 | フォームタグの種類 |
---|---|
法人名 | テキストフィールド |
氏名 | テキストフィールド |
Email フィールド | |
問合せ内容 | セレクトボックス |
備考 | テキストエリア |
送信ボタン | 送信ボタン |
完成した様子がこちら。
「氏名」と「MAIL」、「問合せ内容」は、必須項目として設定します。本文入力欄の下に「バリデーションルール」欄があるので、「バリデーションルールを追加」ボタンをクリックします。下のようにバリデーションルールの入力欄が表示されたでしょうか。
「バリデーションを適用する項目:」に「氏名」と入力して、「必須項目」にチェックを入れてください。これで「氏名」を必須項目として設定できました。同様に、「MAIL」と「問合せ内容」も必須項目として設定してください。
確認・送信画面を設定する
次に、問い合わせフォームの確認・送信画面の設定をします。本文入力欄の下にある「完了画面メッセージ」に、完了画面に表示させたい文言を入力します。
確認画面と完了画面のURLを変更したい場合は、「URL設定」欄で入力をしておきましょう。
メールの設定
問い合わせがされたときに、ユーザーに自動で返信メールを送信する際の設定です。画面右端にある「自動返信メール設定」欄で必要事項を入力、選択します。
次に、問い合わせ管理者(お問い合わせ担当)のメール設定を行います。同じく画面の右端にある「管理者宛メール設定」欄で設定を行ってください。
右上の「公開」ボタンを押せば、フォームの作成は完了です。
フォームを設置する
作成したフォームをHPに設定します。先ほどのフォーム作成画面に「フォーム識別子」欄がありました。
ここに表示してあるショートコードをコピーして、任意のページにペーストしてください。これだけで、フォームの設置は完了です。作成したフォームを見てみましょう。ショートコードを貼りつけたページをひらくと、無事にフォームが表示されている様子がわかります。
動作を確認しよう
最後に、フォームを使って動作確認をしておきましょう。先ほどのページから、実際に問い合わせを行ってみてください。
完了画面が表示され、メールが送信されます。自動返信の設定を行った場合はそれぞれにメールが届くかも確認しましょう。以上で、MW WP Formの使い方は終わりです。
あとがき
MW WP Formを使ってフォームを設置する方法についてご紹介しました。記事でご紹介した手順は基本的なものでしたが、いろいろとカスタマイズしてHPに合うフォームを作っていただければと思います。