お問い合わせフォームの構築 MW WP Form

はじめに

概要

WordPressの利点の一つは、バックエンドの知識が必要なく簡単にお問い合わせフォームを作成できることです。今回はMW WP Formを使用してお問い合わせフォームを作成します。この方法のメリットは、確認画面から完了画面までの遷移を容易に構築できることです。それでは始めましょう。※申し訳ありませんが、本記事はフォームの構築を目的としておりますので、予めCSSでデザインを作成したうえで、進めていきます。デザインの形成は割愛していますので予めご了承ください。

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

読者

お問い合わせフォームの構築 — MW WP Form —は、最初にどこを理解するとよいですか？

木村

画面を作るだけでなく、必須項目の検証、送信結果、迷惑投稿対策までを一つの流れとして確認することが大切です。

読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

構築方法

構築方法では、お問い合わせフォームの構築 — MW WP Form — #1/3を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

予め作成していたHTMLデータをそのままMW WP Formのエディタ内に貼り付けます。

そしてショートコードを先程の固定ページに添付します。

注意点

以下の内容に注意してください。お問い合わせフォームが機能しない原因となります。 – formタグをエディタ内に配置する。通常、お問い合わせフォームにはformタグが必要ですが、このプラグインでは自動的に配置されるため、必要ありません。 formタグは自動で挿入される

– もし特別な確認画面や送信完了画面に遷移しない場合、URL設定は必要ありません。

– 完了画面は一例として下記のように設定しておきましょう。

– 稀に、送信が完了した時にエラーが発生することがあります。原因はわかりませんが、ローカルアプリで作成した場合、URLに数字やアンダースコアが含まれていると、正常に機能しないことがあります。もしエラー表示でお困りの際は、サイトをcloneしたうえURLの変更を試してみてください。

構築方法で押さえたいポイント

構築方法は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

inputタグの入れ替え

inputタグの入れ替えでは、お問い合わせフォームの構築 — MW WP Form — #1/3を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

プラグインを動作させるためには、inputタグを独自のショートコードに置き換える必要があります。聞こえは難しいかもしれませんが、作業は簡単ですので一緒に進めましょう。動画で参照したい方はこちらの動画がおすすめです。

ショートコードの挿入

選択してくださいのセレクトボタンからテキストを選んでください。そして、そのテキストをinputタグと入れ替えます。

メールアドレスとテキストエリアも同じ手順で入れ替えます。なお、nameはデータベースとの関連付けに必要ですので、必ず記述してください。

その他

ウェブサイトでよく見かける以下の機能を追加します。 – 同じメールアドレスを入力させなくする – ユーザーがプライバシーポリシーに同意するためのチェックボックス – 確認と送信を行うためのボタンの配置 – 戻るを行うためのボタンの配置

設定は終わりました。実際に送信してみましょう。お問い合わせ内容がデータベースに保存されていることを確認するために、以下のチェックボックスにチェックを入れてください。

確認画面・送信完了ページに移動すると、お問い合わせのデータが保存されていることが分かりました。

同じメールアドレスを入力させなくする

<script>
    document.querySelector('form').addEventListener('submit', function(event) {
        var email1 = document.getElementById('inputMail').value;
        var email2 = document.getElementById('inputMail2').value;

        // すでに存在するエラーメッセージがあれば削除
        var oldErrorMessage = document.getElementById('emailError');
        if (oldErrorMessage) oldErrorMessage.remove();

        if (email1 === email2) {
            // 新しくp要素（エラーメッセージ）を作成
            var errorMessage = document.createElement('p');
            errorMessage.style.color = 'red';
            errorMessage.innerText = 'メールアドレスが重複しています';
            errorMessage.id = 'emailError'; // このエラーメッセージにIDを付与

            // エラーメッセージをinputMail2の次の要素として挿入
            var inputMail2 = document.getElementById('inputMail2');
            inputMail2.parentNode.insertBefore(errorMessage, inputMail2.nextSibling);

            // フォーム送信を止める
            event.preventDefault();
        }
    });
</script>

ChatGPTが情報を提供してくれました。非常に役立つツールです。もしまだ学習で取り入れていない方は、試してみることをおすすめします。これで以上です。次回は、エラーメッセージの設定と自動返信メールの設定を行います。

実装前に確認しておきたいこと

ここでは、お問い合わせフォームの構築 — MW WP Form —を実際の制作へ取り入れる前に、準備しておきたい内容を整理します。先に作業範囲と確認方法を決めておくと、既存ページへの影響を抑えながら進められます。

作業の目的と変更範囲を決める

画面を作るだけでなく、必須項目の検証、送信結果、迷惑投稿対策までを一つの流れとして確認することが大切です。サンプルをそのまま貼り付ける前に、どのページ、どの要素、どの利用者へ影響するのかを書き出してください。目的が明確であれば、必要以上にコードや設定を増やさずに済みます。

元の状態へ戻せるようにする

テーマや設定を変更するときは、対象ファイルや設定値のコピーを残します。複数の変更を一度に行わず、一つ反映するたびに表示と動作を確認すると、問題が起きても原因を切り分けやすくなります。

よくあるつまずきと確認方法

お問い合わせフォームの構築 — MW WP Form —が期待どおりに動かない場合は、コードを追加し続ける前に、読み込み順、対象要素、設定値、キャッシュの順で確認します。小さな入力ミスや確認条件の違いが原因になることも少なくありません。

変更が反映されない場合

保存したファイルと表示中のページが対応しているかを確認し、キャッシュを消して再読み込みします。ブラウザーの開発者ツールやWordPressのエラーログを確認すると、読み込み失敗や記述ミスを見つけやすくなります。

公開前の最終確認

未入力・誤入力・正常入力の三つを試し、確認画面、完了画面、通知メール、管理側の記録まで確認します。スパム対策は表示の有無だけでなく、サーバー側で検証されているかも確認してください。

まとめ

WordPressの利点として、お問い合わせフォームの構築が容易である
formタグは自動で挿入されるため、入力しない
デザインは自身で形成する必要がある
こちらのプラグインは入力から確認・送信といったことも可能である
inputタグに独自のショートコードを挿入する
わからないところは、ChatGTPを活用する

お問い合わせフォームの構築 — MW WP Form — #1/3

目次

構築方法