# Contact Form
## Customizing the Contact Form
Finzo 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 inputs 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/english/contact-section.md
```
#### Step 2: Edit the Form Inputs in Markdown Frontmatter
Here’s an example of what the default frontmatter might look like:
```yaml
# Check config.toml file for form action related settings
form:
emailSubject: "New form submission from finzo website" # Customized email subject (applicable when anyone submit form, form submission may receive by email depend on provider)
submitButton:
# Refer to the `sharedButton` schema in `src/sections.schema.ts` for all available configuration options (e.g., enable, label, url, hoverEffect, variant, icon, tag, rel, class, target, etc.)
enable: true
label: "SEND MESSAGE"
# hoverEffect: "" # Optional: text-flip | creative-fill | magnetic | magnetic-text-flip
# variant: "" # Optional: fill | outline | text
# rel: "" # Optional
# target: "" # Optional
# This note will show at the end of form
# note: |
# Your data is safe with us. We respect your privacy and never share your information.
Read our [Privacy Policy](/privacy-policy/).
inputs:
- label: ""
placeholder: "John *"
name: "Full Name" # This is crucial. Its indicate under which name you want to receive this field data
required: true
halfWidth: true
defaultValue: ""
- label: ""
placeholder: "Doe *"
name: "Full Name" # This is crucial. Its indicate under which name you want to receive this field data
required: true
halfWidth: true
defaultValue: ""
- label: ""
placeholder: "john@ko.eoo *"
name: "Email Address" # This is crucial. Its indicate under which name you want to receive this field data
required: true
type: "email"
halfWidth: false
defaultValue: ""
- label: ""
placeholder: "Subject *"
name: "Subject" # This is crucial. Its indicate under which name you want to receive this field data
required: false
halfWidth: true
dropdown:
type: "" # select | search - default is select
search: # if type is search then it will work
placeholder: ""
items:
- label: "General Inquiry"
value: "General Inquiry"
selected: false
- label: "Partnership"
value: "Partnership"
selected: false
- label: "Investment"
value: "Investment"
selected: false
- label: ""
placeholder: "Subject With Search *"
name: "Subject With Search" # This is crucial. Its indicate under which name you want to receive this field data
required: false
halfWidth: true
dropdown:
type: "search" # select | search - default is select
search: # if type is search then it will work
placeholder: "Subject With Search"
items:
- label: "General Inquiry"
value: "General Inquiry"
selected: false
- label: "Partnership"
value: "Partnership"
selected: false
- label: "Career"
value: "Career"
selected: false
- label: "Investment"
value: "Investment"
selected: false
- label: "Media Inquiry"
value: "Media Inquiry"
selected: false
- label: ""
tag: "textarea"
defaultValue: ""
rows: "2" # Only work if tag is textarea
placeholder: "How can we help you *"
name: "Message" # This is crucial. Its indicate under which name you want to receive this field data
required: true
halfWidth: false
- label: "Google Search" # only valid for type="checkbox" & type === "radio"
checked: false # only valid for type="checkbox" & type === "radio"
name: "User Source" # This is crucial. Its indicate under which name you want to receive this field data
required: true
groupLabel: "How did you hear about us?" # Radio Inputs Label
group: "source" # when you add group then it will omit space between the same group radio input
type: "radio"
halfWidth: true
defaultValue: ""
- label: "Social Media" # only valid for type="checkbox" & type === "radio"
name: "User Source" # This is crucial. Its indicate under which name you want to receive this field data
required: true
groupLabel: "" # Radio Inputs Label
group: "source" # when you add group then it will omit space between the same group radio input
type: "radio"
halfWidth: true
defaultValue: ""
# - label: "Referral" # only valid for type="checkbox" & type === "radio"
# name: "User Source" # This is crucial. Its indicate under which name you want to receive this field data
# required: true
# groupLabel: "" # Radio Inputs Label
# group: "source" # when you add group then it will omit space between the same group radio input
# type: "radio"
# halfWidth: true
# defaultValue: ""
# - label: "Other" # only valid for type="checkbox" & type === "radio"
# name: "User Source" # This is crucial. Its indicate under which name you want to receive this field data
# required: true
# groupLabel: "" # Radio Inputs Label
# group: "source" # when you add group then it will omit space between the same group radio input
# type: "radio"
# halfWidth: true
# defaultValue: ""
- label: "I agree to the terms and conditions and [privacy policy](/contact/)." # only valid for type="checkbox" & type === "radio"
id: "privacy-policy"
name: "Agreed Privacy" # This is crucial. Its indicate under which name you want to receive this field data
value: "Agreed" # Value that will be submit (applicable for type="checkbox" & type === "radio")
checked: false # only valid for type="checkbox" & type === "radio"
required: true
type: "checkbox"
halfWidth: false
defaultValue: ""
- note: success # info | warning | success | deprecated | hint
parentClass: "hidden text-sm message success"
content: We have received your message! We'll get back to you as soon as possible.
- note: deprecated # info | warning | success | deprecated | hint
parentClass: "hidden text-sm message error"
content: Something went wrong! please use this mail - [finzo-astro-theme@gmail.com](mailto:finzo-astro-theme@gmail.com) to submit a ticket!
```
#### Step 3: Add a New Input Field
To add a new input field (e.g., for a phone number), add another object under `inputs`. Here's how you can add a `tel` input:
```yaml
- type: "tel"
name: "phone"
label: "Your Phone Number"
placeholder: "+1 555 123 4567"
required: false
```
> You can use any standard input `type`: `text`, `email`, `tel`, `url`, `textarea`, etc.
---
### 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
contactFormAction = "https://formsubmit.co/temp.gats@gmail.com"
# Available options: formsubmit.co, formspree, netlify
contactFormProvider = "formsubmit.co"
```
#### 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
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
contactFormAction = "https://formspree.io/f/yourformid"
contactFormProvider = "formspree"
```
##### ▶ For Netlify
If you’re deploying to Netlify and want to use Netlify Forms:
```toml
contactFormAction = "/"
contactFormProvider = "netlify"
```
Make sure your site is deployed to Netlify and includes a `name` attribute on the `