Skip to content
Type something to search...
to navigateto selectESC to close
Ultimate Astro Theme GuidesDocs
Techbyte Theme Documentation

Customizing the Contact Form

Techbyte 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

Techbyte’s default contact section includes text inputs, a standard select, a searchable select, and a submit button. It also renders the contact info list, whose items pull live values from settings.contactInfo in config.toml via settingFieldName:

---
enable: true
badge: "CONTACT US"
title: "Have Questions? Get in Touch!"
list:
  - icon: "Navigation"
    settingFieldName: "address"
  - icon: "Phone"
    settingFieldName: "phone"
  - icon: "MailCheck"
    settingFieldName: "email"
form:
  emailSubject: "New form submission from Techbyte website"
  submitButton:
    enable: true
    label: "Send Message"
    icon:
      enable: true
      name: "ArrowUpRight"
      position: "right"
  inputs:
    - label: ""
      placeholder: "Full Name *"
      name: "Full Name"
      required: true
      halfWidth: true
    - label: ""
      placeholder: "Email Address *"
      name: "Email Address"
      required: true
      type: "email"
      halfWidth: true
    - label: ""
      placeholder: "Project Type *"
      name: "Project Type"
      halfWidth: true
      dropdown:
        type: "search"
        search:
          placeholder: "Search project type"
        items:
          - label: "Managed Services"
            value: "Managed Services"
          - label: "Security Assessment"
            value: "Security Assessment"
---

Step 3: Add a New Input Field

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

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

You can also add:

  • dropdown.type: "" 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"

Techbyte’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 map shown on the contact page comes from settings.contactInfo.mapLink in config.toml (a Google Maps embed URL).