作为Write for DOnations计划的一部分，作者选择了开源计划来接受捐赠。

介绍

Laravel是一个免费的开源 PHP 框架，基于Symfony，用于创建 Web 应用程序。SendGrid是一个基于云的 SMTP 提供商，它允许您发送电子邮件而无需维护电子邮件服务器。

在您的网站上设置联系表格可以让您的访问者更轻松地直接与您联系。为了让您的联系表单正常工作并发送电子邮件，您需要一个 SMTP 服务器。本教程将使用 SendGrid 及其免费的 SMTP 服务，将从网站联系表单发送的电子邮件发送到电子邮件收件箱。

在本教程中，您将向现有 Laravel 应用程序添加一个联系表单，并将其配置为使用 SendGrid 通过 SMTP 发送电子邮件。

先决条件

如果您还没有设置 Laravel 应用程序，您将需要以下内容：

• 以具有 sudo 权限的非 root 用户身份访问 Ubuntu 20.04 服务器，并在您的服务器上安装活动防火墙。要设置这些，请参阅我们的 Ubuntu 20.04 初始服务器设置指南。
• 按照如何在 Ubuntu 20.04 上安装 Nginx、MySQL 和 PHP将 LEMP 堆栈安装在您的服务器上。
• 用于安装 Laravel 及其依赖项的 Composer。您可以按照我们关于如何在 Ubuntu 20.04 上安装 Composer 的指南来安装 Composer。
• 在您的服务器上安装和配置 Laravel。如果你还没有安装 Laravel，你可以按照我们的如何在 Ubuntu 20.04 上使用 Nginx 安装和配置 Laravel教程。

设置 Laravel 应用程序后，您还需要以下内容：

• SendGrid 帐户。您可以访问SendGrid 注册页面来注册一个免费的 SendGrid 帐户。
• 一个完全注册的域名指向您的服务器。本教程将your_domain贯穿始终。你可以购买一个域名Namecheap，免费获得一个在Freenom，或使用你选择的域名注册商。对于 DigitalOcean，您可以按照DigitalOcean DNS的介绍了解有关如何添加它们的详细信息。

第 1 步 – 创建发件人身份

SendGrid 要求您在允许您开始发送电子邮件之前验证您的域名的所有权。为了验证您的域名，请转到您的 SendGrid 帐户，然后转到仪表板并单击Authenticate your Domain。

这将带您进入一个页面，您需要在其中指定您的 DNS 主机并选择是否要为您的域标记链接。电子邮件链接品牌化允许您将电子邮件中用于点击跟踪的所有链接设置为您的域，而不是来自sendgrid.net.

然后单击下一步并在下一页上指定您的域名。

最后，您需要添加 SendGrid 提供的 DNS 记录以完成其验证过程。有关如何管理 DNS 记录的更多信息，您可以阅读有关如何创建、编辑和删除 DNS 记录的教程。

将 DNS 记录添加到 DNS 区域后，返回 SendGrid 并点击验证按钮。

验证您的 SendGrid 身份后，您需要生成一个 API 密钥，您将在 Laravel.env文件中使用该密钥。

从左侧的菜单中，单击API Keys，然后单击Create API Key按钮。为了安全起见，将 API Key Permissions 设置为Restricted Access。

之后，向下滚动并添加邮件发送权限。

最后，单击“创建和查看”按钮以获取您的 API 密钥。API 密钥只会显示一次，因此请务必将其记在安全的地方。

现在您已经使用 SendGrid 配置了域并生成了 API 密钥，您将为 Laravel 应用程序配置 SMTP 详细信息。

第 2 步 – 配置 SMTP 详细信息

.envLaravel 中的文件用于存储应用程序环境的各种配置选项。由于.env文件中通常包含一些敏感信息，例如您的数据库连接详细信息，因此您不应将.env文件提交给源代码控制。

如果您完成了先决条件教程，则需要在/var/www/travellist目录中才能访问您的.env文件：

cd /var/www/travellist

之后，使用您喜欢的文本编辑器打开.env文件：

nano .env

文件中有许多配置变量.env——在本教程中，您将只更改MAIL变量。

为此，请MAIL_按如下方式找到设置并配置变量，将您复制的 API 密钥添加到sendgrid_api_key并根据需要更新其他突出显示的字段：

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

以下列表包含必须更新的变量概述，以便 Laravel 应用程序开始使用 SendGrid SMTP 服务器：

• MAIL_HOST：SendGrid SMTP 主机名，用于发送电子邮件。
• MAIL_PORT：SendGrid 安全 TLS SMTP 端口。
• MAIL_USERNAME：您的 SendGrid 用户名。默认情况下，它适用apikey于所有帐户。
• MAIL_PASSWORD：您的 SendGrid API 密钥。
• MAIL_ENCRYPTION: 邮件加密协议。在这种情况下，您将使用 TLS，因为它可以在服务器之间传输期间保护电子邮件内容。

保存并退出文件。

设置好 SMTP 设置后，您就可以继续并配置您的联系人控制器了。

第 3 步 – 创建控制器

接下来，您将创建一个控制器来处理您的联系表单页面POST和GET请求。

