とっても簡単！コピペで出来る！お問い合わせフォームの作り方
更新日：2018年4月15日
お問い合わせフォームを作ろうと一度は考えど、ちょろっと調べてみて挫折した経験のある方は少なくないのではないでしょうか？
確かに普段HTMLやCSSしか使わない方には取っつきにくいものであることは確かです。
当サイトではコピペで簡単に出来るお問い合わせフォームの作り方をご紹介します。
ソースと簡単な解説と併せて書いていきますが、解説なんぞ必要ない！物が欲しいんじゃ！という方は完成後の下記のファイルをダウンロードしてお使い下さい。
さて、これから3つのファイルを作成していきます。
contact.html（入力画面） → confirmation.php（確認画面） → submit.php（送信完了画面）
の順に作成していきます。
ちなみにjQueryとPHPを併用してお問い合わせフォームを作っていきますので、PHPが動く環境で作業して下さい。
まずは1つ目のファイル、contact.htmlを作成していきます。
contact.htmlの<body>タグ内の中身は下記です。
今回のお問い合わせフォームの項目は、
お名前、フリガナ、電話番号、お問い合わせ内容の4項目ですが、なんてことない普通の記述かと思います。
次にcontact.htmlの<head>タグ内の中身は下記です。
function check_contactform() {
var name = $('input[name="name"]').val();
var furigana = $('input[name="furigana"]').val();
var address = $('input[name="address"]').val();
var tel = $('input[name="tel"]').val();
var otoiawase = $('textarea[name="otoiawase"]').val();
var errmsg = "";
if(name == "") {
errmsg = "お名前を入力して下さい\n";
}
if(furigana == "") {
errmsg = errmsg + "フリガナを入力して下さい\n";
}
if(address == "") {
errmsg = errmsg + "メールアドレスを入力して下さい\n";
}
if(!address.match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)) {
errmsg = errmsg + "メールアドレスをご確認下さい\n";
}
if(tel == "") {
errmsg = errmsg + "電話番号を入力して下さい\n";
}
if(otoiawase == "") {
errmsg = errmsg + "お問い合わせ内容を入力して下さい\n";
}
if(errmsg != "") {
alert(errmsg);
return false;
}
$('form[name="myform"]').submit();
}
jQueryでcheck_contactformという名前の関数を作成して、その関数が呼び出された時の動きを記述しております。この時、必ずjQueryを読み込ませて下さいね。でないと上記の記述が動かない為、意味がなくなってしまいます。
check_contactformの関数が呼び出されるのは、contact.htmlの<body>タグ内の
<input value="確認画面へ" onclick="check_contactform()" type="button">
が押された時になります。
つまり「確認画面へ」というボタンがクリックされた時に上記のjQueryが発動するということですね。
jQueryにはつらつらを書かれていますが、要するに各フォームの値を取得して、値が空の場合は「何か入力して下さいね」というアラートを出して確認画面へいかせないようにしています。
全て空でないことを確認した時に
$('form[name="myform"]').submit();
で確認画面へ推移します。
今度は2つ目のファイル、confirmation.phpを作成していきます。
confirmation.phpの<body>タグ内の中身は下記です。
一見すると、contact.htmlの<body>タグ内の中身と似ていますが、readonly属性が組み込まれています。readonlyされると値を変更出来なくなるので、ユーザーに編集されることなく、確認だけをして貰えます。
上部にあるCSSの記述はreadonlyされた要素の背景色を変更する記述です。これをしないと編集出来ないことが分からないので、ユーザーのことを考えると書くべきCSSです。
次にconfirmation.phpの中身は下記です。
記述は何処に記述しても構いませんが、例えばソースの一番上なんかに記述するのが一般的でしょう。
<?php $name = $_POST['name']; $furigana = $_POST['furigana']; $address = $_POST['address']; $tel = $_POST['tel']; $otoiawase = $_POST['otoiawase']; ?>
PHPの記述になりますが、これはcontact.htmlのフォームから送られてきた値を受け取る記述になりますので必須です。
最後に3つ目のファイル、submit.phpを作成していきます。
contact.htmlの<body>タグ内の中身は下記です。
<?=$massage?>
たった1行のこれだけです。
これはお問い合わせが無事完了した時と、失敗した時とで表示させる文言を変更させる為のものです。
次にsubmit.phpの中身は下記です。
記述は何処に記述しても構いませんが、例えばソースの一番上なんかに記述するのが一般的でしょう。
<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'];
$furigana = $_POST['furigana'];
$address = $_POST['address'];
$tel = $_POST['tel'];
$otoiawase = $_POST['otoiawase'];
//メールの内容
$body .= "お問い合わせいただきましてありがとうございます。下記の情報を受け取りました。\nこちらから折り返しご連絡させていただきます。\n\n";
$body .= "お名前:".$name."\n";
$body .= "フリガナ:".$furigana."\n";
$body .= "メールアドレス:".$address."\n";
$body .= "電話番号:".$tel."\n";
$body .= "お問い合わせ内容:\n".$otoiawase."\n\n";
$body .= "▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼\n";
$body .= "【Web担当者の作り方】\n";
$body .= "メール:example@example.com\n";
$body .= "URL:https://www.web-officer.com/\n";
$body .= "▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼△▼\n";
//メールの送り先,メールの送り元,メールタイトル
$flg = bSENDMAIL3($address,"example@example.com","【Web担当者の作り方】です。お問い合わせいただきましてありがとうございます！",$body);
$flg = bSENDMAIL3("example@example.com","example@example.com","【Web担当者の作り方】です。お問い合わせいただきましてありがとうございます！",$body);
if($flg == true) {
$massage = "メールの送信が完了しました。
お問い合わせいただきましてありがとうございました！";
} else {
$massage = "メールの送信に失敗しました。
大変お手数ですが、もう一度やり直して下さい。";
}
}
function bSENDMAIL3($to,$from,$sub,$body) {
mb_language("uni");
mb_internal_encoding("utf-8");//utf-8 or SJIS
$Head="";
$Head.="From: ".$from."\n";
$Head.="Mime-Version: 1.0\n";
$Head.="Reply-To: ".$from."\n";
$Head.="X-Mailer: PHP/" . phpversion();
$flg = mb_send_mail($to, $sub, $body,$Head);
return $flg;
}
?>
こちらもつらつらと書いていますが、ソース内に補足のコメントを書いている通りです。
注意すべきは下記の記述です。
$flg = bSENDMAIL3($address,"example@example.com","【Web担当者の作り方】です。お問い合わせいただきましてありがとうございます！",$body);
$flg = bSENDMAIL3("example@example.com","example@example.com","【Web担当者の作り方】です。お問い合わせいただきましてありがとうございます！",$body);
一個目の$flg = はcontact.htmlのフォームに入力されたメールアドレス宛て（＝お問い合わせフォームに入力したお客様）にメールを飛ばす為の設定です。
メールの送り元はexample@example.comということにし、メールのタイトルは「【Web担当者の作り方】です。お問い合わせいただきましてありがとうございます！」になるよう設定しています。
要するにお客様の控え用としてお客様にメールを飛ばすということですね。
実際に使用する際には任意のメールアドレスに書き換えて下さいね。
二個目の$flg = は自分のメールアドレス宛て（＝HPの管理人）にメールを飛ばす為の設定です。
この記述があることによって、HPの管理人にメールを飛ばし、お問い合わせフォームの内容を受け取ることが出来ます。
こちらも同じく任意のメールアドレスに書き換えて下さいね。
はい、これにて3つのファイル全てが完成し、お問い合わせフォームが完成しました。
かなり難しい記述が多く含まれていますが、まずは当サイトのソースのカスタマイズして少しずつ慣れて頂ければな嬉しいなと思います。
