Laravelお問い合わせフォームを作成してSendGridでメールを送信する方法

投稿日: 2022-04-20 2022-04-20
タグ: Applications, Development, email, nginx, php, PHP Frameworks

著者は、 Open Source Initiative を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

Laravel は、 Symfony に基づいており、Webアプリケーションの作成に使用される無料のオープンソースPHPフレームワークです。 SendGrid はクラウドベースのSMTPプロバイダーであり、メールサーバーを維持しなくてもメールを送信できます。

あなたのウェブサイトに連絡フォームがあると、訪問者があなたに直接連絡するのが簡単になります。お問い合わせフォームが正しく機能し、メールを送信するには、SMTPサーバーが必要です。このチュートリアルでは、SendGridとその無料のSMTPサービスを使用して、Webサイトの連絡フォームから送信された電子メールを電子メールの受信ボックスに配信します。

このチュートリアルでは、既存のLaravelアプリケーションに連絡フォームを追加し、SendGridを使用してSMTP経由で電子メールを送信するように構成します。

前提条件

Laravelアプリケーションをまだセットアップしていない場合は、次のものが必要になります。

sudo権限を持つ非rootユーザーとしてUbuntu20.04サーバーにアクセスし、サーバーにアクティブなファイアウォールをインストールします。これらを設定するには、 Ubuntu20.04の初期サーバー設定ガイドを参照してください。

Ubuntu 20.04にNginx、MySQL、PHPをインストールする方法に従ってサーバーにインストールされたLEMPスタック。
Laravelとその依存関係をインストールするComposer。 Ubuntu 20.04にComposerをインストールする方法のガイドに従って、Composerをインストールできます。

Laravelがサーバーにインストールおよび構成されています。 Laravelをまだインストールしていない場合は、 Ubuntu20.04チュートリアルでNginxを使用してLaravelをインストールおよび構成する方法に従ってください。

Laravelアプリケーションをセットアップした後、以下も必要になります。

SendGridアカウント。 SendGrid登録ページにアクセスして、無料のSendGridアカウントにサインアップできます。
サーバーを指す完全に登録されたドメイン名。このチュートリアルでは、全体を通してyour_domainを使用します。 Namecheap でドメイン名を購入するか、 Freenom で無料でドメイン名を取得するか、選択したドメイン登録事業者を使用できます。 DigitalOceanの場合、追加方法の詳細については、この DigitalOceanDNSの概要に従ってください。

ステップ1—送信者IDを作成する

SendGridでは、メールの送信を開始する前に、ドメイン名の所有権を確認する必要があります。ドメイン名を確認するには、SendGridアカウントに移動し、ダッシュボードに移動して、ドメインの認証をクリックします。

これにより、DNSホストを指定し、ドメインのリンクをブランド化するかどうかを選択する必要があるページに移動します。メールリンクのブランディングを使用すると、メールのクリック追跡に使用されるすべてのリンクを、sendgrid.netからではなくドメインに設定できます。

SendGrid choose DNS host

次に、次へをクリックし、次のページでドメイン名を指定します。

SendGrid specify your domain name

最後に、SendGridによって提供されるDNSレコードを追加して、検証プロセスを完了する必要があります。 DNSレコードを管理する方法の詳細については、 DNSレコードを作成、編集、および削除する方法のこのチュートリアルを参照してください。

SendGrid verify DNS records

DNSゾーンにDNSレコードを追加したら、SendGridに戻り、検証ボタンを押します。

SendGrid Identityを確認したら、Laravel.envファイルで使用するAPIキーを生成する必要があります。

左側のメニューから、 APIキーをクリックしてから、APIキーの作成ボタンをクリックします。セキュリティのために、APIキーのアクセス許可を制限付きアクセスに設定します。

SendGrid Create API Key

その後、下にスクロールしてメール送信権限を追加します。

SendGrid send mail permissions

最後に、をクリックします作成と表示ボタンをクリックしてAPIキーを取得します。 APIキーは一度しか表示されないため、安全な場所に注意してください。

