tutortonym/laravel-quick-forms

Laravel Quick Forms 允许您通过简单的 Blade 组件快速轻松地将订阅表单或联系我们表单（或两者）集成到您的 Laravel 应用程序中，无需从头创建一切（模型、迁移、控制器、验证、视图、路由等...），并可选择

维护者

详细信息

github.com/TutorTonyM/laravel-quick-forms

主页

源代码

问题

安装: 6

依赖者: 0

建议者: 0

安全: 0

星星: 0

关注者: 2

分支: 0

开放问题: 0

类型：包

v1.1.0 2022-04-20 15:28 UTC

Requires

MIT 2eb7c92fd2069d08ef220fd612856a445f9c86b9

  • Tutor Tony M <tonym.woop@tutortonym.com>

newslettercontactlaravelsubscribettmLaravel Contact Formtutortonymtutor tony mLaravel Formttm-subscribecoantact formttm-contactttm-contact-form

This package is auto-updated.

Last update: 2024-09-20 21:06:12 UTC

README

此包允许您通过简单的 Blade 组件将订阅表单或联系我们表单（或两者）添加到您的 Laravel 应用程序中，无需从头创建一切（模型、迁移、控制器、验证、视图、路由等...）。它还提供了使用 Google reCAPTCHA v2 保护两个表单的选项，同时将其集成到 Blade 组件和 .env 文件中。

此包通过 AJAX 调用发送表单，因此无需刷新页面。由于使用 AJAX 调用，因此它依赖于您的项目已安装 jQuery。

需求

如果您想使用 re-captcha v2 功能，您需要一个 Google re-captcha 账户。获取 Google re-captcha 账户是免费且简单的。

文档

有关此包的官方和更详细的文档可以在 https://TutorTonyM.com/packages/laravel/laravel-quick-forms 找到。

兼容性

此包与 Laravel 9.0 及以上版本兼容。

依赖

此包依赖于 PHP 8.0 或以上版本。

此包依赖于 jQuery 3 或以上版本。

如何使用

  1. 安装包
  2. 运行迁移
  3. 添加组件
  4. 发布公共文件

您可以通过向其添加属性来修改表单文本。

  1. 添加属性到表单

如果您想使用 Google Re-Captcha v2 来保护您的表单免受垃圾邮件机器人的侵害，请完成以下步骤。

  1. 将 Re-Captcha 集成到项目中

安装

您可以通过 composer 安装此包

composer require tutortonym/laravel-quick-forms

包将自动注册自己，并准备好使用。

运行迁移

此包包括订阅和联系我们表的迁移。您只需使用 artisan 命令 migrate 运行迁移即可

php artisan migrate

添加组件

您必须将一些组件添加到您的视图中，因为它们是此包中所有模块之间的链接。

样式组件

样式组件将样式标签添加到您的视图中，其中包含对应样式表的路径。此组件必须放在页面的头部。

<x-ttm-quick-forms-style />

脚本组件

脚本组件将脚本标签添加到您的视图中，其中包含对应 JavaScript 文件的路径。此组件必须放在 jQuery 脚本标签之后，最好放在 body 的底部。

<x-ttm-quick-forms-script />

表单组件

有两个表单组件，一个用于订阅表单，另一个用于联系我们表单。

订阅表单

此组件添加用于输入电子邮件地址以订阅时事通讯的表单。此组件应放置在您希望显示订阅表单的位置。

<x-ttm-quick-forms-subscribe />
联系我们表单

此组件添加用于发送消息并包含用户信息的表单。此组件应放置在您希望显示联系我们表单的位置。

<x-ttm-quick-forms-contact />

模态组件

本包使用两个模态窗口，分别是“alert-modal”和“re-captcha-modal”。第一个模态窗口是必须的，如果您想使用本包的本地警报功能。第二个模态窗口仅在您想使用Re-Captcha来保护表单时才需要。

这些模态窗口可以单独包含，也可以作为一个单独的组件。

警报模态窗口

此组件在提交表单后添加负责警报（成功或失败）的模态窗口。

<x-ttm-quick-forms-alert-modal />
Re-Captcha 模态窗口

此组件在提交表单前添加用于验证的re-captcha复选框的模态窗口。

<x-ttm-quick-forms-re-captcha-modal />
单个组件中的两个模态窗口

此组件添加了“alert-modal”和“re-captcha-modal”。

<x-ttm-quick-forms-modals />

由于这些组件在触发前是不可见的，因此可以将它们放在页面的任何位置，但建议将它们放置在页面底部。

发布文件

您可以发布本包中的大多数文件。其中大部分是可选的，但有两个是必须的，用于进行ajax调用和设置模态窗口样式。您可以使用如下命令发布文件：vendor:publish

php artisan vendor:publish --tag="ttm-quick-forms-public"

必须发布的两个文件是

  • ttm-quick-forms.css
  • ttm-quick-forms.js

您可以作为一个组或单独发布这些文件。为此，您可以使用以下命令

作为一个组

php artisan vendor:publish --tag="ttm-quick-forms-public"

仅样式表

php artisan vendor:publish --tag="ttm-quick-forms-style-public"

仅脚本

php artisan vendor:publish --tag="ttm-quick-forms-script-public"

样式表将发布到 /public/css/vendor/TutorTonyM/quick-forms/ttm-quick-forms.css，而脚本文档将发布到 /public/js/vendor/TutorTonyM/quick-forms/ttm-quick-forms.js。

还有许多其他选项可以用于发布这些和其他文件。有关更多发布选项，请参阅官方文档

表单属性

