联系表单模块

2023年6月20日 2 分钟阅读模块联系表单

本页内容

该模块内置了一个布局和短代码，以生成联系表单，其兼容大部分表单服务后端。

Module	`github.com/hbstack/contact`
Repository	⭐ Please consider giving a star if your like it.
Stars
Version
Used by
Requirements
License
Usage	See how to use modules.

站点参数

Parameter	Type	Required	Default	Description
`endpoint`	`string`	✔️		表单服务后端提供的 URL。
`extra_fields`	`array`			额外字段的数组。
`extra_fields.name`	`string`			额外字段名称。
`extra_fields.type`	`string`			额外字段的类型。
`extra_fields.vaule`	`string`			额外字段的值。
`file`	`boolean`		`false`	是否允许上传文件。
`recaptcha_sitekey`	`string`			reCaptcha v2 的站点密钥。

hugo.toml

 1[params]
 2  [params.hb]
 3    [params.hb.contact]
 4      endpoint = ''
 5      file = false
 6      recaptcha_siekey = ''
 7[[params.hb.contact.extra_fields]]
 8        name = 'foo'
 9        type = 'hidden'
10        value = 'bar'

hugo.yaml

 1params:
 2  hb:
 3    contact:
 4      endpoint: ""
 5      extra_fields:
 6      - name: foo
 7        type: hidden
 8        value: bar
 9      file: false
10      recaptcha_siekey: ""

hugo.json

 1{
 2   "params": {
 3      "hb": {
 4         "contact": {
 5            "endpoint": "",
 6            "extra_fields": [
 7               {
 8                  "name": "foo",
 9                  "type": "hidden",
10                  "value": "bar"
11               }
12            ],
13            "file": false,
14            "recaptcha_siekey": ""
15         }
16      }
17   }
18}

已知兼容的表单后端

按字母排序，请随意于这里添加兼容的后端。

使用方法

可通过多种方式生成联系表单。

使用布局生成联系表单

该模块提供了一个内置的布局 - contact, 你可以简单地创建一个联系表单页面。

content/contact/_index.md

1---
2title: Contact Us
3---

你还可以使用任意不同于 /contact 的自定义路径，你只需要于前言中设置 layout 为 contact。以 /contact-us/ 为例。

content/contact-us/_index.md

1---
2title: Contact Us
3layout: contact
4---

通过短代码生成联系表单

该模块还提供了一个短代码 hb/contact 以生成联系表单，该短代码接受上述相同的参数以修改站点参数配置。

1<div class="row row-cols-1 row-cols-lg-2">
2  <div class="col">
3    {{< hb/contact >}}
4  </div>
5  <div class="col">
6    {{< hb/contact endpoint="https://example.com/contact/sales" file=true >}}
7  </div>
8</div>

联系表单短代码例子

浏览文档