Contact Form - Getastrothemes Docs

Lumio Theme Documentation

Customizing the Contact Form

Lumio 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

Lumio’s default contact section already includes text inputs, dropdowns, searchable selects, radio buttons, a checkbox, and success/error messages:

---
form:
  emailSubject: "New contact form submission"
  submitButton:
    enable: true
    label: "Send a Message"
  inputs:
    - label: "Full Name"
      placeholder: "Full Name *"
      name: "Full Name"
      required: true
      halfWidth: true
    - label: "Email Address"
      placeholder: "Email Address *"
      name: "Email Address"
      required: true
      type: "email"
      halfWidth: true
    - label: "Subject"
      placeholder: "Subject"
      name: "Subject"
      required: true
      halfWidth: true
      dropdown:
        type: "select"
        items:
          - label: "Web Development"
            value: "Web Development"
    - label: "Message"
      tag: "textarea"
      placeholder: "Ask your question"
      name: "Message"
      required: true
      halfWidth: false
---

Step 3: Add a New Input Field

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

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

You can also add:

dropdown.type: "select" for a standard select
dropdown.type: "search" for the searchable dropdown UI
radio or checkbox fields using type, group, and groupLabel

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"

Lumio’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.
Success/error notices at the end of the inputs array can be customized too.