ワードプレスオリジナルテーマ作り方⑩お問い合わせフォーム
2023年05月26日
お問い合わせフォーム設置
今回はお問い合わせフォームの作り方をやっていきたいと思います。
お問い合わせフォームも作り方はいろいろありますが、自作するには少しPHP言語を勉強したりしないといけないので少しハードルが高いです。
結構ホームぺージの勉強をされて、HTMLとCSSでページのレイアウトはできるが、お問い合わせフォームは作れませんってかた昔は結構いました。
しかし、それをすべて解消し、パパっとお問い合わせフォームが作れるのが天下のワードプレスです。
どこかの頭のいい人がつくったプラグインで簡単にお問い合わせフォームを作ることができます。
今回使うプラグインは
MW WP Formです。
もうひとつ超有名なお問い合わせフォーム作成プラグイン
Contact Form 7
がありますが、僕はMW WP Formを使っています。
設定はどちらも簡単で、とても便利で甲乙つけがたいですが、
違いは確認ぺージがあるかないかです。
送信して内容確認して送信完了
上記の様に内容確認と送信完了ページが作れます。
今回は簡易的に作って別ページ(違うURLに移動）では作りませんが、
【同一URLで内容確認・送信完了】を作っていきたいと思います。
それでは早速やっていきます。
プラグインMW WP Formで制作
まず、はプラグインをインストール
ワードプレス管理画面・左のメニューからプラグイン・新規追加をクリックして
右上の検索ボックスに
MW WP Formを入力
するとお目当てのMW WP Formがでてきますので、今すぐインストールをクリックしインストール完了後有効化を押してください。（上記執筆時点でダウンロードしてたので画像がすでに有効になってますがお気になさらず）
プラグインはとても便利で簡単にインストールできてやっぱワードプレスすごいですね。
いい意味で人間をだめにする便利さです。
それではインストールが完了したら、作成に入ります。
作成の手順を大まかに説明すると以下になります。
- ①HTMLとCSSでお問い合わせフォームデザインを事前に作成する
※作りながらでもできますが、管理画面での作業になるのでめんどい - ②お問い合わせフォームデザインをプラグインMW WP Formにコピー＆ペースト
- ③コピーしたHTMLタグをプラグイン側で用意されたタグに置き換える
- ④必須項目をプラグイン側で設定（バリデーションっていうのかなかっこよく言うと）
- ⑤プラグインの自動返信とか管理者への通知メール設定をする。
- ⑥固定ページとの紐づけで完了
以上の6項目で簡単にできます。
①HTMLとCSSでお問い合わせフォームデザインを事前に作成する
フォームデザインは
こんな感じにします。
見本はこちら
HTMLはこんな感じCSSは割愛
<article>
<h2 class="fuki">お問い合わせ</h2>
<section class="blogbox04 com">
<h3>お問い合わせフォーム</h3>
<p class="topi">
入力画面
</p>
<table>
<tr>
<th><label for="namae">お名前<span>必須</span></label></th>
<td><input type="text" id="namae" name="namae" ></td>
</tr>
<tr>
<th><label for="namae2">フリガナ<!--<span>必須</span>--></label></th>
<td><input type="text" id="namae2" name="namae2" ></td>
</tr>
<tr>
<th><label for="postcode">郵便番号</label></th>
<td>
<input type="text" name="pos" id="postcode" class="pos">
</td>
</tr>
<tr>
<th><label for="add">住所</label><span>必須</span></th>
<td><input type="text" name="add" id="add" ></td>
</tr>
<tr>
<th><label for="tel">電話番号</label></th>
<td><input type="text" id="tel" name="tel" ></td>
</tr>
<tr>
<th><label for="mail01">メールアドレス<span>必須</span></label></th>
<td><input type="text" id="mail01" name="mail01" /></td>
</tr>
<tr>
<th><label for="naiyou">お問い合わせ内容<span>必須</span></label></th>
<td>
<textarea name="naiyou" id="naiyou" cols="*" rows="*"></textarea>
</td>
</tr>
</table>
<p class="btn"><a href="内容確認ページに">内容確認→→</a></p>
</section>
<!--blogbox02-->
</article>
今までの続きで共通パーツの部分は省力しています。
全体はtableでレイアウトしています。
簡単にHTMLでのフォーム作成のご説明をさせていただきます。
フォーム関係のタグには
■inputタグ
タイプでチェックボックスやラジオボックスやテキストが
あります
■select
セレクトボックス
■textarea
テクストエリアなどがあります。
通常自作でお問い合わせフォームを制作するときはformタグで囲ってその囲っているデータを受け渡しする感じで作成しますが、ワードプレスプラグインのMW WP Formはformタグで囲む必要はなく上記の様に純粋に表示させたいものだけ記述すればいいです。
上記はinputのタイプtextとtextareaを使用して作成しています。
ちなみに項目（名前・フリガナ・郵便番号など）を囲っているlabelタグは
対象のinputと紐づけするために入れています。
例えば
お名前を囲っているlabelはfor=”namae”
お名前を入力するinputのname=”namae”
このように紐づけするlabelのfor=””の部分と
入力するname=””の部分を同じ名前にすると紐づけされます。
紐づけしてなんか意味あんの？ってそこのあなた
そんなに意味はないですけど
代表的な効果は下記です。
項目をクリックすると紐づけされた入力欄がアクティブになってここに入力してって感じになります。
試しに上記のサンプル見本で試してみてください。
話がそれましたが
続きと行きます。
②お問い合わせフォームデザインをプラグインMW WP Formにコピー＆ペースト
①HTMLとCSSでお問い合わせフォームデザインを事前に作成する
が終わったので
②お問い合わせフォームデザインをプラグインMW WP Formにコピー＆ペースト
にはいります。
ワードプレス管理画面の左メニューにあるMW WP Formの新規追加をクリック
タイトルにお問合わせフォーム
本文に入力欄にHTMLをコピー＆ペースト
これで
②お問い合わせフォームデザインをプラグインMW WP Formにコピー＆ペースト
は完了となります。
※【今回はここに入れたものが入力画面と内容確認画面】になるようにします。
③コピーしたHTMLタグをプラグイン側で用意されたタグに置き換える
置き換えるものは
input５カ所と
テキストエリア１カ所ですね
まずはお名前のinputを置き換えます。
<input type="text" id="namae" name="namae" >のタグの前をクリックしてアクティブにして
入力欄左上にある・選択してくださいをクリック
すると項目がでてくるので
今回はテキストをいれたいのでテキストをクリックしてその横のフォームタグを追加をクリック
フォームタグをクリックすると再度入力欄がでてきます
もともとHTMLで記述していたname=””の部分とid=””の部分を上記の様に入れたら
insertでプラグイン用のタグが入ります。
もとのやつはいらないので消去します。
以上で完成残りのinputも同じで順で変更します。
テキストエリアはテキストエリアで選んでinsertしてください。
内容確認→→の部分は
内容確認画面に遷移するボタンになるので
選ぶ項目から・ボタン項目（button）の中から選んでください
（input）の方ではないです。
で入れ替えたのがこちら
<p class="topi nyuryoku">
入力画面
</p>
<table>
<tr>
<th><label for="namae">お名前<span>必須</span></label></th>
<td>[mwform_text name="namae" id="namae" class="namae" size="60" placeholder="マリオ君"]</td>
</tr>
<tr>
<th><label for="namae2">フリガナ<!--<span>必須</span>--></label></th>
<td>[mwform_text name="namae2" id="namae2" class="namae2" size="60" placeholder="マリオクン"]</td>
</tr>
<tr>
<th><label for="postcode">郵便番号</label></th>
<td>
[mwform_text name="pos" id="pos" class="pos" size="60"]
</td>
</tr>
<tr>
<th><label for="add">住所</label><span>必須</span></th>
<td>[mwform_text name="add" id="add" class="add" size="60" placeholder="福岡県福岡市中央区"]</td>
</tr>
<tr>
<th><label for="tel">電話番号</label></th>
<td>[mwform_text name="tel" id="tel" class="tel" size="60"]</td>
</tr>
<tr>
<th><label for="mail01">メールアドレス<span>必須</span></label></th>
<td>[mwform_email name="mail01" id="mail01" class="mail01" size="60" placeholder="mariokunxxx@mariokun.com"]</td>
</tr>
<tr>
<th><label for="naiyou">お問い合わせ内容<span>必須</span></label></th>
<td>
[mwform_textarea name="naiyou" id="naiyou" cols="50" rows="5"]
</td>
</tr>
</table>
<p class="btn">[mwform_bconfirm class="gobtn" value="confirm"]内容確認→→[/mwform_bconfirm]</p>
こんな感じになります。
これで完成まであと１歩。
先ほど今入力している部分が
入力画面と内容確認の両方を兼ねていると書きましたが、まだ入力画面の情報しか入れていません。
ですので内容確認まで入れた情報をいれます。
こんな感じ
<p class="topi nyuryoku">
入力画面
</p>
<p class="topi kakunin">
内容確認
</p>
<table>
<tr>
<th><label for="namae">お名前<span>必須</span></label></th>
<td>[mwform_text name="namae" id="namae" class="namae" size="60" placeholder="マリオ君"]</td>
</tr>
<tr>
<th><label for="namae2">フリガナ<!--<span>必須</span>--></label></th>
<td>[mwform_text name="namae2" id="namae2" class="namae2" size="60" placeholder="マリオクン"]</td>
</tr>
<tr>
<th><label for="postcode">郵便番号</label></th>
<td>
[mwform_text name="pos" id="pos" class="pos" size="60"]
</td>
</tr>
<tr>
<th><label for="add">住所</label><span>必須</span></th>
<td>[mwform_text name="add" id="add" class="add" size="60" placeholder="福岡県福岡市中央区"]</td>
</tr>
<tr>
<th><label for="tel">電話番号</label></th>
<td>[mwform_text name="tel" id="tel" class="tel" size="60"]</td>
</tr>
<tr>
<th><label for="mail01">メールアドレス<span>必須</span></label></th>
<td>[mwform_email name="mail01" id="mail01" class="mail01" size="60" placeholder="mariokunxxx@mariokun.com"]</td>
</tr>
<tr>
<th><label for="naiyou">お問い合わせ内容<span>必須</span></label></th>
<td>
[mwform_textarea name="naiyou" id="naiyou" cols="50" rows="5"]
</td>
</tr>
</table>
<p class="btn">[mwform_bconfirm class="gobtn" value="confirm"]内容確認→→[/mwform_bconfirm]</p>
<div class="btn02">[mwform_bback class="gobtn" value="back"]←入力画面に戻る[/mwform_bback][mwform_bsubmit name="sousin" class="gobtn" value="send"]送信する→[/mwform_bsubmit]</div>
追加したところは
４行目から６行目です
内容確認ぺージで表示させたい「内容確認」の表示を追加しました。
それと
45行目の入力画面に戻る
これは選ぶ項目から・ボタン項目（button）の中の戻るボタンで作成と
選ぶ項目から・ボタン項目（button）の中の送信で作成しています。
ともにCSSでクラスgobtnを付与し赤いボタンになるようにしています。
こちらも内容確認ぺージで表示させてたいものですね。
入力画面ページに出力したい文章と内容確認に入れたい文章両方入れました。
これで完了です。
でも、入力画面ページと内容確認ぺージの両方の文章が入っているから
入力画面の時に内容確認という文章がでてきて
内容確認のときに入力画面っていう文章がでてきます。
これではおかしいのCSSで制御します。
上記に入力したHTMLは
プラグインが自動でdivタグで囲います。
そのdivタグに自動で入力画面・内容確認・送信完了で別々のクラスが付与されます。
入力画面・内容確認・送信完了で別々のクラスが付与されるので個別に色々できます。
付与されるクラスはこちら
入力画面で自動で付与されるクラス
.mw_wp_form_input
内容確認画面で自動で付与されるクラス
.mw_wp_form_confirm
送信完了画面で自動で付与されるクラス
.mw_wp_form_complete
このクラスを使って
入力画面の時には４行目から６行目を非表示
内容確認の時は１行目から３行目まで非表示
の様にCSSで制御します。
簡単なCSS見本はこちら
.mw_wp_form_input{
.kakunin,.comfin{
display: none;
}
}
.mw_wp_form_confirm{
.nyuryoku,.comfin{
display: none;
}
}
.mw_wp_form_complete{
.kakunin,.nyuryoku{
display: none;
}
}こんな感じで必要に応じでdisplay:noneで表示：非表示を制御しています。
入力画面・内容確認・送信完了で別々のクラスを使用して進行状況を設置する方法はこちらに書いておりますので、興味のある方はご覧ください。
これで入力画面と内容確認ページは完成です。
あとは送信完了画面ですね。
少し下に完了画面メッセージがあるので
そちらに完了画面で表示させたいものを入力して完成です。
今回は下記を入力
<p class="topi comfin">
送信完了
</p>
<div class="mailfin">
このたびはおとなりさんちのデザイナー マリオくんにお問い合わせいただき、誠にありがとうございます。
お問い合わせの内容は、ご入力いただいたメールアドレスに確認メールを自動送信しておりますので
今一度ご確認いただきますようよろしくお願いします。
なお、自動返信メールが届いていない場合は、ご入力いただいたメールアドレスが間違っている可能性がありますので
再度お問い合わせください。<p> </p><p> </p>
それでは、担当者よりご連絡させていただきますので今しばらくお待ちいただきますようよろしくお願いいたします。
</div>
９行目表示されていませんが改行がうまくいかなかったので
無理やり改行しています。
上では表示されていませんので下記画像で
以上です
③コピーしたHTMLタグをプラグイン側で用意されたタグに置き換える
が完了です。
④必須項目をプラグイン側で設定
こちらはチョー簡単です必須項目を選ぶだけ
ページの一番下にある
バリデーションルールのとこで
バリデーションルールを追加
▼をおして展開させて
バリデーションを適用する項目に 対象のnameをいれて
必須項目にチェックをいれるだけ
試しに
必須にしたところを未入力で内容確認を押すと
こんな感じで未入力です
と表示されます。
こちらの文章はfunctions.phpとかでカスタマイズできます。
バリデーションの文章の文字を変更する方法は下記で書いておりますのでご覧ください。
⑤プラグインの自動返信とか管理者への通知メール設定をする。
これはページの右側にある
自動返信メール設定と
管理者当てメール設定に
ガチャガチャ入れていく感じです。
自動返信（入力してくれた方に自動で返信する文）欄はこんな感じで入れています。
件名は
ありがとう的な文章
送信者
はサイト名
reply-t
は使ったことないけどたぶん確認用メールだと
本文は後で書きます
自動返信メールは
入力してくれた方のアドレスで
メールアドレスのinputのnameを入力すればOK
今回はmail01
で送信元はアドレス
本文は下記を入力しています
このメールは自動送信です。
このたびはおとなりさんちのデザイナーマリオ君にお問い合わせいただき、誠にありがとうございます。
今一度ご入力内容をご確認いただきますようよろしくお願いいたします。
お名前{namae}
フリガナ:{namae2}
郵便番号:{pos}
住所:{add}
電話番号:{tel}
メールアドレス:{mail01}
お問い合わせ内容:{naiyou}
それでは担当者よりご連絡させていただきますので今しばらくお待ちいただきますようよろしくお願いいたします。
おとなりさんちのデザイナーマリオ君
運営会社：マリオデザイン株式会社気を付けるところは１点だけです。
inputの情報をだしたいところは
{}
で囲わないといけません。これだけ注意すればOKです。
inputの情報をだしたいところは {} で囲う。
管理者用の自分に届くやつも入力
送信先（届いてほしいアドレス
CCとBCCも設定できます。
本文に下記を入れています
マリオ君からのお問い合わせです。
下記アドレスにご返信お願いします
{mail01}
お名前{namae}
フリガナ:{namae2}
郵便番号:{pos}
住所:{add}
電話番号:{tel}
メールアドレス:{mail01}
お問い合わせ内容:{naiyou}こっちも
{}
で閉じる必要があります。
入力が終わったら右上にある更新ボタンを押して完了です。
これでプラグインのカスタマイズは完了です。
あとは固定ページとの紐づけでお問い合わせフォームの完了となります。
⑥固定ページとの紐づけで完了
お問い合わせフォーム用のカスタムテンプレートで固定ページを作ります。
contact.php（ファイル名は）任意
中身は共通パーツを読みこんで（ブログの続きで書いていますわからない人は昔の記事を見てください。）
こんな感じで作成
<?PHP
/*
Template Name:contact
*/
?>
<?PHP get_template_part("parts/header");//ここでheader.phpよみこんでるよ?>
<?PHP get_template_part("parts/head");//ここでhead.phpよみこんでるよ?>
<article>
<h2 class="fuki">お問い合わせ</h2>
<section class="blogbox04 com">
<h3>お問い合わせフォーム</h3>
ここにさっき設定したフォームを表示させたい
</section>
<!--blogbox02-->
</article>
<?PHP get_template_part("parts/foot");//ここでfoot.phpよみこんでるよ?>ファイルを作成しました。
こちらのファイルに紐づけするコードを付けます。
MP WP Formの右側（更新ボタンの少し下）にあるフォーム識別子のコードを入れていきます。
こちらのコード（各設定によって数字は変わります。）をお問い合わせフォーム用に作った固定ページ
contact.phpに記述します。
カスタムテンプレートにショートコードを入れるときは
をいれます。（コードで入れたかったのですが、コードで入れたらエラーになるので画像で表示しています。ショートコード直書きしたらエラーがでたので）
こんな感じでいれます。
これで紐づけは完了
後は
contact.phpファイルをアップロードして
ワードプレス管理画面から固定ページとして追加したら完成です
テンプレートでcontactを選ぶのを忘れずに
以上で完成です。
ワードプレスのプラグインでお問い合わせフォームの作り方をご説明させていただきました。
ここがチェケラ
24時間対応できるお問い合わせフォームはとっても便利
次回で今までのファイルをダウンロードできるようにします。
それではまた！
