# Contact form

Use the contact form content block to display a contact form with server-side forms integration.

## 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](https://www.netlify.com/products/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.

```html
{{ $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:

```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`:

```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 | Description |
| --- | --- | --- | --- | --- |
| `action` | string | yes |  | Callback url to include in form submissions. |
| `background` | background |  |  | 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 | yes |  | 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 |  |  | Render hook for the element's partial. |
| `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. |