Contact Form - Getastrothemes Docs

Common Documentation

Customizing the Contact Form

All of our themes come with a built-in contact form that supports popular form handling providers like Formspree, FormSubmit, and Netlify Forms.

You can easily customize the form fields 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:

src/content/sections/contact-section.md

Step 2: Edit the Form Fields in Markdown Frontmatter

Here’s an example of what the default frontmatter might look like:

enable: true
title: "Let’s Connect"
description: "Fill out the form below and we’ll get back to you as soon as possible."

form_fields:
  - type: "text"
    name: "name"
    label: "Your Name"
    placeholder: "John Doe"
    required: true

  - type: "email"
    name: "email"
    label: "Your Email"
    placeholder: "[email protected]"
    required: true

  - type: "textarea"
    name: "message"
    label: "Your Message"
    placeholder: "Write your message here..."
    required: true

Step 3: Add a New Input Field

To add a new input field (e.g., for a phone number), add another object under form_fields. Here’s how you can add a tel input:

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

# Form action URL for the contact form
contact_form_action = "https://formsubmit.co/[email protected]"

# Available options: formsubmit.co, formspree, netlify
contact_form_provider = "formsubmit.co"

Step 2: Update the Email in the Form Action URL

Change the contact_form_action to match the provider you’re using:

▶ For FormSubmit (default)

Update the email in the URL:

contact_form_action = "https://formsubmit.co/[email protected]"
contact_form_provider = "formsubmit.co"

▶ For Formspree

Use your Formspree endpoint (you’ll get this after creating a form):

contact_form_action = "https://formspree.io/f/yourformid"
contact_form_provider = "formspree"

▶ For Netlify

If you’re deploying to Netlify and want to use Netlify Forms:

contact_form_action = "/"
contact_form_provider = "netlify"

Make sure your site is deployed to Netlify and includes a name attribute on the <form> element (already handled by the theme layout).

Bonus Tips

All input types respect HTML5 validation based on the required and type values.
The label, name, and placeholder fields are fully customizable.