SendGridを使用してドメインを構成し、APIキーを生成したので、LaravelアプリケーションのSMTP詳細を構成します。

ステップ2—SMTPの詳細を設定する

Laravelの.envファイルは、アプリケーション環境のさまざまな構成オプションを保存するために使用されます。通常、.envファイルにはデータベース接続の詳細などの機密情報が含まれているため、.envファイルをソース管理にコミットしないでください。

前提条件のチュートリアルを完了した場合、.envファイルにアクセスするには、/var/www/travellistディレクトリにいる必要があります。

cd /var/www/travellist

その後、お気に入りのテキストエディタを使用して、.envファイルを開きます。

nano .env

.envファイルには多くの構成変数があります。このチュートリアルでは、MAIL変数のみを変更します。

これを行うには、MAIL_設定を見つけて、次のように変数を構成し、コピーしたAPIキーをsendgrid_api_keyに追加し、必要に応じて他の強調表示されたフィールドを更新します。

.env

. . .
MAIL_MAILER=smtp
MAIL_HOST=smtp.sendgrid.net
MAIL_PORT=587
MAIL_USERNAME=apikey
MAIL_PASSWORD=sendgrid_api_key
MAIL_ENCRYPTION=tls
. . .

次のリストには、LaravelアプリケーションがSendGridSMTPサーバーの使用を開始するために更新する必要のある変数の概要が含まれています。

MAIL_HOST：メールの送信に使用されるSendGridSMTPホスト名。
MAIL_PORT：SendGridセキュアTLSSMTPポート。
MAIL_USERNAME：SendGridのユーザー名。デフォルトでは、すべてのアカウントでapikeyです。
MAIL_PASSWORD：SendGridAPIキー。
MAIL_ENCRYPTION：メール暗号化プロトコル。この場合、サーバー間の転送中に電子メールコンテンツを保護するため、TLSを使用します。

ファイルを保存して終了します。

SMTP設定が整ったら、連絡先コントローラーを構成する準備が整います。

ステップ3—コントローラーの作成

次に、お問い合わせフォームページのPOSTおよびGETリクエストを処理するコントローラーを作成します。

GETルートを使用してお問い合わせフォームを含むHTMLページを返し、POSTルートでお問い合わせフォームの送信を処理します。

LaravelでContactControllerというコントローラーを作成するには、次のartisanコマンドを使用します。

php artisan make:controller ContactController

コマンドを実行すると、次の出力が得られます。

OutputController created successfully.

このコマンドは、app/Http/Controllers/ContactController.phpに新しいコントローラーを作成します。

次のコマンドを実行して、ContactController.phpファイルを編集します。

nano app/Http/Controllers/ContactController.php

まず、Laravel Mailファサードを含めて、新しいコントローラーでメール機能を使用できるようにします。 Laravelのfacadeは、さまざまなLaravel機能へのアクセスを提供するクラスです。 Laravelファサードの詳細については、公式のLaravelファサードドキュメントをご覧ください。

Laravel Mailファサードを含めるには、次を追加します。

app / Http / Controllers / ContactController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Mail;
. . .

次に、GETリクエストを処理するメソッドを追加し、連絡先ページビューを返します。

app / Http / Controllers / ContactController.php

. . .
class ContactController extends Controller
{
        public function contact(){
                return view('contact');
        }
}

最後に、POSTリクエストを処理してメールを送信するメソッドを追加しましょう。

app / Http / Controllers / ContactController.php

...
class ContactController extends Controller
{
        public function contact(){
                return view('contact');
        }

    public function contactPost(Request $request){
        $this->validate($request, [
                        'name' => 'required',
                        'email' => 'required|email',
                        'comment' => 'required'
                ]);

        Mail::send('email', [
                'name' => $request->get('name'),
                'email' => $request->get('email'),
                'comment' => $request->get('comment') ],
                function ($message) {
                        $message->from('youremail@your_domain');
                        $message->to('youremail@your_domain', 'Your Name')
                        ->subject('Your Website Contact Form');
        });

        return back()->with('success', 'Thanks for contacting me, I will get back to you soon!');

    }
}

