Contact Module

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

Modulegithub.com/hbstack/contact
Repository⭐ Please consider giving a star if your like it.
Stars
Version
Used by
Requirements
License
UsageSee how to use modules.

Site Parameters

ParameterTypeRequiredDefaultDescription
endpointstring✔️The endpoint provided by form backends.
extra_fieldsarrayAn array of extra fields.
extra_fields.namestringThe name of extra field.
extra_fields.typestringThe type of extra field.
extra_fields.vaulestringThe vaule of extra field.
filebooleanfalseWhether to allow uploading file.
recaptcha_sitekeystringThe 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

razonyang
Monday, July 15, 2024 Tuesday, June 20, 2023