# Forms (Contact & Newsletter)

## Forms

**Files:** `src/config/config.toml`, `src/content/contact/english/-index.md`, `src/content/sections/english/` · **Skill level:** Beginner

Consultiz is a static site, so its forms send data to a service you choose. Every form ships **disconnected**: until you give it an endpoint, its submit button is disabled and it shows a "not configured" message. No visitor data is sent anywhere by default.

| Form                               | Where it appears                                    | Endpoint                                                      |
| ---------------------------------- | --------------------------------------------------- | ------------------------------------------------------------- |
| Contact forms                      | `/contact/`, the main homepage contact section, `/solutions/` | `contactFormAction` in `config.toml` (Formsubmit, Formspree, or Netlify Forms) |
| Consultation form                  | Tax and accounting homepage hero                    | `contactFormAction`, or `serviceHero.form.action`             |
| Footer newsletter                  | Homepage footer and corporate "office" footer       | `[settings.subscription] formAction` (Mailchimp)              |
| Newsletter section                 | Contact, pricing, FAQ, people, careers, legal pages, the corporate homepage, solution and industry layouts | `formAction` in `src/content/sections/english/newsletter.md` |
| Newsletter strip                   | Tax and accounting homepage                         | `serviceContactStrip.formAction`                              |

### Connect The Contact Forms
Pick a provider and set both lines in `config.toml`:

<Tabs>
  <TabItem label="Formsubmit (default)">

    Free, no account needed. Messages arrive by email.

    ```toml
    [settings]
      contactFormAction   = "https://formsubmit.co/you@example.com"
      contactFormProvider = "formsubmit.co"
    ```

    The first message you send triggers an **activation email** from Formsubmit. Open it and confirm, or later messages won't be delivered.

  </TabItem>
  <TabItem label="Formspree">

    Create a form at [formspree.io](https://formspree.io/) and copy its endpoint.

    ```toml
    [settings]
      contactFormAction   = "https://formspree.io/f/your-form-id"
      contactFormProvider = "formspree"
    ```

  </TabItem>
  <TabItem label="Netlify Forms">

    Only when the site is hosted on Netlify. Netlify detects the form at deploy time.

    ```toml
    [settings]
      contactFormAction   = "/"
      contactFormProvider = "netlify"
    ```

    The theme adds Netlify's detection attribute and the `form-name` field for you. Turn on form detection in the Netlify dashboard (**Forms**), deploy, and send a test message.

  </TabItem>
</Tabs>

After launch, send one real message from the live site to make sure it arrives. Then update or remove any "not connected yet" note near a form, such as `formNote` in `src/content/sections/english/contact-image-form.md`.

### A Different Endpoint For One Form
Add `action` inside a form's `form` block to override `contactFormAction` for that form only. The provider still comes from `contactFormProvider`.

```yaml
form:
  action: "https://formspree.io/f/another-form-id"
  # keep the existing inputs, submitButton, and message notes below
```

Leave `action` out to use the global endpoint. An empty `action: ""` disables that form.

### Change The Contact Form Fields
The fields of the `/contact/` form are in the contact page's file, `src/content/contact/english/-index.md`, under `form.inputs`. The homepage form's fields are in `src/content/sections/english/contact-image-form.md`.

```yaml
form:
  emailSubject: "New contact enquiry from the website"   # subject of the email you receive
  submitButton:
    enable: true
    tag: "button"
    buttonType: "submit"
    label: "Submit enquiry"
  inputs:
    - label: "Full Name"
      name: "Full Name"          # the field name your form service receives
      required: true
      halfWidth: true            # two fields per row on large screens
    - label: "Email Address"
      name: "Email Address"
      type: "email"
      required: true
      halfWidth: true
    - label: "Message"
      name: "Message"
      tag: "textarea"
      rows: "4"
      required: true
```

| Field type        | How to write it                                                              |
| ----------------- | ---------------------------------------------------------------------------- |
| Text              | No `type`, or `type: "text"`                                                 |
| Email, phone      | `type: "email"`, `type: "tel"`                                               |
| Long text         | `tag: "textarea"` and `rows`                                                 |
| Dropdown          | `dropdown:` with `type` (`select` or `search`) and `items` (`label`, `value`) |
| Checkbox group    | Several `type: "checkbox"` items with the same `group`; the first one sets `groupLabel` |
| Single checkbox   | `type: "checkbox"` with a `value`, for a consent box                         |

Other options: `required`, `halfWidth`, `placeholder`, `defaultValue`, and `minLength`.

The last two items of `inputs` are not fields: the one with `note: success` holds the message shown after a message is sent, and the one with `note: deprecated` the message shown when sending fails. Edit their `content` to change the wording. Shared messages (sending, timeout, not configured, validation) are under `contactForm` in `src/i18n/en.json` and `fr.json`.

### The Tax And Accounting Forms
The tax and accounting homepage has a consultation form in its hero and a newsletter in its contact strip, both in `src/content/homepage/english/tax-accounting.md`:

```yaml
serviceHero:
  form:
    enable: true                 # false hides the form, the hero stays
    # action: ""                 # omit to use contactFormAction; "" disables
    emailFieldName: "business-email"
    emailRequired: true
    serviceRequired: true
    hiddenFields: []             # public fields your provider needs
    unavailableMessage: "Consultation requests are not available yet. Please use our contact page."
    services:                    # the service selector; [] removes it
      - label: "Tax Advisory & Planning"
        value: "tax-advisory-planning"
```

These forms submit with a normal HTML post, so they work without JavaScript and your provider shows its own thank-you page (or redirects where you set it up). The contact strip's newsletter has its own `serviceContactStrip.formAction`, `emailFieldName`, and `hiddenFields`; `subscribeEnable: false` hides only the signup.

### Connect The Footer Newsletter (Mailchimp)
<Steps>

1. In Mailchimp, open **Audience → Signup forms → Embedded forms**.

2. In the embed code, find `<form action="...">` and copy the URL. It looks like `https://xxxx.us21.list-manage.com/subscribe/post?u=...&amp;id=...`.

3. Paste it into `config.toml`, then change every `&amp;` to a plain `&`:

   ```toml
   [settings.subscription]
     enable     = true
     formAction = "https://xxxx.us21.list-manage.com/subscribe/post?u=abc123&id=def456&f_id=0012ab"
   ```

4. Optional: `mailchimpTagValue` adds a Mailchimp tag (its numeric ID) to every new subscriber.

5. After you deploy, subscribe once with a test address and check that it appears in your audience.

</Steps>

The form subscribes visitors without leaving the page, and adds Mailchimp's bot-protection field for you. Its title and note come from `footer-newsletter-grid.md` on the homepage and from `subscription` in the i18n files in the corporate footer; `title` and `note` in `[settings.subscription]` override both.

### Connect The Newsletter Section
The newsletter section on inner pages is separate from the footer form. Its settings are in `src/content/sections/english/newsletter.md` (and `french/`):

```yaml
formAction: "#"              # your provider's form action; "#" or empty keeps signup disabled
emailFieldName: "email"      # for example "EMAIL" if your provider needs it
hiddenFields: []             # extra public fields, such as a list tag
# hiddenFields:
#   - name: "tags"
#     value: "your-public-list-tag"
unavailableMessage: "Email sign-up is not available yet."
```

Use the exact field names your email provider expects. A page can override any of these in its `newsletterSection` block.

<Aside type="caution">
  Hidden fields are visible in the page source. Never put an API key, a
  password, or any private value in a form field.
</Aside>