Docs

Contact Form

Use the contact form content block to display a contact form with server-side forms integration.
Overview   Netlify Contact Form   Illustrated Contact Form   Arguments   Background Type   Heading Type   Illustration Type  

Overview  

The contact-form content block renders a contact form powered by a form provider of your choice. Provide a render hook and action to link your custom form and callback action to the content block.

Netlify Contact Form  

Netlify Forms  provides serverless form handling, allowing you to manage forms without extra API calls or additional JavaScript. You can enable form detection by including a data-netlify or netlify attribute.

The following render hook uses automatic form detection by Netlify. The form itself includes fields for name, email address, and a message. It uses a honeypot field and reCAPTCHA v2 to reduce spam submissions.

{{ $error := false }}

{{/* Initialize arguments */}}
{{ $args := partial "utilities/InitArgs.html" (dict "structure" "form-hook" "args" . "group" "partial") }}
{{ if or $args.err $args.warnmsg }}
    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
        "partial" "assets/netlify-contact-form-hook.html" 
        "warnid"  "warn-invalid-arguments"
        "msg"     "Invalid arguments"
        "details" ($args.errmsg | append $args.warnmsg)
        "file"    page.File
    )}}
    {{ $error = $args.err }}
{{ end }}

{{ if not $error }}
    {{- $formSubmitButton := partial "utilities/GetThemeIcon.html" (dict "id" "formSubmitButton" "default" "fa paper-plane") -}}
    <form
        name="contact"
        action="{{ $args.action }}"
        method="POST"
        data-netlify="false"
        netlify-honeypot="bot-field"
        data-netlify-recaptcha="true"
        class="row g-3"
    >
        <div class="hidden">
            <label>{{ T "formBotField" }}: <input name="bot-field" type="text" /></label>
        </div>        
        <div class="col-md-12 form-floating">
            <input id="inputName" type="text" class="form-control" placeholder="{{ T "formName" }}*" aria-label="{{ T "formName" }}" name="name" required>
            <label for="inputName">{{ T "formName" }}*</label>
        </div>
        <div class="col-md-12 form-floating">
            <input id="inputEmail" type="email" class="form-control" placeholder="{{ T "formEmail" }}*" aria-label="{{ T "formEmail" }}" name="email" required>
            <label for="inputEmail">{{ T "formEmail" }}*</label>
        </div>
        <div class="col-md-12 form-floating">
            <textarea id="inputMessage" class="form-control" placeholder="{{ T "formMessage" }}*" aria-label="{{ T "formMessage" }}" name="message" required></textarea>
            <label for="inputMessage">{{ T "formMessage" }}*</label>
        </div>
        <div data-netlify-recaptcha="true"></div>
        <div class="col-12">
            <button class="btn btn-primary" type="submit">{{ T "formSubmit" }}&nbsp;{{ partial "assets/icon.html" (dict "icon" $formSubmitButton) }}</button>
        </div>
    </form>
{{ end }}

  Important

The render hook example sets data-netlify="false" to reduce noise on the current website. Set it to true to enable automatic form detection by Netlify.

Assign the render hook and callback action using the hook and action arguments:

Get in Touch

Contact Us
We’d love to hear from you. Send us a message and we’ll respond as soon as possible.
yml 
- _bookshop_name: contact-form
  heading:
    preheading: Get in touch
    title: Contact Us
    content: We'd love to hear from you. Send us a message and we'll respond as soon as possible.
  hook: assets/netlify-contact-form-hook.html
  action: #!
  background:
    color: body-tertiary
    subtle: false

Illustrated Contact Form  

You can render an illustrated contact form by assigning a value to illustration:

Get in Touch

Contact Us
We’d love to hear from you. Send us a message and we’ll respond as soon as possible.
Hero image
yml 
- _bookshop_name: contact-form
  heading:
    preheading: Get in touch
    title: Contact Us
    content: We'd love to hear from you. Send us a message and we'll respond as soon as possible.
  illustration:
    image: /img/placeholder.png
    class: d-none d-md-block
  hook: assets/netlify-contact-form-hook.html
  action: #!
  background:
    color: body-tertiary
    subtle: false

Arguments  

The content block supports the following arguments:

