Back to top


Contact form for help, contact and feedback

Contact fragment renders a form with a maximum of 4 fields:

  • Name
  • Email
  • Phone
  • Message

This fragment supports validations and thus can have customized error messages. Recaptcha and Netlify (with Netlify auto Recaptcha) support is also available. Other options are using a custom server or other form submission handlers such as Formspree.

Contact fragment

not working on demo page
Message could not be send due to captcha not loadable. Please contact us at
Message could not be send. Please contact us at instead.
fragment = "contact"
#disabled = true
date = "2017-09-10"
weight = 110
background = "secondary"
form_name = "defaultContact"

title = "Contact fragment"
subtitle  = "*not working on demo page*"
#title_align = "left" # Default is center, can be left, right or center

# PostURL can be used with backends such as formspree, or mailout from caddy
post_url = ""
email = ""
button_text = "Send Button" # defaults to theme default
#netlify = false

# Optional google captcha
# Won't be used if netlify is enabled
#  sitekey = ""

  success = "Thank you for awesomely contacting us." # defaults to theme default
  error = "Message could not be send. Please contact us at instead." # defaults to theme default

# Only defined fields are shown in contact form
  text = "Your Name *"
  error = "Please enter your name" # defaults to theme default

  text = "Your Email *"
  error = "Please enter your email address" # defaults to theme default

  text = "Your Phone *"
  error = "Please enter your phone number" # defaults to theme default

  text = "Your Message *"
  error = "Please enter a message" # defaults to theme default

# Optional hidden form fields
# Fields "page" and "site" will be autofilled
  name = "page"

  name = "someID"
  value = ""


Contact form can be used to receive messages.

Various methods and providers are supported. You can use Netlify’s form service, formspree or a custom endpoint.

NOTE: If netlify variable is set to true then value of post_url will be dismissed since Contact fragment can send the data to a single endpoint only.

This fragment uses internationalized text snippets. Customize them in the fragment or in your own i18n/ website directory.

Contributions for translations are welcome.


This fragment uses the Events api by default.



This event is not published by any fragment by default. But you can make use of it through event urls.


type: string

Fills the name input.


type: string

Fills the email input.


type: string

Fills the phone input.


type: string

Fills the message input.



type: string
default: contact-form-{{ file_name }}

Unique name for the form used to identify the form in scripts and on the page.


type: string

URL to your own backend or a service you are using.


type: string

Email used in case of error or if javascript is not available for a functioning contact form.


type: string
default: i18n contact.defaultButton

Submit button text of the form.


type: boolean
default: false

Setting netlify to true will enable Netlify’s form handling and it will override any post_url configuration.

Using the Netlify form service simplifies form handling. Enable it and submissions should be showing up in your Netlify interface. It includes spam prevention including reCaptcha usage and can be connected to various triggers such as email, slack and more.

NOTE: Your website needs to be hosted on Netlify to take advantage of this.


type: object
default: Not set

In the case post_url is used a reCaptcha can be added to the form by setting recaptcha to true and providing a recaptcha.sitekey.

This reduces spam submissions to your contact form.


type: string

Your specific Google reCaptcha sitekey generated within the recaptcha dashboard.


type: object

These messages would be shown after submission in case of an error or success.


type: string
default: i18n contact.defaultGenericSuccess


type: string
default: i18n contact.defaultGenericError


type: Object of objects

Each object defined under fields will be added to the form. You can remove any of the fields and they would not appear.

type: string

type: string
default: i18n contact.defaultNameError

type: string

type: string
default: i18n contact.defaultEmailError

type: string

type: string
default: i18n contact.defaultPhoneError



type: string


type: string
default: i18n contact.defaultButton


type: Array of objects

You can use this array to add new hidden fields to the form.

type: string

This field can have any value and it would be registered in the form with the custom value you provide, unless the value is one of the following:

  • site: If the name of the hidden field is set to site, value is overridden with permalink of the current page.
  • page: value would be overridden with URL of the current page.

Any other value for the name variable in the fields.hidden object will have normal behavior and will not affect the value variable.


type: string

Value of the hidden field. This field will be overridden if name is set to site or page.

Global variables are documented as well and have been omitted from this page.


type: array of objects

This array is used to define custom inputs. These inputs are displayed in addition to the default inputs of the contact form.

type: string


type: string


type: string
default: i18n contact.defaultError


type: boolean


type: boolean, string
accepted values: email, regex

Applies validation rules to the input. If not set or set to false, no validation will be applied.


type: string

In case fields.custom.validation is set to regex, you can specify the regex here.