強調表示された行内で、次のようにいくつかの変数を変更する必要があります。

$message->from('youremail@your_domain');：youremail@your_domainを実際のメールアドレスに変更します。
$message->to('youremail@your_domain', 'Your Name')：$message->toと$message->fromは必ずしも一致する必要はありません。 $message->toの値を、お問い合わせフォームのすべての問い合わせを受け取りたい別のメールアドレスに変更することもできます。
subject('Your Website Contact Form');：subjectメソッド内のメッセージを編集して、メールの件名を変更することもできます。

注：$message->from('youremail@your_domain');アドレスは、SendGridで使用したドメイン名と一致する必要があります。

これらの編集が完了すると、次のファイルが完全なContactController.phpファイルになります。

app / Http / Controllers / ContactController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Mail;

class ContactController extends Controller
{
    public function contact(){
        return view('contact');
    }

    public function contactPost(Request $request){
        $this->validate($request, [
                        'name' => 'required',
                        'email' => 'required|email',
                        'comment' => 'required'
                ]);

        Mail::send('email', [
                'name' => $request->get('name'),
                'email' => $request->get('email'),
                'comment' => $request->get('comment') ],
                function ($message) {
                        $message->from('youremail@your_domain');
                        $message->to('youremail@your_domain', 'Your Name')
                                ->subject('Your Website Contact Form');
        });

        return back()->with('success', 'Thanks for contacting me, I will get back to you soon!');

    }
}

編集が終了したら、ファイルを保存して終了します。

ContactControllerには2つの方法があります。

contact()：このメソッドは、連絡先のブレードビューテンプレートを返します。このテンプレートには、連絡先フォームのHTMLレイアウトを含むHTMLページが保持されます。ブレードは、Laravelに付属しているテンプレートエンジンです。 Bladeテンプレートビューでは、PHPコードおよびBlade構文とともにHTML構造を追加できます。
contactPost()：このメソッドは、すべての連絡フォームの送信を処理します。ここで、入力の検証を処理し、電子メールを送信します。

contactPost()メソッド内で、$this->validate()メソッドを使用して検証を処理します。検証メソッド内で、name、email、およびcommentが必須であることを指定します。そうすれば、ユーザーは空のまたは不完全な連絡フォームの問い合わせを送信できなくなります。 Laravel検証の仕組みの詳細については、公式のLaravel検証ドキュメントをご覧ください。

検証が成功すると、Mail::send()メソッドが電子メールの本文と件名を作成し、電子メールを送信します。

最後に、電子メールが正常に送信された場合、ユーザーに表示される成功メッセージを返します。

これで連絡先コントローラが設定され、GETおよびPOSTルートに進むことができます。

ステップ4—ルートを作成する

Laravelルートを使用すると、アプリケーションのSEOに適したURLを作成できます。 Laravelルートを使用すると、アプリケーションロジックを処理する特定のコントローラーにアプリケーションリクエストをルーティングできます。

routes/web.phpファイルに2つのルートを作成して、前の手順で設定した方法を使用します。

まず、ContactControllerのcontactメソッドにマップするGETルートを作成します。このメソッドは、contactブレードビューのみを返します。次のコマンドでroutes/web.phpを開きます。

nano routes/web.php

ファイルの最後にGETルートを追加します。

注：前提条件に従った場合、routes/web.phpファイルには異なるコンテンツが含まれます。このチュートリアルの手順に従って、このファイルの最後にルートを追加できます。

ルート/web.php

<?php
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| 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('/contact', 'ContactController@contact')->name('contact');

次に、POSTルートを追加し、それをcontactPostメソッドにマップします。これにより、ユーザー連絡フォームの送信が処理されます。

ルート/web.php

<?php
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| 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('/contact', 'ContactController@contact')->name('contact');
Route::post('/contact', 'ContactController@contactPost')->name('contactPost');

