联系表单模块
本页内容
赞助
该模块内置了一个布局和短代码，以生成联系表单，其兼容大部分表单服务后端。
| 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>
