【Laravel】確認画面付きのお問い合わせフォームを作成する【メール送信対応】2021.04.08LaravelBこんにちは、ryohei(@ityryohei)です!本記事は「Laravel5.8」で確認画面付きのお問い合わせフォームを作成する方法のご紹介になります。内容としては、入力ページ→入力内容確認ページ→送信完了ページの3ステップ構成のお問い合わせフォームになります。DBに保存する形式ではなく、自動返信メールを送信するだけの処理です。お問い合わせフォームはユーザーからバグの報告や改善してほしい点などの情報もいただけるので、Webアプリケーションには必須の機能になります。ルーティング→コントローラー→ビューの順で構築する方法をご紹介しています。エンジニアによって構築方法は異なると思いますので、構築しやすい順番で進めていただければと思います。本記事ではLaravelをインストールが完了していることを前提に解説していきます。本記事ではBootstrapを使用しておりません。レイアウトファイルの説明も割愛しております。お問い合わせフォームが完成した後にデザインをしていただければと思います。.envでメールの設定をするまずはメールの送信ができるように「.env」編集します。「.env」ファイルはプロジェクトの直下にあります。(もしファイルが見えない場合は隠しファイルが表示されない設定なっている可能性がありますので、隠しファイルが表示されるようにOSやエディタを設定しましょう。)「.env」のメールの設定は下記の部分になります。(tls)MAIL_FROM_ADDRESS=YOUR_ADDRESSMAIL_FROM_NAME=YOUR_NAMEサンプルではGmailをホストに設定していますが、こちらにはご自身が使用しているメールアドレスのホストを指定してください。Gmailを使用される場合は、そのままアカウント情報を入力していただければ大丈夫です。(その際は、Googleアカウントの設定から「安全性の低いアプリからのアカウントへのアクセスを許可する」を有効にする必要があります。)以上でメールの設定は完了です。続いてルーティングを設定していきます。ルーティングを作成するメール設定が終わったら、最初にページにアクセスするためのルーティングを決めていきます。本記事では下記のようにルーティングしています。serveを実行した状態であれば、下記のURLでアクセスするイメージになります。(現時点では表示されません。)//入力ページhttp://127.0.0.1:8000/contact//確認ページhttp://127.0.0.1:8000/contact/confirm//送信完了ページhttp://127.0.0.1:8000/contact/thanks以上でルーティングは完了です。続いてコントローラーを作成していきます。コントローラーを作成するルーティングが決まりましたので、次はコントローラーを作成します。Windowsであればコマンドプロンプトかパワーシェル、Macであればターミナルを起動して下記のコマンドを実行します。ContactControllerコマンドを実行すると「app/Http/Controllers」の配下にファイルが作成されます。「ContactController.php」を開いてメソッドを追記します。}}各メソッドの処理につきましてはいったん空のままで大丈夫です。一ページずつ解説しながら処理を追記していきます。各ページのビューを作成するルーティングとコントローラーが作成できましたので、続いてWebページの表示部分にあたるビューを作成します。resources/viewsの配下にcontactのディレクトリを作成して、配下にbladeファイルを作成します。コマンドではなくOSやエディタの機能で新規ファイルを作成します。//入力ページresources/views/contact/index.blade.php//確認ページresources/views/contact/confirm.blade.php//送信完了ページresources/views/contact/thanks.blade.phpここまででルーティングとコントローラー、ビューの基本的なファイルの作成が完了しました。これから各ページにコードを追記していきます。難しい部分になりますが、焦らずにゆっくりコードを追っていただければと思います。フォーム入力画面を作成するまずはフォームの肝となる入力画面から。作成したコントローラーのメソッドに処理を追記します。}}「route/web.php」には下記のようにルーティングしました。'ContactController@index')->name('contact.index');この意味合いとしては、「/contact」にGETリクエストのアクセスがあったら「ContactController」の「index()」メソッドが呼び出される、といった内容になります。nameに指定しているcontact.index」は、ルーティングに名前を付ける、という解釈です。この辺をしっかり理解しておくことで、全体の理解が深まるかと思います。続いビューの編集に移ります。上で作成した「contact/index.blade.php」に下記を追記します。</button></form>@endsection一般的なフォームとエラーメッセージの出力処理を記述しています。@csrfはCSRFのトークンを生成してくれます。以上でフォーム入力画面を作成は完了です。続いて入力内容確認ページを作成していきます。入力内容確認ページを作成するフォーム入力と同じように、確認ページに処理を追記していきます。}}続いて作成した「contact/confirm.blade.php」に追記します。</button></form>@endsection以上で入力内容確認ページを作成は完了です。次は送信完了ページ、といきたいところですが、先にメールを送信するのに必要なMailableクラスを作成しておきます。メール送信処理を実装するではメール送信処理を実装していきます。Mailableクラスを作成する下記のコマンドをコマンドプロンプトもしくはターミナルで実行します。ContactSendmail「app/Mail/ContactSendmail.php」に新しいファイルが作成されます。こちらを修正していきます。}}メールテンプレートも一緒に作成しておきます。メールテンプレートを作成する「resources/views/contact」の配下に下記のファイルを作成して、メール本文を追記します。resources/views/contact/mail.blade.phpお問い合わせ内容を受け付けました。!!}<br>以上でメール送信処理の実装は完了です。最後に送信完了ページを作成します。送信完了ページを作成するまずはコントローラーから。}}ビューも簡単に追記します。}}</h1>@endsection以上でLaravelを使ったお問い合わせフォームの完成になります。最後にいかがでしたでしょうか。Laravelでは、お問い合わせフォームを短時間で構築することができます。バリデーションチェックやトークンの作成も少ない記述で実装することができる点もLaravelの魅力ですよね。今後もLaravel関連の投稿を続けていきたいと思います。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。