Contact form for help, contact and feedback
Contact fragment renders a form with a maximum of 4 fields:
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.
+++
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 = "https://example.com/mailout"
email = "mail@example.com"
button_text = "Send Button" # defaults to theme default
#netlify = false
# Optional google captcha
# Won't be used if netlify is enabled
#[recaptcha]
# sitekey = ""
[message]
success = "Thank you for awesomely contacting us." # defaults to theme default
error = "Message could not be send. Please contact us at mail@example.com instead." # defaults to theme default
# Only defined fields are shown in contact form
[fields.name]
text = "Your Name *"
error = "Please enter your name" # defaults to theme default
[fields.email]
text = "Your Email *"
error = "Please enter your email address" # defaults to theme default
[fields.phone]
text = "Your Phone *"
error = "Please enter your phone number" # defaults to theme default
[fields.message]
text = "Your Message *"
error = "Please enter a message" # defaults to theme default
# Optional hidden form fields
# Fields "page" and "site" will be autofilled
[[fields.hidden]]
name = "page"
[[fields.hidden]]
name = "someID"
value = "example.com"
+++
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.