您将使用该GET路由返回包含您的联系表单的 HTML 页面，并且该POST路由将处理联系表单的提交。

要创建一个ContactController在 Laravel 中调用的控制器，请使用以下artisan命令：

php artisan make:controller ContactController

运行该命令后，您将获得以下输出：

Output
Controller created successfully.

此命令将在 处创建一个新控制器app/Http/Controllers/ContactController.php。

运行以下命令来编辑ContactController.php文件：

nano app/Http/Controllers/ContactController.php

首先，您将包含 LaravelMail外观，以便您可以在新控制器中使用邮件功能。阿立面在Laravel是提供不同Laravel功能的访问的类。有关Laravel Facades 的更多信息，请查看官方 Laravel Facades 文档。

要包含 LaravelMail外观，请添加以下内容：

<?php

namespace App\Http\Controllers;

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

然后添加将处理您的GET请求并返回联系人页面视图的方法：

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

最后，让我们添加一个方法来处理POST请求并发送电子邮件：

...
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方法内的消息来更改电子邮件主题。

注意：地址需要与您在 SendGrid 中使用的域名匹配。$message->from('youremail@your_domain');

完成这些编辑后，以下将是您的完整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!');

    }
}

完成编辑后保存并退出文件。

您的联系人控制器有两种方法：

• contact()：此方法返回您的联系人 Blade 视图模板，该模板将保存您的 HTML 页面，其中包含您的联系人表单的 HTML 布局。Blade 是 Laravel 自带的模板引擎。在您的 Blade 模板视图中，您可以添加 HTML 结构以及 PHP 代码和 Blade 语法。
• contactPost()：这个方法处理所有的联系表单提交——在那里你处理输入验证并发送电子邮件。

您使用contactPost()方法处理方法内部的验证$this->validate()。里面的验证方法，您可以指定的name，email和comment需要。这样，您的用户将无法提交空白或不完整的联系表格查询。有关 Laravel 验证如何工作的更多信息，请查看官方 Laravel 验证文档。

验证成功后，该Mail::send()方法会构建您的电子邮件正文和主题，然后发送电子邮件。

最后，如果电子邮件发送成功，您会返回一条成功消息，显示给您的用户。

你已经设置了联系控制器和现在可以在移动GET和POST路线。

第 4 步 – 创建路由

Laravel 路由允许您为应用程序创建对 SEO 友好的 URL。通过使用 Laravel 路由，您可以将应用程序请求路由到特定的控制器，在那里处理应用程序逻辑。

您将在routes/web.php文件中创建两个路由以使用您在上一步中设置的方法。

您将首先创建一个GET映射到您contact的ContactController. 此方法仅返回您的contactBlade 视图。routes/web.php使用以下命令打开：

nano routes/web.php

GET在文件底部添加路由：

注意：如果您遵循先决条件，您的routes/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方法，该方法将处理您的用户联系表单提交：

<?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');

准备好控制器和路由后，您可以保存并退出文件，然后继续下一步准备 Blade 视图。

第 5 步 – 创建刀片视图

在这一步中，您将首先在应用程序中创建一个视图，该视图将保存您的 HTML 联系表单。它将具有三个输入字段：

• 带有用户电子邮件地址类型文本的输入字段
• 输入字段，输入用户姓名的文本类型
• 评论的文本区域

创建一个名为 的文件resources/views/contact.blade.php：

nano 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方法的 HTML 表单/contact。当有人填写联系表格时，它将按照您的contactPost方法处理。

该<link>内部标签<head>标签用于包括引导。您正在为 HTML 表单使用一些样式。您可以更改表单的样式，使其与您网站的设计相匹配。有关如何设置网站样式的更多信息，您可以查看我们的CSS 资源页面。

表单包含在不同的<div>标签中，并带有来自 Bootstrap 的类。您正在使用<div>标签来创建联系表单的结构。有关<div>标签如何工作的更多信息，请查看如何使用 <div>，HTML Content Division Element教程。

保存并退出该文件。

您将创建的下一个视图是您的电子邮件视图。

打开resources/views/email.blade.php文件：

nano resources/views/email.blade.php

然后添加以下内容：

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

这包含将发送给填写您的联系表单的用户的电子邮件内容。保存并退出文件。

样式和视图完成后，您就可以继续测试联系表单了。

第 6 步 — 测试联系表

要测试联系表单，请通过浏览器访问。http://your_domain/contact

您将看到在上一步中创建的 Bootstrap HTML 表单。

完成所有必填字段并点击提交按钮。您将收到一条消息已成功发送的绿色通知。

您可以通过提交表单而不填写任何字段来测试表单。您在控制器中添加的验证将捕捉到它，它会通知您字段不能为空。

最后，您可以检查您的电子邮件帐户并确保您已收到测试电子邮件并且您可以在收件箱中看到它。

结论

你现在已经成功地向你现有的 Laravel 网站添加了一个联系表单。

您还可以在Laravel 官方文档中找到更多信息。

为了确保您的联系表单安全，您可以按照我们关于如何使用 Let’s Encrypt 保护 Nginx 的指南为您的网站安装 SSL 证书。

要了解有关 Laravel 的更多信息，请查看我们的 Laravel 资源集合。