Contact Module

June 20, 2023 2 min read Modules Contact Contact Form

On this page

The contact module ships with a layout and shortcode for generating contact forms, which are designed to be compatible with mosts of form backends.

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.

Site Parameters

Parameter	Type	Required	Default	Description
`endpoint`	`string`	✔️		The endpoint provided by form backends.
`extra_fields`	`array`			An array of extra fields.
`extra_fields.name`	`string`			The name of extra field.
`extra_fields.type`	`string`			The type of extra field.
`extra_fields.vaule`	`string`			The vaule of extra field.
`file`	`boolean`		`false`	Whether to allow uploading file.
`recaptcha_sitekey`	`string`			The reCaptcha v2 site key.

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}

Known Compatible Form Backends

Listed in alphabetically, please feel free to add compatible backends here.

Usage

There are multiple ways to generate the contact form.

Generate Contact Form via Layout

This module ship with a built-in layout called contact, you can simply create a contact page.

content/contact/_index.md

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

You can also use any custom path other than /contact/, what you need to do is that specify the layout as contact. Let’s take /contact-us/ as an example.

content/contact-us/_index.md

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

Generate Contact Form via Shortcode

This module also provides a shortcode called hb/contact for generating contact forms. The shortcode accepts same parameters listed above to override the site configuration.

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>

Contact shortcode example

Browser docs