Contact Form

Customizing the Contact Form

Techlo includes a built-in contact form with support for Formspree, FormSubmit, and Netlify Forms.

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:

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:

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

- 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.

[settings]
  contactFormAction = "https://formsubmit.co/[email protected]"
  contactFormProvider = "formsubmit.co"

Provider Examples

▶ For FormSubmit

[settings]
  contactFormAction = "https://formsubmit.co/[email protected]"
  contactFormProvider = "formsubmit.co"

▶ For Formspree

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

▶ For Netlify

[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.