Develop

component-library/bookshop.scss

@@ -3,6 +3,7 @@
 @import "modules/bookshop/components/approach/approach";
 @import "modules/bookshop/components/articles/articles";
 @import "modules/bookshop/components/cards/cards";
+@import "modules/bookshop/components/contact-form/contact-form";
 @import "modules/bookshop/components/cta/cta";
 @import "modules/bookshop/components/faq/faq";
 @import "modules/bookshop/components/featured/featured";

component-library/components/contact-form/contact-form.bookshop.yml

@@ -0,0 +1,37 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Contact form
+  description: Contact form with illustration
+  icon: contact_mail
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  id:
+  heading:
+    preheading:
+    title:
+    content:
+    align:
+    width:
+  background:
+    backdrop:
+    color:
+    subtle:
+  image:
+  hook:
+  action:
+  form_id:
+  responsive:
+  class:
+  width:
+  justify:
+  wrapper:
+  fluid:
+  theme:
+  cover:
+  overlay_mode:
+  section_class:
+  bg_class:

component-library/components/contact-form/contact-form.hugo.html

@@ -0,0 +1,77 @@
+{{/*
+    Copyright © 2026 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+
+    Note: To support live editing, bookshop components should use a clear path to the provided arguments.
+    Therefore, we cannot use the InitArgs partial at this point, and we need to access each argument
+    directly. See the docs for more background:
+    https://github.com/CloudCannon/bookshop/blob/main/guides/hugo.adoc#passing-data-to-bookshop-components
+*/}}
+
+{{/* Validate arguments */}}
+{{ $error := false }}
+{{ if not site.Params.env_bookshop_live }}
+    {{ $bookshop := "contact-form" }}
+    {{ $args := partial "utilities/InitArgs.html" (dict "bookshop" $bookshop "args" .)}}
+    {{ $err := $args.err }}
+    {{ $msg := ($args.errmsg | append $args.warnmsg) }}
+
+    {{ if not $err }}
+        {{ if not $args.hook }}
+            {{ $msg = $msg | append (printf "[%s] requires argument 'hook'" $bookshop) }}
+            {{ $err = true }}
+        {{ else if (not (templates.Exists (printf "_partials/%s" $args.hook))) }}
+            {{ $hook := cond (path.Ext $args.hook) $args.hook (printf "%s.html" $args.hook)  }}
+            {{ if (not (templates.Exists (printf "_partials/%s" $hook))) }}
+                {{ $msg = $msg | append (printf "[%s] cannot find render hook '%s'" $bookshop $args.hook) }}
+                {{ $err = true }}
+            {{ end }}
+        {{ end }}
+    {{ end }}
+
+    {{ if or $err $args.warnmsg }}
+        {{ partial (cond $err "utilities/LogErr.html" "utilities/LogWarn.html") (dict
+            "partial" "component-library/components/contact-form/contact-form.hugo.html"
+            "warnid"  "warn-invalid-arguments"
+            "msg"     "Invalid arguments"
+            "details" $msg
+            "file"    page.File
+        )}}
+        {{ $error = $err }}
+    {{- end -}}
+{{- end -}}
+
+{{ if not $error }}
+    {{/* Initialize global arguments */}}
+    {{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
+    {{- $padding := partial "utilities/GetPadding.html" -}}
+
+	{{/* Main code */}}
+	{{ $color := "" }}
+	{{ if .contrast }}{{ $color = "white" }}{{ end }}
+	{{- $raw := partial "assets/section-title.html" (dict
+		"heading" .heading
+		"justify" .justify
+		"class"   (printf "pb-%d" $padding.y))
+	-}}
+
+    {{ $raw = printf "%s%s" $raw (partial .hook (dict "action" .action "form-id" .form_id)) }}
+    {{ if $raw }}
+        {{ partial "utilities/section.html" (dict
+            "component-name" "contact-form"
+            "id"             .id
+            "raw"            $raw
+            "background"     .background
+            "width"          .width
+            "justify"        .justify
+            "wrapper"        .wrapper
+            "fluid"          .fluid
+            "theme"          .theme
+            "cover"          .cover
+            "overlay-mode"   (or .overlay_mode (index . "overlay-mode"))
+            "section-class"  (or .section_class (index . "section-class"))
+            "bg-class"       (or .bg_class (index . "bg-class"))
+        )}}
+    {{ end }}
+{{ end }}

component-library/components/contact-form/contact-form.hugo.md

@@ -0,0 +1,3 @@
+{{ with .action -}}
+Form action: {{ . }}
+{{ end -}}

component-library/components/contact-form/contact-form.yml

@@ -0,0 +1,27 @@
+comment: >-
+  Renders a contact form with an optional heading and custom form handler.
+arguments:
+  hook:
+    type: string
+    optional: false
+    comment: Render hook for the actual form.
+  action:
+    type: string
+    optional: false
+    comment: >-
+      The form submission callback URL.
+  form_id:
+    type: string
+    optional: true
+    comment: >-
+      The form's ID, which is used to retrieve the form definition.
+example: |
+  heading:
+    preheading: Get in touch
+    title: Contact Us
+    content: We'd love to hear from you.
+    align: center
+  background:
+    color: body-tertiary
+  hook: assets/netlify-contact-form-hook.html
+  action: /thank-you/

component-library/components/list/list.hugo.html

@@ -12,16 +12,28 @@
 {{/* Validate arguments */}}
 {{ $error := false }}
 {{ if not site.Params.env_bookshop_live }}
-	{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "list" "args" .) }}
-	{{ if or $args.err $args.warnmsg }}
-		{{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+    {{ $bookshop := "list" }}
+	{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" $bookshop "args" .) }}
+    {{ $err := $args.err }}
+    {{ $msg := ($args.errmsg | append $args.warnmsg) }}
+
+    {{ if and (not $err) $args.hook }}
+		{{ $hook := cond (path.Ext $args.hook) $args.hook (printf "%s.html" $args.hook)  }}
+		{{ if (not (templates.Exists (printf "_partials/%s" $hook))) }}
+			{{ $msg = $msg | append (printf "[%s] cannot find render hook '%s'" $bookshop $args.hook) }}
+			{{ $err = true }}
+		{{ end }}
+    {{ end }}
+
+	{{ if or $err $args.warnmsg }}
+		{{ partial (cond $err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
 			"partial" "component-library/components/list/list.hugo.html" 
 			"warnid"  "warn-invalid-arguments"
 			"msg"     "Invalid arguments"
-			"details" ($args.errmsg | append $args.warnmsg)
+			"details" $msg
 			"file"    page.File
 		)}}
-		{{ $error = $args.err }}
+		{{ $error = $err }}
 	{{- end -}}
 {{- end -}}