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

Customizing the Contact Form

Stella 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 inputs 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/english/contact-section.md

Step 2: Edit the Form Inputs in Markdown Frontmatter

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

# Check config.toml file for form action related settings
# this is also used in the footer of the personal portfolio homepage
form:
  emailSubject: "New form submission from folex website" # Customized email subject (applicable when anyone submit form, form submission may receive by email depend on provider)
  submitButton:
    # Refer to the `sharedButton` schema in `src/sections.schema.ts` for all available configuration options (e.g., enable, label, url, hoverEffect, variant, icon, tag, rel, class, target, etc.)
    enable: true
    label: "SEND MESSAGE"
    # hoverEffect: "" # Optional: text-flip | creative-fill | magnetic | magnetic-text-flip
    # variant: "" # Optional: fill | outline | text
    # rel: "" # Optional
    # target: "" # Optional


  # This note will show at the end of form
  # note: |
  #   Your data is safe with us. We respect your privacy and never share your information. <br /> Read our [Privacy Policy](/privacy-policy/).
  inputs:
    - label: ""
      placeholder: "John *"
      name: "Full Name" # This is crucial. Its indicate under which name you want to receive this field data
      required: true
      halfWidth: true
      defaultValue: ""
    - label: ""
      placeholder: "Doe *"
      name: "Full Name" # This is crucial. Its indicate under which name you want to receive this field data
      required: true
      halfWidth: true
      defaultValue: ""
    - label: ""
      placeholder: "[email protected] *"
      name: "Email Address" # This is crucial. Its indicate under which name you want to receive this field data
      required: true
      type: "email"
      halfWidth: false
      defaultValue: ""
    - label: ""
      placeholder: "Subject *"
      name: "Subject" # This is crucial. Its indicate under which name you want to receive this field data
      required: false
      halfWidth: true
      dropdown:
        type: "" # select | search - default is select
        search: # if type is search then it will work
          placeholder: ""
        items:
          - label: "General Inquiry"
            value: "General Inquiry"
            selected: false
          - label: "Partnership"
            value: "Partnership"
            selected: false
          - label: "Investment"
            value: "Investment"
            selected: false
    - label: ""
      placeholder: "Subject With Search *"
      name: "Subject With Search" # This is crucial. Its indicate under which name you want to receive this field data
      required: false
      halfWidth: true
      dropdown:
        type: "search" # select | search - default is select
        search: # if type is search then it will work
          placeholder: "Subject With Search"
        items:
          - label: "General Inquiry"
            value: "General Inquiry"
            selected: false
          - label: "Partnership"
            value: "Partnership"
            selected: false
          - label: "Career"
            value: "Career"
            selected: false
          - label: "Investment"
            value: "Investment"
            selected: false
          - label: "Media Inquiry"
            value: "Media Inquiry"
            selected: false
    - label: ""
      tag: "textarea"
      defaultValue: ""
      rows: "2" # Only work if tag is textarea
      placeholder: "How can we help you *"
      name: "Message" # This is crucial. Its indicate under which name you want to receive this field data
      required: true
      halfWidth: false
    - label: "Google Search" # only valid for type="checkbox" & type === "radio"
      checked: false # only valid for type="checkbox" & type === "radio"
      name: "User Source" # This is crucial. Its indicate under which name you want to receive this field data
      required: true
      groupLabel: "How did you hear about us?" # Radio Inputs Label
      group: "source" # when you add group then it will omit space between the same group radio input
      type: "radio"
      halfWidth: true
      defaultValue: ""
    - label: "Social Media" # only valid for type="checkbox" & type === "radio"
      name: "User Source" # This is crucial. Its indicate under which name you want to receive this field data
      required: true
      groupLabel: "" # Radio Inputs Label
      group: "source" # when you add group then it will omit space between the same group radio input
      type: "radio"
      halfWidth: true
      defaultValue: ""
    # - label: "Referral" # only valid for type="checkbox" & type === "radio"
    #   name: "User Source" # This is crucial. Its indicate under which name you want to receive this field data
    #   required: true
    #   groupLabel: "" # Radio Inputs Label
    #   group: "source" # when you add group then it will omit space between the same group radio input
    #   type: "radio"
    #   halfWidth: true
    #   defaultValue: ""
    # - label: "Other" # only valid for type="checkbox" & type === "radio"
    #   name: "User Source" # This is crucial. Its indicate under which name you want to receive this field data
    #   required: true
    #   groupLabel: "" # Radio Inputs Label
    #   group: "source" # when you add group then it will omit space between the same group radio input
    #   type: "radio"
    #   halfWidth: true
    #   defaultValue: ""
    - label: "I agree to the terms and conditions and [privacy policy](/contact/)." # only valid for type="checkbox" & type === "radio"
      id: "privacy-policy"
      name: "Agreed Privacy" # This is crucial. Its indicate under which name you want to receive this field data
      value: "Agreed" # Value that will be submit (applicable for type="checkbox" & type === "radio")
      checked: false # only valid for type="checkbox" & type === "radio"
      required: true
      type: "checkbox"
      halfWidth: false
      defaultValue: ""
    - note: success # info | warning | success | deprecated | hint
      parentClass: "hidden text-sm message success"
      content: We have received your message! We'll get back to you as soon as possible.
    - note: deprecated # info | warning | success | deprecated | hint
      parentClass: "hidden text-sm message error"
      content: Something went wrong! please use this mail - [[email protected]](mailto:[email protected]) to submit a ticket!

Step 3: Add a New Input Field

To add a new input field (e.g., for a phone number), add another object under inputs. 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: Opensrc/config/config.toml

Look for the following settings:

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


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

Step 2: Update the Email in the Form Action URL

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

▶ For FormSubmit (default)

Update the email in the URL:

contactFormAction = "https://formsubmit.co/[email protected]"
contactFormProvider = "formsubmit.co"
▶ For Formspree

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

contactFormAction = "https://formspree.io/f/yourformid"
contactFormProvider = "formspree"
▶ For Netlify

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

contactFormAction = "/"
contactFormProvider = "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.