Name Type Required Default Comment
_bookshop_name string Alias for _bookshop_name.
_ordinal int Zero-based position of the bookshop component within the page’s component hierarchy.
action string yes The form submission callback URL.
background background, string Background style of the section.
bg_class string Background class attributes of the element. It supports Bootstrap attributes to modify the background styling of the element.
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
cover bool Flag indicating if the element should be rendered fullscreen.
fluid bool true Flag to set the section container to fluid design, else the section is limited to xxl.
form_id string The form’s ID, which is used to retrieve the form definition.
heading Heading Heading of the content block, including a preheading and content element.
hook string yes Render hook for the actual form.
id string Unique identifier of the current element.
illustration Illustration Featured illustration of the element.
justify select start Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
order select last Order of the illustration. Supported values: [first, last].
overlay_mode select Overlay mode of the element, overrides the site’s general configuration. Supported values: [light, dark, none].
responsive bool true Flag indicating if the element should be responsive.
section_class string Section class attributes of the element. It supports Bootstrap attributes to modify the section styling of the element.
theme select Color theme to apply to the element. Supported values: [light, dark].
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container.
wrapper string Class attribute of the element’s wrapper. It supports Bootstrap attributes to modify the styling of the element. Icons include the fa-wrapper and fa-fluid attributes by default.
Name Type Required Default
_bookshop_name string
Alias for _bookshop_name.
_ordinal int
Zero-based position of the bookshop component within the page’s component hierarchy.
action string yes
The form submission callback URL.
background background, string
Background style of the section.
bg_class string
Background class attributes of the element. It supports Bootstrap attributes to modify the background styling of the element.
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
cover bool
Flag indicating if the element should be rendered fullscreen.
fluid bool true
Flag to set the section container to fluid design, else the section is limited to xxl.
form_id string
The form’s ID, which is used to retrieve the form definition.
heading Heading
Heading of the content block, including a preheading and content element.
hook string yes
Render hook for the actual form.
id string
Unique identifier of the current element.
illustration Illustration
Featured illustration of the element.
justify select start
Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
order select last
Order of the illustration. Supported values: [first, last].
overlay_mode select
Overlay mode of the element, overrides the site’s general configuration. Supported values: [light, dark, none].
responsive bool true
Flag indicating if the element should be responsive.
section_class string
Section class attributes of the element. It supports Bootstrap attributes to modify the section styling of the element.
theme select
Color theme to apply to the element. Supported values: [light, dark].
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container.
wrapper string
Class attribute of the element’s wrapper. It supports Bootstrap attributes to modify the styling of the element. Icons include the fa-wrapper and fa-fluid attributes by default.

Background Type  

Name Type Required Default Comment
backdrop string Background image with a mask to improve contrast.
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
subtle bool Apply subtle theme colors.
Name Type Required Default
backdrop string
Background image with a mask to improve contrast.
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
subtle bool
Apply subtle theme colors.

Heading Type  

Name Type Required Default Comment
align select start Alignment of the headline, content, or icon. Supported values: [start, center, end].
arrangement select above Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first].
content string, template.HTML Section content displayed below the title.
preheading string Preheading of the section heading.
size int 4 Display size of the headline.
title string, hstring.RenderedString, hstring.HTML, template.HTML Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container.
Name Type Required Default
align select start
Alignment of the headline, content, or icon. Supported values: [start, center, end].
arrangement select above
Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first].
content string, template.HTML
Section content displayed below the title.
preheading string
Preheading of the section heading.
size int 4
Display size of the headline.
title string, hstring.RenderedString, hstring.HTML, template.HTML
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container.

Illustration Type  

Name Type Required Default Comment
anchor select Anchor of the image’s crop box, defaults to anchor value set in imaging section of the site configuration (usually Smart). Supported values: [TopLeft, Top, TopRight, Left, Center, Right, BottomLeft, Bottom, BottomRight, Smart].
caption string Caption of the carousel slide or illustration.
caption-url string, template.URL Address of the caption destination, either a local reference or an external address. Include the scheme when referencing an external address, such as https://google.com. Local references may include an optional anchor link such as blog/bootstrap-elements/#docs.
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
hook string Render hook for the element’s partial.
icon string, uint64 Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension.
image string Image to include in the content block or section heading.
image-overlay bool Trigger to include an image overlay placeholder.
justify select start Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
mode bool Flag indicating if the media asset should support color modes. If set, the element searches for images having a matching color-mode suffix such as -light or -dark.
ratio select Ratio of the media asset. When the asset is an image, it is resized and cropped (not applicable to vector graphics). For video assets, the padding of the embedded frame is adjusted. When set to auto, the original aspect ratio is used. Supported values: [1x1, 3x1, 3x2, 4x3, 16x9, 21x9, auto].
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container.
Name Type Required Default
anchor select
Anchor of the image’s crop box, defaults to anchor value set in imaging section of the site configuration (usually Smart). Supported values: [TopLeft, Top, TopRight, Left, Center, Right, BottomLeft, Bottom, BottomRight, Smart].
caption string
Caption of the carousel slide or illustration.
caption-url string, template.URL
Address of the caption destination, either a local reference or an external address. Include the scheme when referencing an external address, such as https://google.com. Local references may include an optional anchor link such as blog/bootstrap-elements/#docs.
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
hook string
Render hook for the element’s partial.
icon string, uint64
Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension.
image string
Image to include in the content block or section heading.
image-overlay bool
Trigger to include an image overlay placeholder.
justify select start
Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
mode bool
Flag indicating if the media asset should support color modes. If set, the element searches for images having a matching color-mode suffix such as -light or -dark.
ratio select
Ratio of the media asset. When the asset is an image, it is resized and cropped (not applicable to vector graphics). For video assets, the padding of the embedded frame is adjusted. When set to auto, the original aspect ratio is used. Supported values: [1x1, 3x1, 3x2, 4x3, 16x9, 21x9, auto].
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container.
On this page