Contact Form - Getastrothemes Docs

Techlo Theme Documentation

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

Techlo’s default contact section already includes text inputs, a number and date field, a searchable select, and a submit button:

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

[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/yourformid"
  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.