# Contact Form

## Customizing the Contact Form

Techlo includes a built-in contact form with support for [Formspree](https://formspree.io/), [FormSubmit](https://formsubmit.co/), and [Netlify Forms](https://docs.netlify.com/forms/setup/).

You can edit the fields directly in Markdown frontmatter and change the form provider from `src/config/config.toml`.

---

### How to Add a New Form Input

#### Step 1: Locate the Contact Form Markdown File

The contact form fields are driven by:

```md
src/content/sections/<language>/contact-section.md
```

#### Step 2: Edit the Form Fields in Markdown Frontmatter

In the Tina edition, these fields are under **Form** in **Contact section**, in **Section defaults** at `/admin/`. In the Sanity edition, they are in **Contact section**, under **Sections** in the Studio. The contact form's fields are shared by every contact form.

Techlo’s default contact section already includes text inputs, a number and date field, a searchable select, radio buttons, checkboxes, a message box, and a submit button. This is a shortened copy:

```yaml
---
form:
  emailSubject: "New form submission from your website"
  submitButton:
    enable: true
    label: "Send Message"
    hoverEffect: "magnetic-text-flip"
  inputs:
    - label: "Your name"
      name: "Name"
      placeholder: "Your name"
      required: true
      halfWidth: true
    - label: "Email address"
      name: "Email"
      placeholder: "Email address"
      type: "email"
      required: true
      halfWidth: true
    - label: "Estimated budget"
      name: "Budget"
      placeholder: "Estimated budget"
      type: "number"
      halfWidth: true
    - label: "Service interest"
      name: "Service"
      placeholder: "Select a service"
      required: true
      dropdown:
        type: "search"
        search:
          placeholder: "Search service"
        items:
          - label: "Cloud Infrastructure"
            value: "Cloud Infrastructure"
          - label: "Cybersecurity Review"
            value: "Cybersecurity Review"
---
```

#### Step 3: Add a New Input Field

To add a new field, append another object under `form.inputs`. Example:

```yaml
- label: "Website"
  name: "Website"
  placeholder: "Website URL"
  type: "text"
  required: false
  halfWidth: true
```

You can also add:

- `dropdown.type: "select"` for a standard select
- `dropdown.type: "search"` for the searchable dropdown UI
- a `textarea` field by setting `tag: "textarea"`

---

### Changing the Email for Form Submissions

Open `src/config/config.toml` and locate these settings. They ship with a placeholder address, and the build does not warn you, so set your own before you launch. In the Tina and Sanity editions, they are under **Settings** in **Site settings**.

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

#### Provider Examples

##### ▶ For FormSubmit

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

##### ▶ For Formspree

```toml
[settings]
  contactFormAction = "https://formspree.io/f/your_form_id"
  contactFormProvider = "formspree"
```

##### ▶ For Netlify

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

Techlo’s form component reads those values in `src/layouts/components/widgets/ContactForm.astro`.

#### Bonus Tips

- Keep `name` values meaningful because those are the submitted field keys.
- `required` and `type` use normal HTML validation behavior.
- The optional `note` at the end of the form (and the `formTitle` / `formDescription` headings) can be customized in the same Markdown file.

<Aside type="tip">
  If you're using Formspree or FormSubmit, remember to verify the target email
  or endpoint on the provider side before going live.
</Aside>