問い合わせページからメール送信 ～Laravel7入門～

Laravel7のプロジェクトに、問い合わせフォームを作って、問い合わせ内容をメールで送信する手順を説明します。

この記事に従って作業を進めると、下図のようなお問い合わせページを作成できます。

前提となる環境
お問い合わせページとメール送信機能の追加手順
- 追加する機能の概要
- 作業手順の説明
動作確認
補足
- 補足1: バリデーションエラーの表示
- 補足2：グローバルメニューに「お問い合わせ」を追加
まとめ

前提となる環境

今回ベースとなる環境として、Laravelのバージョン7を使います。

ベースとしては、下リンクのLaravel入門に従って作業をしているプロジェクトを使っています。

が、しかし、まだ説明していない項目が多いため、必要な部分は説明いたします。

「IT業務で使えるプログラミングテクニック」とは？

このブログは、プログラマーの私がIT業務やプログラミングをしていて気づいたことを紹介しています。パソコン関係の仕事、その中でも特にIT関連業務やプログラミングが必要になった人にとって役に立つ情報を配信しています。また...

お問い合わせページとメール送信機能の追加手順

では、説明いたします。

追加する機能の概要

まず、ざっと、追加する機能を説明いたします。

お問い合わせページを追加
- ページURLは、/contact
- お名前、メールアドレス、質問内容を入力
- ログイン機能を追加したときのlayoutファイルを使用
お問い合わせ内容をメールで送信
- ポストメソッドの宛先URLは、/contact_send とする。
- PagesController コントローラ内で処理する
- データベースへの保存はしない
- メールを、管理者と問い合わせした人に送信する

作業手順の説明

手順1. ルート設定

まず、ルート設定ファイルに以下の2行を追加します。

Route::get('/contact', 'PagesController@contact')->name('contact');
Route::post('/contact_send', 'PagesController@contact_send')->name('contact_send');

1 2	Route::get('/contact', 'PagesController@contact')->name('contact'); Route::post('/contact_send', 'PagesController@contact_send')->name('contact_send');

対象ファイルは、 routes\web.php です。

追加後、下図のようになります。

コードの意味ですが、/contact にGETメソッドでアクセスすると PagesControllerコントローラクラスのcontact()メソッドを呼び出します。そしてルート設定に「contact」という名前を付けています。

同様に、/contact_send にPOSTメソッドでアクセスすると、同じPagesControllerクラスのcontact_send()メソッドを呼び出します。このルート設定には「contact_send」という名前を付けています。

手順2. コントローラにcontactメソッド追加

では、次に、PagesControllerコントローラにcontactメソッドを実装します。

これは問い合わせフォームを作るだけなので一瞬ですね。

でも、PagesControllerコントローラをまだ作ってなかったら、まず作って下さい。

laravelプロジェクトのフォルダで、

php artisan make:controller PagesController

1	php artisan make:controller PagesController

を実行すると、PagesControllerが作られます。

コントローラーファイルに、contactメソッドを下リストのように追加します。

    //Contactフォームのページ
    public function contact() {
        return view('pages.contact');
    }

//Contactフォームのページ

public function contact() {

return view('pages.contact');

}

pages/contact.blade.php ビューを呼び出す処理となります。

手順3. お問い合わせページのビューを作成

では、お問い合わせページを作りましょう。

routes/viewフォルダの中にpagesフォルダを作り、その中にcontact.blade.phpファイルを作成します。

下記のように、@section(‘content’) から @endsection で囲まれたコードを使ってビューファイルを作成してください。

@extends('layouts.app')

@section('content')
<div class="container">
    <h1>お問い合わせ</h1>
    <form action="{{route('contact_send')}}" method="post">
        @csrf
        <div class="form-group">
            <label for="uname">お名前</label>
            <input type="text" name="uname" id="uname" class="form-control" value="{{old('uname')}}" placeholder="お名前を入力してください">
        </div>
        <div class="form-group">
            <label for="email">メールアドレス</label>
            <input type="text" name="email" id="email" class="form-control" value="{{old('email')}}" placeholder="メールアドレスを入力してください">
        </div>
        <div class="form-group">
            <label for="body">内容</label>
            <textarea name="body" id="body" class="form-control" rows="5" placeholder="内容を入力してください">{{old('body')}}</textarea>
        </div>
        <input type="submit" value="問い合わせ" class="btn btn-primary">
        <input type="reset" value="キャンセル" class="btn btn-secondary" onclick='window.history.back(-1);'>
    </form>
