# Contact Form

## Customizing the Contact Form

All of our themes come with a built-in contact form that supports popular form handling providers like [Formspree](https://formspree.io/), [FormSubmit](https://formsubmit.co/), and [Netlify Forms](https://docs.netlify.com/forms/setup/).

You can easily customize the form fields or change the submission email address without writing JavaScript or server-side code.

---

### How to Add a New Form Input

To modify the fields shown in the contact form (like adding a new input), follow the steps below:

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

The contact form fields are controlled by a Markdown file located at:

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

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

Here’s an example of what the default frontmatter might look like:

```yaml
---
enable: true
title: "Contact Us for More Information"
description: "Whether you're seeking expert assistance, our dedicated team is prepared to support you every step of the way."
subtitle: "Contact"

# Check config.toml file for form action related settings
form:
  emailSubject: "New form submission from looka website"
  submitButton:
    label: "Submit Your Response"
    showIcon: "true"
    variant: "outline" # "fill", "outline", "outline-white", "text"
  inputs:
    - label: ""
      placeholder: "Full Name"
      name: "Full Name" # Indicates under which name you receive this field's data
      required: true
      halfWidth: true
    - label: ""
      placeholder: "Email Address"
      name: "Email Address"
      required: true
      type: "email"
      halfWidth: true
    - label: ""
      tag: "textarea"
      rows: "4"
      placeholder: "Enter your message."
      name: "Message"
      required: true
      halfWidth: false
---
```

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

To add a new input field (e.g., for a phone number), add another object under `form.inputs`. Here's how you can add a `tel` input:

```yaml
- label: ""
  placeholder: "Phone Number"
  name: "Phone Number"
  required: false
  type: "tel"
  halfWidth: true
```

> Use `type` for standard inputs (`text`, `email`, `tel`, `url`, `radio`, `checkbox`). For a multi-line message field, set `tag: "textarea"` instead of a `type` (as shown in the example above). Looka also supports a `dropdown` block for select/searchable fields — see `src/content/sections/english/contact-section.md` for the full set of field options.

---

### Changing the Email for Form Submissions

To change where form submissions are sent, update the `config.toml` file:

#### Step 1: Open `src/config/config.toml`

Look for the following settings:

```toml
# Form action URL for the contact form
[settings]
  contactFormAction = "https://formsubmit.co/temp.gats@gmail.com"
  contactFormProvider = "formsubmit.co" # formsubmit.co | formspree | netlify
```

#### Step 2: Update the Email in the Form Action URL

Change the `contactFormAction` to match the provider you're using:

##### ▶ For FormSubmit (default)

Update the email in the URL:

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

##### ▶ For Formspree

Use your Formspree endpoint (you'll get this after creating a form):

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

##### ▶ For Netlify

If you’re deploying to Netlify and want to use Netlify Forms:

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

Make sure your site is deployed to Netlify and includes a `name` attribute on the `<form>` element (already handled by the theme layout).

---

#### Bonus Tips

- All input types respect HTML5 validation based on the `required` and `type` values.
- The `label`, `name`, and `placeholder` fields are fully customizable.

<Aside type="tip">
  If you're using Formspree or FormSubmit, don't forget to `verify the email` on
  their platform to start receiving submissions.
</Aside>