Webを創る Page.08-6『MW WP Form』

Webを創る



ここまででWordpressの投稿や保持に有効なプラグインと、告知と画像表示に有効なプラグインを入れました。
今回はチケット予約や問い合わせに有効なプラグインを入れます。
下準備もあと一息です。

MW WP Form

チケット予約や問い合わせに有効なプラグインで老舗なのが『Contact Form 7』。
僕が管理している他のサイトでは『Contact Form 7』を使ってるものもあります。
でも今回は『MW WP Form』を入れます。

『Contact Form 7』も使い勝手がいいのですが単体では送信前の確認画面を表示できないんです。
(さらにプラグインを入れれば表示可能)
なので確認画面を表示できる『MW WP Form』を入れます。

公式サイトはこちら≫

インストール

ダッシュボード左側メニュー一覧【プラグイン】⇒【新規追加】⇒【検索窓にMW WP Formと入力】⇒【インストール】⇒【有効化】と進みます。
ダッシュボード左側メニュー一覧に【MW WP Form】と表示されれば有効化成功です。

設定

プラグイン自体の設定は必要ありません。

が、予約フォームからのお知らせはメールに届くので、アーティスト用のメアドは準備しておきましょう。
サーバーを借りるのであればサーバーメールでもいいですし、GmailやOutlookなどのメールでも問題ありません。

ただし、フォームからのメールはまれに迷惑メールと判断されることがあります。
そうなるとそのメールは迷惑メールフォルダ内を見ることでしか確認できなくなるので、気付くのが遅くなるとちょっとまずいことになります。
使い勝手が悪いメールではなく、スマホなどでも簡単に見られるメールの方がいいかもしれません。
まあ、セキュリティ的にはフリーメールはあまりよろしくはないんですが。。。

チケット予約フォームを設置

では、チケット予約フォームを設置していきましょう。
まずは予約に必要な項目をリストアップします。

  • 日付と場所
  • 枚数
  • お客さんのお名前
  • メールアドレス
  • ご希望など

といったところでしょうか。
では、ダッシュボード左側メニュー一覧【MW WP Form】⇒【新規追加】と進みましょう。

タイトル入力

ここのタイトルは訪問者に見えるものではなく、自分が管理するために使うものです。
わかりやすいタイトルにしておけばOK。

AddForm1

フォームタグを追加

必要なフォームを設置していきます。
【選択してください】のドロップメニューから入力項目を選び、【フォームタグを追加】ボタンをクリック。
必要項目を入力し【Insert】をクリックするのが基本手順。

日付と場所

まずは【日付と場所】から。

【選択してください】メニューから【セレクトボックス】を選び【フォームタグを追加】をクリックします。
入力画面がポップアップ表示されるので、ここに入力していきます。

【name】とは各フォームタグごとにつける名前です。
わかりやすい名前をつければOKです。(ここでは日付という意味でdateとしています。)

次に【選択肢】。
この【セレクトボックス】はあらかじめ項目を入力しておくことで、選択肢を作ることが出来ます。
チケット予約なので日付と場所を入力しました。

次に【初期値】。
このフォームタグはページ上ではドロップダウンメニューとして表示されます。
ここに入力が無い場合は選択肢の一番目が表示されますが、他のものを表示したい場合はここに入力します。
ここでは『選択してください』と入力しました。

入力が終わったら【Insert】をクリックします。

AddForm2

 

枚数

【テキストフィールド】を選択し【フォームタグを追加】。
まずは【name】を入力。

次に【size】。
これはWeb表示上の枠の長さを決めます。
初期値(見えないけど)は60なのですが、長いので10にしました。

【placeholder】。
枠内に表示させておきたい文字をここに入力します。
今回はいらないと判断したので空欄です。

【半角英数字に変換】。
数字を扱うので、チェックを入れました。

AddForm3

 

お客さんのお名前

これも【テキストフィールド】を使います。
【半角英数字に変換】のチェックははずします。

AddForm4

 

メールアドレス

これも【テキストフィールド】を使います。
【半角英数字に変換】にチェックを入れます。

AddForm5

 

ご希望など

これは【テキストエリア】を使います。
細かい設定も出来ますが、初期設定でいっちゃいます。

AddForm6

完了画面メッセージ

チケット予約メールがこちら側に送信されたときに、お客さんにお見せするメッセージを設定します。

AddForm7

 

URL設定

これはあとから設定するので、今は空欄で。

バリデーションルール

ここは各フォームタグの設定をする項目です。
たとえば必須入力とか、メールアドレスなのか、などです。
設定が不要なフォームタグはスルーでOK。

まずは【バリデーションルールを追加】をクリック。

【バリデーションを適用する項目】に各フォームタグの【name】を入力します。

次に各チェックボックスの中から必要なものをチェック。

これを繰り返します。

AddForm8

 

自動返信メール設定

フォームから送ってくれた人への自動返信メールを設定します。

件名

メールの件名です。

送信者

メールの送信者です。
アーティスト名を入れるのが自然かもしれません。

送信元

こちら側のメールアドレスです。
アーティスト用のメアドを入力すればOK。

本文

チケットを予約してくれた人が読むメール内容です。
ここでは簡単に書いてますが、実際は「ありがとうございます」などいろいろ書きます。

フォームの内容を本文に表示する場合は { と } でフォームタグのnameを囲みます。
たとえば日付と場所は【date】の項目で聞いているので、ここには{date}と入力します。

自動返信メール

この自動返信メールをどこに送るか、です。
この場合はチケットの予約者ですね。
予約者のメールアドレスを【mail-address】の項目で聞いているので、mail-addressと入力します。

AddForm9

管理者宛メール設定

アーティスト側に送られるメールです。

送信先

アーティスト用のメールアドレスを入力します。

CCとBCC

通常のメールでもあるCCとBCCの設定です。
必要であれば入力します。

件名

メールの件名です。

送信者

メールの送信者の名前です。

送信元

どのメールアドレスからこのメールを送るか、です。
ここでは【送信先】と同じメアドを入力してますが、メーラーによっては迷惑メールとして認識する確率が上がります。
よって、違うメアドを入力する方が実用的だと思います。

本文

【自動返信メール設定】と同様に、メール本文の内容を入力します。

AddForm10

これで、準備はほぼ完了です。
最後に【公開】を押して終了です。
ここから先は、訪問者に見てもらうページを作る基礎知識が必要になるので今回はここまでとします。

入力項目がたくさんあってけっこう面倒に感じるかもしれませんが、これをやっておけばチケット予約をしてもらうことも楽になります。
コツコツやれば終わるので、くさらずにやりましょう。

‡ポイント‡
入力フォーム作成はちょっと手間がかかる。
でもこれでいろいろ楽になる。

コメント

タイトルとURLをコピーしました