</div>
@endsection

@extends('layouts.app')

@section('content')

<h1>お問い合わせ</h1>

@csrf

</div>

<label for="email">メールアドレス</label>

</div>

</div>

</form>

</div>

@endsection

最初にlayouts/app.blade.php テンプレートを呼び出しています。

このテンプレートファイルは、ログイン機能を実装していれば自動で作成されています。

上記のコードではフォームにpostメソッドを使っています。

フォーム内の action=”{{route(‘contact_send’)}}”は、「ルート設定ファイルweb.phpでcontact_sendと名前をつけた宛先に移動する」という意味です。

このように、Laravel内ではURLはroute()関数を使って指定できます。

手順3. メール送信クラスの作成

laravelではメール送信するためにMailable(メイラブル)クラスを作成します。

Mailableとメール送信の方法について詳しくは公式マニュアルに載っています。

7.x メール Laravel

まず今の段階では、メールを送るために必要ということだけ覚えておけばよいです。

Mailableクラスは、artisan makeコマンドで作成できます。

php artisan make:mail ContactSending

1	php artisan make:mail ContactSending

と入力してContactSendingクラスを作ります。

・・・名前はContactFormのほうがよかったかもしれません。

ただ、この記事ではContactSending という名前で進めさせてもらいますね ^^;

コマンド実行後、 app\Mail\ContactSending.php というファイルが作成されます。

このファイルとMailファサードのtoメソッド使って、メールを送信します。次にこの手順を紹介します。

Mailファサードについても上で紹介した公式マニュアルに載っていますので、実行したい処理がある場合、参照してみてください。

手順4. メール送信処理の作成

では、手順3で作成したメイラブルクラスを使用して、メール送信処理を作成していきます。

まず、設定ファイルにメールサーバーの情報を入力しましょう。

ここでは、xserver のメールアカウントとSMTPサーバーを使ってメール送信する方法を紹介します。

環境設定ファイル .env

環境設定ファイル .env に以下の設定をしましょう。

MAIL_MAILER=smtp
MAIL_HOST=sv(サーバー名).xserver.jp
MAIL_PORT=465
MAIL_USERNAME=xserverに設定したメールアカウント
MAIL_PASSWORD=上記アカウントのパスワード
MAIL_ENCRYPTION=ssl
MAIL_FROM_ADDRESS=from欄のメールアドレス。MAIL_USERNAMEと同じドメイン
MAIL_FROM_NAME=from欄の差出人の名前

MAIL_ADMIN=お問い合わせメールを送る宛先。

MAIL_MAILER=smtp

MAIL_HOST=sv(サーバー名).xserver.jp

MAIL_PORT=465

MAIL_USERNAME=xserverに設定したメールアカウント

MAIL_PASSWORD=上記アカウントのパスワード

MAIL_ENCRYPTION=ssl

MAIL_FROM_ADDRESS=from欄のメールアドレス。MAIL_USERNAMEと同じドメイン

MAIL_FROM_NAME=from欄の差出人の名前

MAIL_ADMIN=お問い合わせメールを送る宛先。

MAIL_MAILER から MAIL_FROM_NAME までは、もともと項目が .envに用意されています。

MAIL_ADMIN は、お問い合わせメールの宛先として、追加します。

これらの設定はパソコンのメールソフトでSMTPサーバー設定をするときと同じような内容になります。

テストアプリでは下図のような感じで設定してます。${APP_NAME} は、.envファイルの先頭で設定しているアプリの名前です。

Laravel7でローカル環境を使用している場合は、.envファイルの情報を設定した後、下記を実行してサーバーを再度起動してください。

php artisan serve

1	php artisan serve

XserverでのMAIL_HOST確認方法

もし MAIL_HOSTの情報がどこにあるか分からない場合。
Xserverをご利用なら、下記を参考にしてください。

僕もXserverです。

①Xserverのサーバーパネルにログインする

②【メールアカウント設定】をクリック

③使用するドメインの【選択する】をクリック

④【メールソフト設定】タブをクリック

⑤Mail_HOST情報が表示される

PagesControllerのcontact_send メソッド

次にコントローラーファイルPagesController.phpを編集していきます。

MailファサードとContactSendingメイラブルクラスを使用するので、use 文を記述します。

use Illuminate\Support\Facades\Mail;

use App\Mail\ContactSending;

use Illuminate\Support\Facades\Mail;

use App\Mail\ContactSending;

