そうお困りではありませんか?
本記事では、PHPでお問合せフォームを実装する手順を解説します。
PHP初学者でも簡単に実装できる構文を紹介するのでぜひ参考にしてみてください。
PHPで問合せフォームを作る/自動メール送信の設定方法
ネットで「PHPで出来ることは?」などで検索すればたくさん情報が出てきますが、
PHPではECサイトやお問合せフォームを構築することが出来ます。
HTML/CSSの基礎学習が完了してPHPをこれから学ぼうとしている方、
とりあえず問合せフォームの実装だけしたい方向けに出来るだけ分かりやすく解説しているので実際操作しながら読み進めてみてください。
最後にすべての構文を載せているので自分の書いたコード見比べに利用いただけます。
PHPを書くための基礎ルール
HTMLを書くときは拡張子は「.html」です。<!DOCTYPE html>で始まり、タグを閉じる時は/が入るなどルールがありますよね。
CSSにはCSSの書き方があり、ルールがあります。
PHPにもちろん書き方やルールがあります。
とはいえ全てを解説するわけにはいかないので、今回はタイトルの通り「問合せフォーム」を作る為に必要最低限のルールだけ紹介させてもらいます。
ファイルの拡張子は「.php」
HTMLの拡張子は「.html」、CSSは「.css」ですよね。
PHPは「.php」です。
特に補足することはありません。
「<?php ~ ?>」で記述する
PHPは「<?php」と「?>」の間に構文を書きます。
こんな感じ
<?php
$apple='リンゴ';
print $apple ;
?>
ページには「リンゴ」と表示される。
変数という箱にデータを入れてる
この「$」ドルマークを付けて指定した文字を変数といいます。
先述した「$apple」も変数、変数は「=」の右側のデータを入れる箱みたいなもの。
まず、「$appleはリンゴ」と指定し、「print」は表示する指示なので、画面上にはリンゴと表示されます。
変数の名前は自由に決めることができます。
データは「form」で渡して「$_POST」で受け取る
後ほど詳しく解説しますが、HTMLとCSSだけではページを越えるデータの受け渡しができません。
そのために、HTMLページからPHPページまたはサーバーに対してデータを渡す指示が必要です。
その指示の出し方が「form」です。
データを受け取る際は「$_POST[’~’]」です。HTMLのinputでnameを指定したものと、$_POSTの「~」を同じにすることでデータを渡すことができます。
問合せフォームのHTMLを編集する
テキスト入力欄に情報を埋めて送信すればメールが届く仕様にします。
HTMLとCSSで問合せフォームを作成するなら「input」でテキストや電話、メールを指定して作ることが多いはず。
簡素ですが例文を用意しました。
See the Pen
問合せフォーム/HTMLCSSのみ by 太郎 (@taroro55)
on CodePen.
「問合せを送信する」をクリックしたときに、入力されたデータを渡して処理する必要があります。
先述したデータを渡す方法が「form」なので以下のように修正します。ページ上での見た目の変化はありません。
See the Pen
問合せフォーム/PHP by 太郎 (@taroro55)
on CodePen.
<form method="post" action="~"></form>
「form」で渡したいデータを囲います。「method」データの渡し方で、「action」がデータを渡す先です。
つまり「formの中のデータをpost_check.phpへ渡します。渡し方はpostの方式です。」と解釈できます。
PHPで送信する内容に問題がないかチェックする
問合せフォームで「正しく入力されていません、半角で確認してください」みたいな、入力した内容をダメ出しされることってありますよね。
これはイタズラ防止や正しい情報を取得するためなのですが、同様にフォームを入力してくれた情報に問題がないかチェックすべきです。
詳しく見ていきましょう。
HTMLから渡されたデータを受け取る
「post」で渡されたデータは「$_POST[’~’]」で受け取るんでしたね。
このようになります。
<?php
$contact_name=$_POST['name'];
$contact_tel=$_POST['tel'];
$contact_mail=$_POST['email'];
$contact_text=$_POST['text'];
?>
=の右側が受け取ったデータ、そしてさらに左側の変数へデータを入れ直しています。
「$_POST[’~’]」では使い勝手が悪いので、新しい変数名に変更しています。
詳しく理解する必要は無いのですが、安全対策のため受け取ったデータをキレイにする処理を施します。
$contact_name=htmlspecialchars($pro_name,ENT_QUOTES,'UTF-8');
$contact_tel=htmlspecialchars($pro_name,ENT_QUOTES,'UTF-8');
$contact_mail=htmlspecialchars($pro_name,ENT_QUOTES,'UTF-8');
$contact_text=htmlspecialchars($pro_name,ENT_QUOTES,'UTF-8');
受け取ったデータをチェックする
データのチェックには「if」という関数を利用します。
if(条件式)
{
条件式が正しければ実行する指示
}
else
{
条件式が正しくなければ実行する指示
}
名前の入力チェックを書いてみます。
if($contact_name==' ') ←$contact_namが空っぽ、つまり未入力なら
{
print'<p>名前が未入力です。</p>'; ←と表示する
}
else ←未入力でなければ以下を表示する
{
print'<p>貴社名:';
print $contact_company;
print'</p>';
}
という感じです。
電話番号、メールアドレス、問合せ内容をチェックする構文は以下ようになります。
※丸コピで問題ありません。まずはコピーしたもので進めてみましょう。
if(preg_match('/\A\d{2,5}-?\d{2,5}-\d{4,5}\z/',$contact_tel)==0)
{
print'<p>電話番号を正確に入力してください。</p>';
}
else
{
print'<p>電話番号:';
print $contact_tel;
print'</p>';
}
if(preg_match('/\A[\w\\.]+\@[\w\\.]+\.([a-z]+)\z/',$contact_mail)==0)
{
print'<p>メールアドレスを正確に入力してください。</p>';
}
else
{
print'<p>メールアドレス:';
print $contact_mail;
print'</p>';
}
if($contact_text=='')
{
print'<p>お問合せ内容が入力されていません。</p>';
}
else
{
print'<p>お問合せ内容:';
print $contact_text;
print'</p>';
}
4項目をチェックした結果を設定する
先に論理演算子の「||」の記号について解説。
「||」は「又は」の意味で使います。たとえばA || B は、「AまたはBのどちらかが成立すればOK」(OR演算という)
名前が空白、又は電話番号が正しくない、又は、メールアドレスが正しくない場合は画面を戻す。
どれも合致しなければ、再度「post」でデータを渡す指示を出します。
if($contact_name=='' || preg_match('/\A\d{2,5}-?\d{2,5}-\d{4,5}\z/',$contact_tel)==0 || preg_match('/\A[\w\\.]+\@[\w\\.]+\.([a-z]+)\z/',$contact_mail)==0)
{
print '<form>';
print '<input type="button" onclick="history.back()" value="戻る">';
print '</form>';
}
else
{
print'<form method="post" action="post_done.php"> ';
print'<input type="hidden" name="name" value="'.$contact_name.'">';
print'<input type="hidden" name="tel" value="'.$contact_tel.'">';
print'<input type="hidden" name="mail" value="'.$contact_mail.'">';
print'<input type="hidden" name="text" value="'.$contact_text.'">';
print'<input type="button" onclick="history.back()" value="戻る">';
print'<input class="button" type="submit" value="OK">';
print'</form>';
}
チェックしたデータを受け取りメール送信する
既に解説した通り、データの受け取りは同じです。
$contact_name=$_POST['name'];
$contact_tel=$_POST['tel'];
$contact_mail=$_POST['email'];
$contact_text=$_POST['text'];
そして安全対策もします。
$contact_name=htmlspecialchars($pro_name,ENT_QUOTES,'UTF-8');
$contact_tel=htmlspecialchars($pro_name,ENT_QUOTES,'UTF-8');
$contact_mail=htmlspecialchars($pro_name,ENT_QUOTES,'UTF-8');
$contact_text=htmlspecialchars($pro_name,ENT_QUOTES,'UTF-8');
そして、サイト上には問合せの御礼文とメールが送信されたことをお知らせする文章を表示させます。
print $contact_name.'様<br>';
print 'お問合せありがとうございました。<br><br>';
print 'メールまたはお電話にてご連絡いたしますので、<br>';
print '今しばらくお待ちください。<br><br><br>';
print '<a href="index.html">TOPへ戻る</a>';
メール送信設定の準備
最後にメールの送信設定です。
まず、以下の変数を設定します。
説明 | 変数 |
メールタイトル | $title |
送信元メールアドレス | $header |
送信先アドレス | $to |
メール本文 | $honbun |
なお、メール本文の記載には3つルールがあります。
・改行は<br>ではなく「”\n”」
・文章、変数、改行は「.~.」で囲む
これらを踏まえて例文です。
$title='〇〇へお問合せがありました。';
$header='From:contact_form@seikouudoku-log.com/';
$to='example@gmail.com';
$honbun= .'名前:'.$contact_name."\n".'電話番号:'.$contact_tel."\n".'メール:'.$contact_mail."\n".'問合せ内容:'.$contact_text ;
そしてメール送信の構文がこちらです。
mb_language('japanese'); ←日本語に設定
mb_internal_encoding('utf-8'); ←文字コードの設定
mb_send_mail($to,$title,$honbun,$header); ←送信の指示
まとめの例文
問合せフォームのページ
<form method="post" action="post_check.php">
<div class="contact">
<p>名前</p>
<input type="text" name="name">
<p>電話番号</p>
<input type="tel" name="tel">
<p>メール</p>
<input type="email" name="email">
<p>お問合せ</p>
<textarea name="text"></textarea><br>
<input type="submit" value="お問合せを送信する" >
</div>
</form>
問合せフォームのCSS
body
{
background:#f3f4ed;
}
.contact
{
line-height:5px;
}
input
{
height:20x;
width:300px;
margin:0 0 20px;
}
textarea
{
height:60px;
width:300px;
margin:0 0 20px;
}
post_check.php(入力チェックのPHPファイル)
<?php
$contact_name=$_POST['name'];
$contact_tel=$_POST['tel'];
$contact_mail=$_POST['email'];
$contact_text=$_POST['text'];
$contact_name=htmlspecialchars($pro_name,ENT_QUOTES,'UTF-8');
$contact_tel=htmlspecialchars($pro_name,ENT_QUOTES,'UTF-8');
$contact_mail=htmlspecialchars($pro_name,ENT_QUOTES,'UTF-8');
$contact_text=htmlspecialchars($pro_name,ENT_QUOTES,'UTF-8');
if($contact_name==' ')
{
print'<p>名前が未入力です。</p>';
}
else
{
print'<p>名前:';
print $contact_name;
print'</p>';
}
if(preg_match('/\A\d{2,5}-?\d{2,5}-\d{4,5}\z/',$contact_tel)==0)
{
print'<p>電話番号を正確に入力してください。</p>';
}
else
{
print'<p>電話番号:';
print $contact_tel;
print'</p>';
}
if(preg_match('/\A[\w\\.]+\@[\w\\.]+\.([a-z]+)\z/',$contact_mail)==0)
{
print'<p>メールアドレスを正確に入力してください。</p>';
}
else
{
print'<p>メールアドレス:';
print $contact_mail;
print'</p>';
}
if($contact_text==' ')
{
print'<p>お問合せ内容が入力されていません。</p>';
}
else
{
print'<p>お問合せ内容:';
print $contact_text;
print'</p>';
}
if($contact_name==' ' || preg_match('/\A\d{2,5}-?\d{2,5}-\d{4,5}\z/',$contact_tel)==0 || preg_match('/\A[\w\\.]+\@[\w\\.]+\.([a-z]+)\z/',$contact_mail)==0)
{
print '<form>';
print '<input type="button" onclick="history.back()" value="戻る">';
print '</form>';
}
else
{
print'<form method="post" action="post_done.php"> ';
print'<input type="hidden" name="name" value="'.$contact_name.'">';
print'<input type="hidden" name="tel" value="'.$contact_tel.'">';
print'<input type="hidden" name="mail" value="'.$contact_mail.'">';
print'<input type="hidden" name="text" value="'.$contact_text.'">';
print'<input type="button" onclick="history.back()" value="戻る">';
print'<input class="button" type="submit" value="OK">';
print'</form>';
}
?>
post_done.php(メール送信のPHPファイル)
<?php
$contact_name=$_POST['name'];
$contact_tel=$_POST['tel'];
$contact_mail=$_POST['email'];
$contact_text=$_POST['text'];
$contact_name=htmlspecialchars($pro_name,ENT_QUOTES,'UTF-8');
$contact_tel=htmlspecialchars($pro_name,ENT_QUOTES,'UTF-8');
$contact_mail=htmlspecialchars($pro_name,ENT_QUOTES,'UTF-8');
$contact_text=htmlspecialchars($pro_name,ENT_QUOTES,'UTF-8');
$title='〇〇へお問合せがありました。';
$header='From:contact_form@seikouudoku-log.com';
$to='example@gmail.com';
$honbun= .'名前:'.$contact_name."\n".'電話番号:'.$contact_tel."\n".'メール:'.$contact_mail."\n".'問合せ内容:'.$contact_text ;
mb_language('japanese');
mb_internal_encoding('utf-8');
mb_send_mail($to,$title,$honbun,$header);
?>
最後に
いかがでしたでしょうか。
問合せフォームの作り方は無数にあり、今回紹介した例もその一部です。
初心者向けだからこそ「ここはもっとこうした方がいい」という意見もあるかもしれませんが参考になれば幸いです。
最後までお読みいただきありがとうございました。Taroでした。