通过向表单组件添加属性，可以在表单上修改某些值。下面的部分显示了两个表单及其各自的可用属性。

订阅表单

  • labelText = 修改输入元素上显示的标签文本。如果您不希望有标签元素，只需将此变量设置为空字符串即可。（默认：订阅特别优惠）。
  • inputText = 修改输入元素中使用的占位符文本。如果您不希望有占位符属性，只需将此变量设置为空字符串即可。（默认：输入您的电子邮件）。
  • buttonText = 修改提交按钮中使用的文本（默认：提交）。

我们可以通过将值分配给属性来修改这三个中的任何一个或全部。

<x-ttm-quick-forms-subscribe labelText="Subscribe" inputText="Email" buttonText="Send" />

联系我们表单

  • subjectLabelText = 修改主题选择元素上方的标签文本。如果您不希望有标签元素，只需将此变量设置为空字符串即可。（默认：消息原因）。
  • subjectDefaultOptionText = 修改主题选择元素中默认选项的文本。如果您不希望有默认选项，只需将此变量设置为空字符串即可。（默认：消息原因）。
  • firstNameLabelText = 修改姓氏输入元素上方的标签文本。如果您不希望有标签元素，只需将此变量设置为空字符串即可。（默认：姓名）。
  • firstNameText = 修改姓氏输入元素中使用的占位符文本。如果您不希望有占位符属性，只需将此变量设置为空字符串即可。（默认：姓名）。
  • lastNameLabelText = 修改名字输入元素上方的标签文本。如果您不希望有标签元素，只需将此变量设置为空字符串即可。（默认：名字）。
  • lastNameText = 修改名字输入元素中使用的占位符文本。如果您不希望有占位符属性，只需将此变量设置为空字符串即可。（默认：名字）。
  • emailLabelText = 修改电子邮件输入元素上方的标签文本。如果您不希望有标签元素，只需将此变量设置为空字符串即可。（默认：电子邮件地址）。
  • emailText = 修改电子邮件输入元素中使用的占位符文本。如果您不希望有占位符属性，只需将此变量设置为空字符串即可。（默认：电子邮件地址）。
  • messageLabelText = 修改消息输入元素上方的标签文本。如果您不希望有标签元素，只需将此变量设置为空字符串即可。（默认：消息）。
  • messageText = 修改消息输入元素中使用的占位符文本。如果您不希望有占位符属性，只需将此变量设置为空字符串即可。（默认：消息）。
  • buttonText = 修改提交按钮中使用的文本（默认：提交）。

我们可以通过为属性赋值来修改其中任何一个或所有这些。

<x-ttm-quick-forms-subscribe subjectLabelText="" subjectDefaultOptionText="Chose One" buttonText="Send" />

我们还可以将标准HTML属性（如id或class）添加到表单中，例如

<x-ttm-quick-forms-subscribe id="subscribe-form" class="my-style" />

要了解更高级的表单操作方法，请参阅官方文档。

使用Google Re-Captcha

如果您想使用re-captcha保护您的任何或所有表单免受垃圾邮件机器人攻击，首先您需要一个Google reCAPTCHA账号。获取账号很简单，但这超出了本文档的范围。您可以快速进行谷歌搜索，找到大量有关此主题的帮助信息。

一旦您拥有Google reCAPTCHA账号，您需要注册您的域名/网站。如果您正在开发环境中，请确保注册localhost和127.0.0.1。同样，这超出了本文档的范围。

一旦您注册了域名并获得了适当的密钥，您只需要将几个条目添加到您的.env文件中。

TTM_QUICK_FORMS_USE_GOOGLE_RECAPTCHA_ON_SUBSCRIBE_FORM=true
TTM_QUICK_FORMS_USE_GOOGLE_RECAPTCHA_ON_CONTACT_FORM=true
TTM_QUICK_FORMS_GOOGLE_RECAPTCHA_SITE_KEY=**********************************
TTM_QUICK_FORMS_GOOGLE_RECAPTCHA_SECRET_KEY=**********************************

"TTM_QUICK_FORMS_USE_GOOGLE_RECAPTCHA_ON_SUBSCRIBE_FORM"条目设置为true将启用订阅表单上的Google re-captcha v2功能。默认情况下，此选项设置为false。

"TTM_QUICK_FORMS_USE_GOOGLE_RECAPTCHA_ON_CONTACT_FORM"条目设置为true将启用联系我们表单上的Google re-captcha v2功能。默认情况下，此选项设置为false。

其他两个条目"TTM_QUICK_FORMS_GOOGLE_RECAPTCHA_SITE_KEY"和"TTM_QUICK_FORMS_GOOGLE_RECAPTCHA_SECRET_KEY"将在调用re-captcha时识别您的域名给Google API。

请注意，网站密钥和密钥条目是使用re-captcha所必需的。

此外，您可以通过仅将上述前两个条目之一设置为true，在一组表单中启用re-captcha保护，而在另一组中不启用。

更多高级设置

此包具有许多其他设置，可以按需配置，例如更改警报和re-captcha模态上的文本，向表单的内元素添加属性等等。有关功能列表的更完整信息，请访问官方文档。

关于Tutor Tony M

我是一名来自美国的开发者，每天创建软件和网站。我对我的工作充满热情，我喜欢分享我所拥有的知识。我在不同的平台上分享我的知识，例如YouTube.com/TutorTonyM和TutorTonyM.com。您可以通过社交媒体@TutorTonyM在我的Facebook、Instagram和Twitter上关注我。

许可

MIT许可（MIT）。有关更多信息，请参阅许可文件。