記述後は下図のような感じになります。

contact_sendメソッドには、下リストのコードを実装してください。

    //Contactフォーム メール送信
    public function contact_send(Request $request) {
        //バリデーション
        $request->validate([
            'uname' => 'required',
            'email' => 'required|email',
            'body' => 'required'
        ]);

        //メール送信
        $data = [
            'uname' => $request->input('uname'),
            'email' => $request->input('email'),
            'body' => $request->input('body')
        ];
    
        Mail::to(env('MAIL_ADMIN'))->send(new ContactSending($data));
        Mail::to($data['email'])->send(new ContactSending($data));
    
        //リダイレクト
        return redirect('/')->with('success','お問い合わせを受け付けました。');
    }

//Contactフォームメール送信

public function contact_send(Request $request) {

//バリデーション

$request->validate([

'uname' => 'required',

'email' => 'required|email',

'body' => 'required'

]);

//メール送信

$data = [

'uname' => $request->input('uname'),

'email' => $request->input('email'),

'body' => $request->input('body')

];

Mail::to(env('MAIL_ADMIN'))->send(new ContactSending($data));

Mail::to($data['email'])->send(new ContactSending($data));

//リダイレクト

return redirect('/')->with('success','お問い合わせを受け付けました。');

}

コメントでも書いていますが、入力データのバリデーションを行った後、MailファサードとContactSendingクラスを使用して、メールを2通送っています。

一回に複数の宛先にも送付できますが、この例では、2通に分けて送っています。

※この辺りもマニュアルに記述あります。

Mail:: の部分がMailファサードになります。toメソッドで宛先を指定して、さらに -> 演算子でsendメソッドを呼び出しています。

sendメソッドでは、ContactSending クラスで作成するメール内容を実際に送信しています。

最後に、トップページにリダイレクトして、成功メッセージを表示させています。

次にContactSending クラスを作っていきましょう。

ContactSendingメイラブルクラスの作成

app/Mailフォルダの中のContactSendingは以下のように実装してください。

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;

class ContactSending extends Mailable
{
    use Queueable, SerializesModels;

    private $data;
    /**
     * Create a new message instance.
     *
     * @return void
     */
    public function __construct($data)
    {
        $this->data = $data;
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->view('mail.contact')->with(['data' => $this->data])
                    ->subject('お問い合わせを受け付けました');
    }
}

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;

use Illuminate\Contracts\Queue\ShouldQueue;

use Illuminate\Mail\Mailable;

use Illuminate\Queue\SerializesModels;

class ContactSending extends Mailable

