Contact Form - Getastrothemes Docs

Looka Theme 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/<language>/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: "Contact Us for More Information"
description: "Whether you're seeking expert assistance, our dedicated team is prepared to support you every step of the way."
subtitle: "Contact"

# Check config.toml file for form action related settings
form:
  emailSubject: "New form submission from looka website"
  submitButton:
    label: "Submit Your Response"
    showIcon: "true"
    variant: "outline" # "fill", "outline", "outline-white", "text"
  inputs:
    - label: ""
      placeholder: "Full Name"
      name: "Full Name" # Indicates under which name you receive this field's data
      required: true
      halfWidth: true
    - label: ""
      placeholder: "Email Address"
      name: "Email Address"
      required: true
      type: "email"
      halfWidth: true
    - label: ""
      tag: "textarea"
      rows: "4"
      placeholder: "Enter your message."
      name: "Message"
      required: true
      halfWidth: false
---

Step 3: Add a New Input Field

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

- label: ""
  placeholder: "Phone Number"
  name: "Phone Number"
  required: false
  type: "tel"
  halfWidth: true

Use type for standard inputs (text, email, tel, url, radio, checkbox). For a multi-line message field, set tag: "textarea" instead of a type (as shown in the example above). Looka also supports a dropdown block for select/searchable fields — see src/content/sections/english/contact-section.md for the full set of field options.

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
[settings]
  contactFormAction = "https://formsubmit.co/[email protected]"
  contactFormProvider = "formsubmit.co" # formsubmit.co | formspree | netlify

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:

[settings]
  contactFormAction = "https://formsubmit.co/[email protected]"
  contactFormProvider = "formsubmit.co"

▶ For Formspree

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

[settings]
  contactFormAction = "https://formspree.io/f/yourformid"
  contactFormProvider = "formspree"

▶ For Netlify

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

[settings]
  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.