README

• 带联系表单的SilverStripe自定义布局页面，具有灵活的前端和Google Recaptcha。

如何安装

composer require alexstack/silverstripe-custom-page-with-contact-us-form

重建数据库并刷新管理页面

• 在composer安装后运行你的网址/dev/build?flush=1，并通过/admin?flush=1刷新管理页面

如何使用它

• 在SilverStripe管理中创建新页面并选择页面类型“带联系表单的自定义页面”
• 从内置布局中选择自定义页面布局
• 或使用自己的模板 xxx.ss
• 更改表单设置 自定义表单显示字段
• 设置Google Recaptcha
• 保存并发布页面

在SilverStripe管理中创建新页面并选择页面类型“带联系表单的自定义页面”

选择自定义页面布局

更改表单设置

设置Google Recaptcha v2

设置Google Recaptcha v3

更改全局设置

内置页面布局

• 它将使用您主题文件夹中的page.ss作为全局布局。例如，它将使用您自己的header/footer/css/js
• 内置页面布局使用bootstrap 4.x进行网格布局

内置布局1：如果启用，内容在左侧，表单在右侧

内置布局2：如果启用，内容在右侧，表单在左侧

内置布局3：如果启用，内容在顶部，表单在底部

内置布局4：内容在顶部，下方有3张卡片（带有额外图像1，2，3）

内置布局5：每行两个内容，两行带有额外内容1，2，3

使用您自己的.ss模板文件进行自定义页面布局

• 例如，NewProductPage.ss。请确保模板文件your-theme/templates/includes/xxx.ss已经存在！
• 如何开始.ss：将vendor/alexstack/silverstripe-custom-page-with-contact-us-form/templates/Includes/CustomLayoutPage1.ss复制到你的主题文件夹中，重命名为NewProductPage.ss，更改.ss中的代码到您想要的。只需保持变量名相同。
• 不要忘记先运行?flush=1来加载您的新.ss模板

联系表单显示字段

• 有一些内置字段。您可以选择哪些字段将显示：FirstName | Email | Phone | Message | LastName | Mobile | Company | Website | Address | Street | PostalCode | City | State | Country
• 使用|作为字段分隔符。
• 默认情况下，表单将显示：FirstName | Email | Phone | Company | Message
• 您可以通过将其替换为：FirstName | Email | Phone | Company | Message来轻松将Company更改为Address
• 或者如果您想的话，可以添加更多字段。

覆盖前端表单模板

• 如果您想添加更多字段或更改字段显示顺序，或者做其他修改，可以覆盖 .ss 模板文件。
• 如何覆盖：将 vendor/alexstack/silverstripe-custom-page-with-contact-us-form/templates/Includes/ContactUsCustomForm1.ss 复制到您的主题目录下的 includes，然后根据需要修改内部的 HTML。只需保持输入字段名称不变。
• 我可以在表单中添加更多字段吗？您也可以添加一些额外的字段来扩展表单，而不需要修改 PHP 文件或数据库。可用的额外字段名称有：ExtraData1、ExtraData2、ExtraData3、ExtraData4、ExtraData5、Category、MyDate。
• 覆盖表单 .ss 模板示例截图：

查看联系我们表单数据

• 表单提交后，会发送电子邮件到通知电子邮件地址
• 您可以在管理后台查看所有数据：

谢谢

• 灵感来源于 Fractaslabs 的联系页面

许可协议

• BSD-3-Clause