BLOG(ハイズスタジオブログ)MENUCLOSEオススメネタレビューテクノロジーニュースビジネスライフフィッシング詐欺お問い合わせYouTube動画で見れる!「ハイズLabo」を開設しました!チャンネル登録をお願いします!!YouTubeチャンネルLINE友だち追加でお得な商品、掘り出しPCやクーポン情報をGETしよう!!LINE@にて症状等の質問等の対応につきましては、有償対応のご案内をさせていただきます。無償による対応は出来ませんのでご了承ください。2018年3月3日テクノロジーツイートシェアはてブ送るPocket個人サイト・企業サイトのお問い合わせ等で必須となるだろうメールフォーム。WordPressにはデフォルトでメールフォーム機能は付いていません。そのためメールフォームをPHP等で自作するか、Googleフォームを使うか、プラグインを導入するかしかありません。その中で今回はプラグインを導入してメールフォームを作ろうと思います。WordPressのメールフォームプラグインと言えば「ContactForm7」が有名ではないでしょうか?このプラグインは国産プラグインのため日本語表示はもちろん、軽量で初心者でも使いやすい仕様となっています。痒いところに手が届かないのも事実。「問い合わせ完了ページを生成できない」「引数を渡せない」「送信されたデータをDBに保存・管理ができない」などがあります。因みに、上記の「問い合わせ完了ページを生成できない」「引数を渡せない」「送信されたデータをDBに保存・管理ができない」は絶対できないという意味ではなく、ContactForm7の単体及び初期状態では、できないという意味です。カスタマイズや別のプラグインを組み合わせることで解決できます。そんな問題を一つのプラグインで解決できちゃいます。Formに切り替えました。Formをご紹介します。バリデーションエラー画面の固定ページ(URL)を設定することができます。GoogleAnalytics等のコンバージョンに大変便利ですね。ユーザーからも送信までの手順が画面移動することで解りやすくなります。ContactForm7のように同じURLで完結もできますし、全て違うURLで変遷させることも可能です。送信された情報をデータベース上に保存することで、WordPressの管理画面上で送信された情報(入力項目内容)を閲覧できます。閲覧だけではなく、対応済みなどのチェック・データグラフ表示・CSVダウンロードが可能です。顧客管理やデータ分析にオススメです。Formでは22個のバリデーションルールを設定できます。作成した入力項目に対してバリデーションルールを複数設定できます。中級者~上級者向けの機能となります。引数を取得することで投稿ページ・カスタムフィールドのデータを取得することができます。wordpressグローバル変数$postのプロパティが使えるという事です。テンプレートタグを書くことで、メールフォーム前のページのデータを引き継いで取得することができます。他にもあるのですが、大きい特長はこの4つだと思います。この4つについては使い方で説明します。メール設定」「フィルター・アクションフック」もあります。本当にこのプラグイン一つでメールフォーム機能を網羅できます。FormのインストールWordPressの管理画面のメニュー「プラグイン」→「新規追加」を選択します。Form」と入力してください。Formが表示されます。「今すぐインストール」ボタンをクリックしてインストールを行ってください。インストールが完了したら、そのまま「有効化」ボタンをクリックしてください。Formが使えるようになりました。Form」が追加されます。Formでは、作成したメールフォーム一覧が表示されます。下の画像はメールフォームを作成していた場合の表示となります。新規追加では、メールフォームを作成するとができます。画面は下記のような表示となります。※インストールしているプラグインにより表示が異なります。各エリアごと説明していきます。タイトル&本文入力エリアタイトルにはメールフォームのタイトルを入れてください。お問い合わせのメールフォームでしたら「お問い合わせ」とわかりやすいタイトルをつけると良いでしょう。本文入力エリアにメールフォームに表示したい項目や文章を入力します。この本文入力エリアにフォームタグをどんどん追加してメールフォームを作っていきます。本文入力エリアの上にセレクトボックスと「フォームタグを追加」というボタンがあります。セレクトボックスでは追加するフォームタグを選択できます。29個あるので好きな項目を選びます。項目内容・細かい使い方については割愛させていただきます。使いたいフォームタグを選択した後「フォームタグを追加」ボタンをクリックするとフォームタグ追加詳細ウインドウが表示されます。ここで項目のname属性値などを設定します。フォームタグ追加詳細設定が完了したら「Insert」ボタンをクリックし、本文入力エリアに反映させましょう。上記のように必要なフォームタグを追加していき、メールフォーム及び表示を完成させましょう。簡単ですが、テーブルタグで作成したのが下記。Generator)が発売されています。表示するための入力エリアです。エラー表示画面を同一URLではなく、個々のURLにしたい場合設定します。設定するには対象の固定ページを作る必要があります。今回は完了画面ページだけを別URLにしたい場合で説明します。完了画面のみでしたら、上記の項目の「完了画面」だけを設定するだけで動作します。固定ページから完了画面ページを作成します。Formで設定した完了画面メッセージの内容が表示されます。固定ページ内での文章も表示されますので、上手く使い分けましょう。完了画面にフォーム認識子を設置しないと、再度入力画面に完了画面ページにリダイレクトされてしまいますので、必ず完了画面にフォーム認識子を設置してください。完了画面ページの作成が終わったら「URL設定」の「完了画面」の項目に完了画面メッセージのURLを入力してください。あとは実際に試してみると送信後、完了画面ページに移動していることがわかります。バリデーションルールここでは、追加したフォームタグに対してのルール(必須条件等)を設定できます。ルールを追加するには「バリデーションルール追加」ボタンをクリックしてください。ルール設定画面が表示されますので「バリデーションを適用する項目」にはフォームタグ追加時に設定した「name属性値」を入力してください。今回は「name属性値=お名前」にしたので「お名前」と入力してください。次に適用するルールをチェックまたは入力をします。今回は入力必須ということなので「必須項目」にチェックを付けてください。これでバリデーションルールの設定完了です。必要に応じて追加したフォームタグに対してバリデーションルールを設定しましょう。作成したメールフォームを呼び出すためのショートコードが表示されます。このショートコードをコピーしてページ等に設定してください。自動返信メール設定メールフォームから問い合わせをしてきたユーザーに対して自動返信メールを送信できます。この機能を利用するにはユーザーからメールアドレスを取得する必要がありますので、フォームタグでメールアドレス情報を追加してください。本文入力エリアで設定したフォームタグのname属性値を{}で囲んで設置することで値を表示することができます。「name属性値=お名前」だった場合、{お名前}と設置することで、フォームタグに入力された名前が表示されます。メールを送る送信者の名前を設定します。未入力だと一般設定のサイトのタイトルが入ります。送信元(E-mailアドレス)自動返信メールを送る送信元メールアドレスを設定します。未入力だと一般設定のメールアドレスが入ります。自動返信のメール本文を設定します。フォームタグのname属性値を{}で囲って設置できます。自動返信メール自動返信メールの送り先を設定します。フォームタグで設定したメールアドレスのname属性値を{}で囲わずに入力してください。以下が設定した例となります。管理者宛メール設定ユーザーから送信されたメールを受信するための管理者宛メール設定ができます。自動返信メールと同様、本文入力エリアで設定したフォームタグのname属性値を{}で囲んで設置することで値を表示することができます。「name属性値=お名前」だった場合、{お名前}と設置することで、フォームタグに入力された名前が表示されます。送信先(E-mailアドレス)受信メールアドレスを設定します。カンマ(,)区切りで複数のメールアドレスを設定することもできます。CC(E-mailアドレス)送信先以外のCCメールアドレスを設定します。BCC(E-mailアドレス)送信先以外のBCCメールアドレスを設定します。届く送信者の名前を設定します。未入力だと一般設定のサイトのタイトルが入ります。(メールアドレス)エラーメールの戻り先メールアドレスを設定します。送信元のメールアドレスと合わせると良いでしょう。未入力だと一般設定のメールアドレスが入ります。送信元(E-mailアドレス)管理者宛に届く送信元のメールアドレスを設定します。未入力だと一般設定のメールアドレスが入ります。管理者宛のメール本文を設定します。フォームタグのname属性値を{}で囲って設置できます。以下が設定した例となります。設定メールフォームに対してその他設定ができる項目です。FormはURL引数を取得します。もとに投稿を取得します。プロパティを使用できるようになります。メールフォームの前ページあたる投稿ページのURL引数を取得する方法はこちらのホームページを御覧ください。問い合わせデータをデータベースに保存ユーザーからの問い合わせをデータベースに保存することで、WordPress管理画面から問い合わせ内容を確認することができます。Fromに「問い合わせデータ」の項目が追加されます。問い合わせデータを利用するには「管理者宛メール設定」が必要となります。画面変遷時のスクロールを有効にする有効にすると、画面遷移時にフォームの位置まで自動的にスクロールします。次の問い合わせ番号を変更する問い合わせ番号は「1」から始まりますが、この番号を任意の数値から開始することができます。変更するには「変更する」にチェックを入れて、任意の数値を入力してください。管理者宛に届く送信者の名前を設定します。未入力だと一般設定のサイトのタイトルが入ります。オマケ:問い合わせデータ問い合わせデータをデータベースに保存を有効にすることで使用できます。有効にすると「問い合わせデータ」の項目が追加されます。「問い合わせデータ」を選択すると作成したフォーム名一覧が表示されます。フォーム名一覧から「問い合わせ件数」の項目をクリックしてください。問い合わせ内容一覧が表示されます。ページ下部に「CSVダウンロード」ボタンがあります。All」にチェックを入れて「CSVダウンロード」ボタンをクリックすると問い合わせ内容すべてをCSVでダウンロードができます。ダウンロードしたCSVを一斉メールソフトや顧客管理ソフト等にインポートできるようになります。問い合わせのタイトルをクリックすることで問い合わせ内容の詳細が見れます。み」のどれかに設定できます。オマケ:ユーザー情報表示タグまた、ContactForm7にもある機能ですが、ユーザー情報を表示できるタグもあります。ユーザー情報表示タグを使えばログインが必要となる会員サイトや販売サイト等のお問い合わせを楽にできますね。使えるユーザー情報タグは以下の通りです。ハイズスタジオユーザー情報表示タグは本文入力エリア以外に、自動返信メール設定・管理者宛メール設定、フォームタグの初期値として使用できます。※ただし、送信先、CC、BCCには使えません。Formの使い方となります。LINE@にて症状等の質問等の対応につきましては、有償対応のご案内をさせていただきます。無償による対応は出来ませんのでご了承ください。【Windows版】iPhone&iPadのバックアップ保存先をPC内か...スポンサーリンクYouTubeはじめました!!YouTube動画で見れる!「ハイズLabo」を開設しました!チャンネル登録をお願いします!!YouTubeチャンネルLINE@はじめました!!LINE友だち追加でお得な商品、掘り出しPCやクーポン情報をGETしよう!!LINE@にて症状等の質問等の対応につきましては、有償対応のご案内をさせていただきます。無償による対応は出来ませんのでご了承ください。