カンタンWordpress #09「お問合せフォームの作り方」

2023/01/20

Tips Wordpress 特集

t f B! P L
eyecatch #07ページの作り込みの回では、お問合せページは、GoogleFormを使って行うカンタン方法で実装しましたが、せっかくWordpressを使うのであれば、サーバーからメール送信をする機能を実装してみたいと思います。 これは、「お問合せはメールで受け取れれば良い」という方で「別サービスはなるべく使いたくない(連動したくない)」という場合は、PHPのメール送信機能を使って簡易に行う方法を解説します。

PHPがメール送信できるかどうかの確認

今回紹介する方法は、サーバーのメール設定ができている事を前提とします。 もし、VPSでのサーバーであれば、自分でメールモジュールのインストールをやってから、sendmailやpostfixのサーバー内のメール設定を行う必要がありますが、今回はサーバー設定については解説しないので、事前にメール機能が使えるレンタルサーバーを利用している事を前提にします。

phpinfo()で確認

サーバーのどこかの箇所(ブラウザからアクセスできる場所)に、下記のファイルを設置します。 <?php phpinfo(); ブラウザでアクセスして、表示を確認します。 ex : https://example.com/info.php こんな感じで"sendmail"の設定がされていれば、メール送信ができる準備はできていると思います。 (設定がちゃんとされていない場合、送信が出来ない場合もあります) ちなみに、xFreeサーバーは、phpinfo関数の実行が禁止されているので、この方法はエラーになってしまいます。 ※でも下記のメール送信テストで正常にメール送信できることが確認できました。 あと、Localwpでのローカル環境ですが、メール送信をするにはプラグインが必要なのだそうです。 こちらのフォーラムで開発者とのやり取りがされていました。 https://community.localwp.com/t/php-mail-from-local/6174 本番で確認して実装するという事ができる場合は、その様に対応してください。

メール送信テスト

実際に、phpプログラムでメール送信ができるかどうかを簡単にテストしてみます。 <?php //言語、文字コードの設定 mb_language('Japanese'); mb_internal_encoding('UTF-8'); // 送り先 $mailto = 'you@example.com'; // 送信者 $option = 'From:me@example.com'; // メールタイトルと本文 $title = "テストメール"; $message = "このメールは、送信テストです。\r\n破棄してください。"; //メールの送信 if(mb_send_mail($mailto,$title,$message,$option)){ echo '送信成功'; } else{ echo '送信失敗'; } 送り先(to)と送信者(from)のメールアドレスを、ご自身のものに書き直して、ブラウザでアクセスしてください。 「送信成功」が表示されていて、送り先メールアドレスにメールが正常に届いていたら、メールが使える状態であると確認できました。 送信失敗が表示されたり、メールが正常に届かないという場合は、残念ながらサーバーでのメール送信は断念して、GoogleFormパターンで構築することをオススメします。

Wordpressでのお問合せメール実装方法

上記でサーバーからメール送信ができる事が確認できた人は以下の方法で、お問合せフォームを実装することができます。 更新・追加するファイルは次の通りです。 <?php; if(isset($_POST['submit']) && isset($_POST['mode']) && $_POST['mode'] === 'contact'){ new Contact(); exit(); } class Contact{ public static $names = array( 'genre' => 'お問合せの種類', 'fullname' => 'お名前', 'mailaddress' => 'メールアドレス', 'comment' => 'お問合せ内容' ); public static $subject = 'ホームページから、お問合せが送信されました。'; public static $charset = 'iso-2202-jp'; public static $datas = []; public static $redirect = 'thanks'; function __construct(){ self::set_data(); if(!self::$datas['to']){die('管理メールアドレスがセットされていません。');} $res = self::send_mail(); if(!$res){die('メール送信エラー');} self::finish(); } public static function set_data(){ self::$datas['subject'] = self::$subject; self::$datas['to'] = get_option('admin_email'); self::$datas['header'] = self::get_header(); self::$datas['message'] = self::get_message(); } public static function get_header(){ return 'From: '. $_POST['mailaddress']; } public static function get_message(){ $message = '送信日時 : ' . date('Y-m-d H:i:s')."\r\n"; $message .= '--'."\r\n"; foreach(self::$names as $key => $name){ if(!isset($_POST[$key])){continue;} $message .= $name .' : '. $_POST[$key]."\r\n"; } $message .= '--'."\r\n"; $message .= 'UserAgent : ' . $_SERVER['HTTP_USER_AGENT']."\r\n"; $message .= 'IP-Address : ' . $_SERVER['REMOTE_ADDR']."\r\n"; $message .= '--'."\r\n"; $message .= "\r\n"; return $message; } public static function finish(){ $redirect = isset($_POST['redirect']) ? $_POST['redirect'] : self::$redirect; header('Location: ./'. $redirect .'/'); exit(); } public static function send_mail(){ return mb_send_mail( self::$datas['to'], self::$datas['subject'], self::$datas['message'], self::$datas['header'] ); } } 入力フォームの項目を帰る場合は、入力フォームのname値に合わせて、$namesの箇所を変更してください。 送信元のメールアドレスは、Wordpress管理画面で設定されているメールアドレスを取得するようにしています。 require_once 'php/contact.php'; ファイルの先頭部分(<?phpのすぐ下あたり)に上記1行を追加してください。 次に、contactフォームを次のソースに変更してください。 <h1>お問い合わせ</h1> <form method="post"> <input type='hidden' name='mode' value='contact'/> <div class="group" data-require="1"> <div class="require"></div> <span class="caption">何に関するお問い合わせですか?</span> <div class="form"> <div class="inputs"> <select name="genre"> <option value="このサイトの内容について">このサイトの内容について</option> <option value="誤字脱字の報告">誤字脱字の報告</option> <option value="料金に関するお問い合わせ">料金に関するお問い合わせ</option> <option value="その他">その他</option> </select> </div> </div> </div> <div class="group" data-require="1"> <div class="require"></div> <span class="caption">名前</span> <div class="form"> <div class="inputs"> <input type="text" name="fullname" placeholder="名前" required> </div> </div> </div> <div class="group" data-require="1"> <div class="require"></div> <span class="caption">メールアドレス</span> <div class="form"> <input type="mail" name="mailaddress" placeholder="mail@example.com" required> </div> </div> <div class="group" data-require="1"> <div class="require"></div> <span class="caption">お問い合わせ内容</span> <div class="form"> <textarea name="comment" placeholder="お問合せ内容を記入ください。" required></textarea> </div> </div> <div class="submit-area"> <button class="submit-button" name="submit" type="submit">送信する</button> </div> </form> 上記で無事にxFreeサーバーから、メール送信が出来ることを確認できました。

あとがき

Wordpressの運用時に、運営会社に管理画面を引き渡した後で、メールアドレスの変更などが、管理画面でできるようになるので、構築者がいちいち変更をするためにプログラムを変更する手間が無くなり、便利です。 GoogleFormでの管理も手離れが良いようにも思えますが、Wordpressの管理画面だけで、運用がまかなえるメール送信機能も悪くないかもしれませんね。

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