{

use Queueable, SerializesModels;

private $data;

/**

* Create a new message instance.

* @return void

public function __construct($data)

{

$this->data = $data;

}

/**

* Build the message.

* @return $this

public function build()

{

return $this->view('mail.contact')->with(['data' => $this->data])

->subject('お問い合わせを受け付けました');

}

骨組みはすでに作られていると思いますので、変更点について説明します。

    private $data;

    //途中省略

    public function __construct($data)
    {
        $this->data = $data;
    }

private $data;

//途中省略

public function __construct($data)

{

$this->data = $data;

}

この部分は、メール文面に表示したいデータを$dataとして受け取っています。

$this->data がこのクラス内のデータで、constructメソッドの引数が受け渡される仮引数になります。

    public function build()
    {
        return $this->view('mail.contact')->with(['data' => $this->data])
                    ->subject('お問い合わせを受け付けました');
    }

public function build()

{

return $this->view('mail.contact')->with(['data' => $this->data])

->subject('お問い合わせを受け付けました');

}

メール内容を作成してreturn でデータを返答しています。まず、メールのテンプレートとして viewを使っています。

resources\views\mail\contact.blade.phpをビューとして指定していますので、後でこのファイルも作りましょう。

->演算子(アロー演算子)でつなげて、withメソッドで、ビューにデータを渡しています。キーが’data’なのでviewの中で$data という名前で参照できます。

さらに、アロー演算子で subjectメソッドにつなげています。メールの表題を設定しています。

メール文面のビューの作成

メール文面は、 resources\views\mail\contact.blade.phpを指定しています。

このファイルを作っていきます。

viewsフォルダ内にmailフォルダを作り、この中にcontact.blade.phpファイルを作成します。

ファイルは、以下のように作りました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
</head>
<body>
    <p>以下の内容でお問い合わせを受け付けました。</p>
    <p>お名前：{{$data['uname']}}</p>
    <p>メールアドレス：{{$data['email']}}</p>
    <p>お問い合わせ内容：</p>
    <p>{!!nl2br(htmlspecialchars($data['body']))!!}</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>title</title>

</head>

<body>

<p>以下の内容でお問い合わせを受け付けました。</p>

<p>お名前：{{$data['uname']}}</p>

<p>メールアドレス：{{$data['email']}}</p>

<p>お問い合わせ内容：</p>

<p>{!!nl2br(htmlspecialchars($data['body']))!!}</p>

</body>

</html>

上記はhtmlを使用していますが、textメールでも作成できます。上で掲載の公式マニュアルで「平文テキストメール」の項をご参照ください。

$data で渡されたデータを表示しています。body 部分だけ、改行を表示させるために、nl2br や htmlspecialchars 関数を使っています。

動作確認

メール送信にSMTPサーバーを使っているので、ローカル環境でも本番環境でも動作します。

ここではデプロイ後の本番環境での動作結果を紹介しますね。

まず、/contact にアクセスします。

お名前、メールアドレス、内容を入力し「問い合わせ」ボタンをクリックします。

するとメール送信後、以下のトップ画面にリダイレクトされます。トップ画面を作っていなければ、「Laravel」と大きく表示されるデフォルトのトップ画面が表示されると思います。

実際に下図のようなメールが届きました。

補足

補足1: バリデーションエラーの表示

バリデーションエラーの時のエラー表示ですが、カスタマイズしています。

layouts ファイルをいじってますので、興味がありましたら、こちらをご覧ください。(「ビューにメッセージ表示処理を追加」の項目)

リソースコントローラで新規作成：create, storeアクションをログイン認証つきで実装する～Laravel7入門～

PHPのフレームワークLaravel で blog アプリを作成しながら、laravelの使い方を説明しています。 Laravelはバージョン7を使います。仕様と手順は、以下の記事の通りです。今回は、3...

補足2：グローバルメニューに「お問い合わせ」を追加

メニューに「お問い合わせ」を追加するときは、 resources\views\layouts\app.blade.php を編集します。「Right Side Of Navbar」のul タグを探し出して、中に、liタグを追加しましょう。

                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('contact') }}">お問い合わせ</a>
                        </li>

<a class="nav-link" href="{{ route('contact') }}">お問い合わせ</a>

</li>

追加後は下図の赤枠のようになります。

まとめ

Laravel7 でお問い合わせページを作り、メールを送信する手順を紹介しました。

この記事で紹介しているのは基本部分です。

もしご紹介している以外のことを実装したい場合には、記事の中で紹介しているマニュアルも見てみてください。

複数の宛先に送ったり、テキストメールを送ったり、あと、ファイルを添付したりと、いろいろできますよ。

＝＝＝目次＝＝＝

laravelはPHPで動くフレームワーク～laravel入門01～
laravelでログイン機能付きサイトを作ってみよう、作成予定のWebアプリケーションの概要と作業手順の概略～laravel入門～
開発環境のインストール
1. XAMPP
2. VS code
3. Git for Windows
4. SourceTree
laravelインストール
1. composerインストール
2. laravel本体インストール
3. laravelのUIインストール
4. node.jsインストール
アプリ作成
1. データベース設定
2. ログイン機能追加
  1. npmインストール
  2. css, jsコンパイル
3. Topページ作成
4. Aboutページ作成
5. 問い合わせページ作成
  1. 問い合わせページからメール送信～Laravel7入門～
6. Blog機能作成

free より:

2021年12月12日 22:09

こんにちは。こちらを参考に実装させていただいています。
contact_sendのビューファイルを作る必要はありますか？

返信
- わかばやしより:
  
  2021年12月14日 03:47
  
  freeさん、質問ありがとうございます。
  ビューファイルは必要ないですよ。
  contact_sendの処理(contact_sendメソッド)は、最後、return redirect(‘/’)->…. で終わってますね。
  これは、URLのパス’/’ にリダイレクト、つまり、’/’にアクセスし直す処理になります。
  なので、ブラウザのURL蘭も、問い合わせページが /contact だったのに対して、「問い合わせ」ボタンを押したあと、バリデーションエラーにならずメール送信したあとは、’/’ になります。
  
  contact_sendメソッドの最後を、return view(‘xxxx’); とする場合は、ビューファイルが必要となります。その場合は、URL蘭が /contact_send のまま、return view(xxx) で指定したビューファイルが表示されます。
  
  返信