コントローラとルートの準備ができたら、ファイルを保存して終了し、次の手順に進んでブレードビューを準備します。

ステップ5—ブレードビューを作成する

このステップでは、HTML連絡フォームを保持するビューをアプリケーションで作成することから始めます。 3つの入力フィールドがあります。

ユーザーの電子メールアドレスのタイプテキストを含む入力フィールド
ユーザー名のテキストタイプの入力フィールド
コメントのテキスト領域

resources/views/contact.blade.phpというファイルを作成します。

nano resources/views/contact.blade.php

次に、次のコンテンツを追加します。

resources / views / contact.blade.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form with Laravel and SendGrid</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>

<body>

    <div class="container">
        @if(session('success'))
        <div class="alert alert-success">
          {{ session('success') }}
        </div>
        @endif

        <form method="POST" action="/contact">
            @csrf
            <div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}">
                <label for="email">Email address</label>
                <input name="email" type="email" class="form-control" id="email" aria-describedby="emailHelp"
                    placeholder="Enter your email">
                <span class="text-danger">{{ $errors->first('email') }}</span>
            </div>
            <div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}">
                <label for="name">Name</label>
                <input name="name" type="text" class="form-control" id="name" aria-describedby="name" placeholder="Your name">
                <span class="text-danger">{{ $errors->first('name') }}</span>

            </div>
            <div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}">
                <label for="exampleInputPassword1">Comment</label>
                <textarea name="comment" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                <span class="text-danger">{{ $errors->first('comment') }}</span>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>

</body>

</html>

これは、POSTメソッドから/contactルートへのHTMLフォームです。誰かがお問い合わせフォームに記入すると、contactPostメソッドで処理されます。

<head>タグ内の<link>タグは、ブートストラップを含めるために使用されます。 HTMLフォームにいくつかのスタイルを使用しています。 Webサイトのデザインに一致するように、フォームのスタイルを変更できます。 Webサイトのスタイルを設定する方法の詳細については、CSSリソースページを参照してください。

フォームは、Bootstrapのクラスを使用してさまざまな<div>タグにまとめられています。 <div>タグを使用して、お問い合わせフォームの構造を作成しています。方法の詳細については<div>タグは機能します、チェックしてください使用方法

、HTMLコンテンツ分割要素

チュートリアル。

このファイルを保存して終了します。

次に作成するビューは、電子メールビューです。

resources/views/email.blade.phpファイルを開きます。

nano resources/views/email.blade.php

次に、次のコンテンツを追加します。

resources / views / email.blade.php

Inquiry from: {{ $name }}
<p> Email: {{ $email }} </p>
<p> Message: {{ $comment }} </p>

これには、お問い合わせフォームに記入するユーザーに送信される電子メールコンテンツが含まれます。ファイルを保存して終了します。

スタイリングとビューが完成したら、お問い合わせフォームをテストする準備が整いました。

ステップ6—お問い合わせフォームのテスト

お問い合わせフォームをテストするには、ブラウザからhttp://your_domain/contactにアクセスしてください。

前の手順で作成したBootstrapHTMLフォームが表示されます。

必要なフィールドをすべて入力し、送信ボタンを押してください。メッセージが正常に送信されたことを示す緑色の通知が表示されます。

Laravel contact form message

どのフィールドにも入力せずにフォームを送信することで、フォームをテストできます。コントローラに追加した検証はそれをキャッチし、フィールドが空であってはならないことを通知します。

Laravel contact form validation

最後に、メールアカウントをチェックして、テストメールを受信し、受信トレイに表示されることを確認できます。

結論

これで、既存のLaravelWebサイトに連絡フォームが正常に追加されました。

詳細については、公式のLaravelドキュメントを参照してください。

お問い合わせフォームが安全であることを確認するために、 Let’s EncryptでNginxを保護する方法のガイドに従って、WebサイトのSSL証明書をインストールできます。

Laravelの詳細については、Laravelリソースのコレクションをご覧ください。

getdocs

13036