みなさんこんにちは。幸せって何だろう、って日々日々考えています。ぜぇれさんです。
今回はワードプレスにお問い合わせフォームを簡単に設置してくれるプラグイン「MW WP Form」の導入・設置方法を解説します。
当サイトにもお問い合わせフォームがありますので気軽に「ひやかし」を入れてください。
[amazonjs asin=”B01I9HKPCI” locale=”JP” title=”小さなお店＆会社の WordPress超入門 ―初めてでも安心！思いどおりのホームページを作ろう！”]
「MW WP Form」って？
MW WP Formはいろんな方々からお勧めされている、フォーム作成ができるプラグインです。
個人的なおすすめポイント一位は「日本語」だという事。企業でも多く導入されていて、機能を拡張するアドオンなども豊富にそろっているところも魅力です。
ですがそういった拡張機能などを無視しても、簡単に作成できて日本語対応ってところがやはりおすすめポイントですね。
フォーム項目の作成
まずはプラグインのインストールと有効化を進めてください。
詳細は省きますが大まかな手順はこちらからご確認いただけます。
プラグインをワードプレスに導入する時のいつもの手順をおさらい
フォームの新規作成
インストール・有効化が完了するとメニュー内に「MW WP Form」の項目が追加されます。
その中の新規追加へ進みましょう。
フォームの項目作成
フォーム追加の画面が表示されましたか？
このままシンプルなお問い合わせフォームを作ってゆきます。
そうですね、項目は
①お名前
②メールアドレス
③お問い合わせ内容
にしましょうか。
お名前の追加
まずはお名前から、名前の入力は1行のテキストになるので
①テキストを選択
続いて②フォームタグを追加をクリックします。
以下のようなダイヤログが表示されますので
nameの部分に「お名前」と記入し
Insertをクリックします。
ちなみにnameに記入する内容は任意のものでも構いません。
すると以下のようにショートコードが挿入されました。
フォームの項目追加の流れは上記を繰り返す形になります。
では引き続きメールアドレス、お問い合わせ内容を追加してゆきましょう。
メールアドレスの追加
お名前と同様に
①メールを選択し
②フォームタグを追加をクリックします。
こちらも同様にnameに「Mail」とでも入力しましょう。
続いてInsertをクリック。
お問い合わせ内容の追加
お問い合わせ内容は複数行のテキストエリアになるので
①テキストエリアを選択し
②フォームタグを追加をクリックします。
nameには「お問い合わせ内容」とでも入れて
Insertをクリック。
送信ボタンも必要ですね
最後に送信ボタンを追加します。
①確認・送信を選択し
フォームタグを追加をクリックします。
nameには「送信する」とでも入れて
Insertをクリック。
以上が完了した時点で、以下のようにショートコードが挿入されていると思います。
項目の前にタイトルを入れよう
これだけの状態では本当に入力フォームだけが並ぶフォームになってしまいます。
と言うわけで、各項目のショートコードの上にそれぞれの内容を指し示すタイトルを入れておきましょう。
デザインなどは別途施す必要がございますが、ワードプレスのテーマなどで文字の強調などは勝手に行ってくれる部分も多いので、ここでは<h3></h3>で囲っておきましょう。
すると僕のサイトではこのように表示されます。
もうワンポイント
フォームのショートコードを挿入する時に出てくるダイアログに「placeholder」という項目があったかと思います。
例えばここに「お名前をご入力ください」と入力しておくと以下の画像のようにフォームに実装されます。
タイトルに加えてより入力内容が分かり易くなりますね。
バリデーションルールの設定
続いてバリデーションルールについての設定です。
まず「バリデーションルールってなに？」って感じの方もいると思いますが、ようは「必須項目」かどうかだとか、そこが「電話番号」を入力するところかどうかとか、「ひらがな以外禁止」だとかそういうルールを各項目に設けることができる機能です。
フォーム設定画面の下部にある、ここをクリックして設定してゆきます。
①バリデーションを適用する項目：に項目追加時に記入した「name」の内容を入力します。
②続いてこのエリアで「必須項目」であったり「メールアドレス」であったりといった、該当する項目にチェックをつけます。
メールアドレスにチェックを入れた場合は、その入力項目に「＠」がない際などにアラートが出てくれます。
一つ入力を終えたら、再度「バリデーションルールを追加」をクリックしルールを適用する項目を増やします。
今回は「お名前」「メールアドレス」「お問い合わせ内容」の3項目を作成したので三つ追加が必要ですね。
別に必須項目でもなく、フリーに入力してよい場合はバリデーションルールを適用しなくても問題ありません。
自動返信メールの設定
お問い合わせを送った後に自動返信が来ないと不安になりますな？
という事でこれも設定してゆきましょう。
件名
自動返信の件名です。
送信者
自動返信メールの送信者名です。
Reply-to（メールアドレス）
自動返信メールに返信したときに届く宛先です。
本文
メールの本文になります。
ここではフォームの送信内容を、確認のため記載することもできます。
フォーム項目設置時に設定した「name」を{}で囲んでここに記載することで呼び出せます。
例えば今回作成したフォーム内容なら、以下のような自動返信はいかがでしょうか？
この設定方法さえ理解してしまえば、自由に自動返信メールを作成することができます。
自動返信メール
前提条件を一つすっ飛ばしていました。
自動返信メールの送信先が分からないと送れませんよね、この機能を利用するにはフォームの項目にメールがあることが前提です。
ここにはメール項目追加時に入力した「name」を記入します。
送信元（E-mailアドレス）
自動返信を送信するメールアドレスを設定します。
以上で自動返信の設定は完了です。以下の画像のように今回は設定しました。
お問い合わせ通知メールの設定
お問い合わせがあったときは通知してもらいましょう。
自分あてなので結構適当で大丈夫ですよ。
送信先（E-mailアドレス）、CC、BCC
それぞれ通知メールを届けたいアドレスを設定します。
件名
通知メールの件名です。
送信者
通知メールの送信者名です。
Reply-to（メールアドレス）
通知メールに返信したときに届くアドレスです。
あんまり使わなさそう。
本文
自動返信メールと同じように設定が可能です。
通知メールでどのようなお問い合わせがあったかがわかるように設定しておきましょう。
Return-Path ( メールアドレス )
エラーメールの戻り先を入力します。任意です。
送信元（E-mailアドレス）
通知メールの送信者のアドレスを入力します。任意です。
必要な設定は以上
お問い合わせフォームを十全に機能させるために必要な項目は以上です。
実際の作業自体は大したことないのですが、説明するとかなり長くなってしまいました。
申し訳ありません。
一旦今回はここまでにさせていただき次回以降に
- フォームの公開
- 確認ページ、サンクスページ、エラーページ等の作成
この辺りをお伝えできればと思います。
書きました
「MW WP Form」の導入方法【図解】その②。準備したフォームを公開しよう。
いかがでしたか？今回以下のような内容でお話させていただきました。
取り急ぎフォームの設置前の必須な設定周りをご説明しました。
長々となってしまって恐縮ですが、次回の記事も参考にしてくれれば嬉しいです。ぜぇれさんでした。
[amazonjs asin=”B07FDSJGZM” locale=”JP” title=”ポケットモンスター Let’s Go! ピカチュウ モンスターボール Plusセット- Switch”]
兵庫在住のわりかしイケてる意識の他界WEBデザイナー。楽天／ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務と運営をしこたまやった後、ECに特化した受託制作をやってるようなやってないような。爽快なんとかドラッグとかのリニューアルもしました。紙媒体も出来るけど弱い、期待するな。最近はツイッタラーに常駐しています。ゲームが好きです。
One Reply to “「MW WP Form」の導入方法【図解】その①。フォームの公開前にしておきたい細かな設定を解説。”