先日、お問合せフォーム作成のメモを公開しましたが、今回は先日のお問合せフォームをベースに送信内容の確認画面を追加したバージョンの内容です。
フォームコントローラ改修
確認ページ用のアクション追加
# /app/Http/Controllers/FormController.php
/**
* 確認ページ
*/
public function confirm()
{
return view('form.confirm');
}メール送信処理
入力ページと確認ページに追加するsubmitボタンのname属性 “submitBtnVal” の値によりcase文で処理を振り分けるようにします。
# /app/Http/Controllers/FormController.php
/**
* メール送信
*/
public function sendMail(ContactFormRequest $request)
{
//
$form_data = $request->validated();
// submitボタンの値により分岐させる
$submitBtnVal = $request->input('submitBtnVal');
switch ( $submitBtnVal ) {
case 'confirm':
// 値を持たせた状態で確認画面へリダイレクト
return to_route('form.confirm')->withInput();
break;
case 'back':
// 値を持たせた状態で入力画面へリダイレクト
return to_route('form')->withInput();
break;
case 'complete':
// 送信先メールアドレス
$email_admin = 'admin@example.com';
$email_user = $form_data['email'];
// 管理者宛メール
Mail::to($email_admin)->send( new FormAdminMail($form_data) );
// ユーザー宛メール
Mail::to($email_user)->send( new FormUserMail($form_data) );
// ログ
// Log::debug($form_data['name']. ' さまよりお問い合わせ');
//
return to_route('form.complete');
break;
default:
// エラー
}
}ルーティング設定
postのリクエスト先を入力ページから確認ページへ変更と確認ページ表示用のルーティング設定を追加します。
// お問合せフォーム
Route::get('/form', [FormController::class, 'index'])->name('form');
Route::post('/form/confirm', [FormController::class, 'sendMail']);
Route::get('/form/confirm', [FormController::class, 'confirm'])->name('form.confirm');
Route::get('/form/complete', [FormController::class, 'complete'])->name('form.complete');Bladeテンプレート修正・追加
入力ページ修正
action変更
actionの指定を確認ページに変更します。
<form action="{{ route('form.confirm') }}" method="POST">...</form>submitボタン
submitボタンにname属性とvalue属性を追加します。
<button type="submit" name="submitBtnVal" value="confirm">確認画面へ</button>確認ページ追加
入力ページのテンプレートをベースに作成し必要箇所を変更します。
@extends('layouts.default')
@section('title', 'お問い合わせ確認')
@section('content')
<section>
{{-- ▼▼ フォーム --}}
<form action="{{ route('form.confirm') }}" method="POST">
@csrf
{{-- ▼ 会社名 --}}
<div>
<label for="company">会社名(必須)</label>
{{ old('company') }}
<input id="company" type="hidden" name="company" value="{{ old('company') }}">
</div>
{{-- ▼ お名前 --}}
<div>
<label for="name">お名前(必須)</label>
{{ old('name') }}
<input id="name" type="hidden" name="name" value="{{ old('name') }}">
</div>
{{-- ▼ フリガナ --}}
<div>
<label for=name_kana>フリガナ(必須)</label>
{{ old('name_kana') }}
<input id="name_kana" type="hidden" name="name_kana" value="{{ old('name_kana') }}">
</div>
{{-- ▼ 電話番号 --}}
<div>
<label for="phone">電話番号</label>
{{ old('phone') }}
<input id="phone" type="hidden" name="phone" value="{{ old('phone') }}">
</div>
{{-- ▼ メールアドレス --}}
<div>
<label for="email">メールアドレス(必須)</label>
{{ old('email') }}
<input id="email" type="hidden" name="email" value="{{ old('email') }}">
</div>
{{-- ▼ お問い合わせ内容 --}}
<div>
<label for="body">お問い合わせ内容(必須)</label>
{{ old('body') }}
<input id="body" type="hidden" name="body" value="{{ old('body') }}">
</div>
{{-- ▼ 戻る・送信ボタン --}}
<div>
<button type="submit" name="submitBtnVal" value="back">戻る</button>
<button type="submit" name="submitBtnVal" value="complete">送信</button>
</div>
</form>
{{-- ▲▲ フォーム --}}
</section>
@endsection修正・追加ファイルのソース
フォームコントローラ、ルーティング設定、入力ページテンプレート、確認ページテンプレートの４つのファイルのソースです。
/app/Http/Controllers/FormController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Log; // 追加（ログを利用する場合）
use Illuminate\Support\Facades\Mail; // 追加
use App\Http\Requests\ContactFormRequest; // 追加
use App\Mail\FormAdminMail; // 追加
use App\Mail\FormUserMail; // 追加
class FormController extends Controller
{
/**
* 入力ページ
*/
public function index()
{
return view('form.index');
}
/**
* 確認ページ
*/
public function confirm()
{
return view('form.confirm');
}
/**
* 完了ページ
*/
public function complete()
{
return view('form.complete');
}
/**
* メール送信
*/
public function sendMail(ContactFormRequest $request)
{
//
$form_data = $request->validated();
// submitボタンの値により分岐させる
$submitBtnVal = $request->input('submitBtnVal');
switch ( $submitBtnVal ) {
case 'confirm':
// 値を持たせた状態で確認画面へリダイレクト
return to_route('form.confirm')->withInput();
break;
case 'back':
// 値を持たせた状態で入力画面へリダイレクト
return to_route('form')->withInput();
break;
case 'complete':
// 送信先メールアドレス
$email_admin = 'admin@example.com';
$email_user = $form_data['email'];
// 管理者宛メール
Mail::to($email_admin)->send( new FormAdminMail($form_data) );
// ユーザー宛メール
Mail::to($email_user)->send( new FormUserMail($form_data) );
// ログ
// Log::debug($form_data['name']. ' さまよりお問い合わせ');
//
return to_route('form.complete');
break;
default:
// エラー
}
}
}/routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FormController; // 追加
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('index');
});
// お問合せフォーム
Route::get('/form', [FormController::class, 'index'])->name('form');
Route::post('/form/confirm', [FormController::class, 'sendMail']);
Route::get('/form/confirm', [FormController::class, 'confirm'])->name('form.confirm');
Route::get('/form/complete', [FormController::class, 'complete'])->name('form.complete');/resources/views/form/index.blade.php
@extends('layouts.default')
@section('title', 'お問い合わせ')
@section('content')
<section>
{{-- ▼▼ エラーメッセージ --}}
@if($errors->any())
<div>
<ul>
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
{{-- ▲▲ エラーメッセージ --}}
{{-- ▼▼ フォーム --}}
<form action="{{ route('form.confirm') }}" method="POST">
@csrf
{{-- ▼ 会社名 --}}
<div>
<label for="company">会社名(必須)</label>
<input id="company" type="text" name="company" value="{{ old('company') }}">
@if($errors->has('company'))
<p>{{ $errors->first('company') }}</p>
@endif
</div>
{{-- ▼ お名前 --}}
<div>
<label for="name">お名前(必須)</label>
<input id="name" type="text" name="name" value="{{ old('name') }}">
@if($errors->has('name'))
<p>{{ $errors->first('name') }}</p>
@endif
</div>
{{-- ▼ フリガナ --}}
<div>
<label for=name_kana>フリガナ(必須)</label>
<input id="name_kana" type="text" name="name_kana" value="{{ old('name_kana') }}">
@error('name_kana')
<p>{{ $message }}</p>
@enderror
</div>
{{-- ▼ 電話番号 --}}
<div>
<label for="phone">電話番号</label>
<input id="phone" type="text" name="phone" value="{{ old('phone') }}">
@error('phone')
<p>{{ $message }}</p>
@enderror
</div>
{{-- ▼ メールアドレス --}}
<div>
<label for="email">メールアドレス(必須)</label>
<input id="email" type="email" name="email" value="{{ old('email') }}">
@if($errors->has('email'))
<p>{{ $errors->first('email') }}</p>
@endif
</div>
{{-- ▼ お問い合わせ内容 --}}
<div>
<label for="body">お問い合わせ内容(必須)</label>
<textarea id="body" type="text" name="body">{{ old('body') }}</textarea>
@if($errors->has('body'))
<p>{{ $errors->first('body') }}</p>
@endif
</div>
{{-- ▼ 確認ボタン --}}
<div>
<button type="submit" name="submitBtnVal" value="confirm">確認画面へ</button>
</div>
</form>
{{-- ▲▲ フォーム --}}
</section>
@endsection/resources/views/form/confirm.blade.php
@extends('layouts.default')
@section('title', 'お問い合わせ確認')
@section('content')
<section>
{{-- ▼▼ フォーム --}}
<form action="{{ route('form.confirm') }}" method="POST">
@csrf
{{-- ▼ 会社名 --}}
<div>
<label for="company">会社名(必須)</label>
{{ old('company') }}
<input id="company" type="hidden" name="company" value="{{ old('company') }}">
</div>
{{-- ▼ お名前 --}}
<div>
<label for="name">お名前(必須)</label>
{{ old('name') }}
<input id="name" type="hidden" name="name" value="{{ old('name') }}">
</div>
{{-- ▼ フリガナ --}}
<div>
<label for=name_kana>フリガナ(必須)</label>
{{ old('name_kana') }}
<input id="name_kana" type="hidden" name="name_kana" value="{{ old('name_kana') }}">
</div>
{{-- ▼ 電話番号 --}}
<div>
<label for="phone">電話番号</label>
{{ old('phone') }}
<input id="phone" type="hidden" name="phone" value="{{ old('phone') }}">
</div>
{{-- ▼ メールアドレス --}}
<div>
<label for="email">メールアドレス(必須)</label>
{{ old('email') }}
<input id="email" type="hidden" name="email" value="{{ old('email') }}">
</div>
{{-- ▼ お問い合わせ内容 --}}
<div>
<label for="body">お問い合わせ内容(必須)</label>
{{ old('body') }}
<input id="body" type="hidden" name="body" value="{{ old('body') }}">
</div>
{{-- ▼ 戻る・送信ボタン --}}
<div>
<button type="submit" name="submitBtnVal" value="back">戻る</button>
<button type="submit" name="submitBtnVal" value="complete">送信</button>
</div>
</form>
{{-- ▲▲ フォーム --}}
</section>
@endsection動作環境情報
"macOS Ventura" 13.1 "Docker Desktop" 4.15.0 "Laravel Sail" "Laravel Framework" 9.43.0
コメント