Skip to content

Latest commit

 

History

History
93 lines (70 loc) · 2.91 KB

index.md

File metadata and controls

93 lines (70 loc) · 2.91 KB
Raw

+++ title = "Contact Form" date = 2021-11-30T23:56:00+08:00 featured = false comment = true toc = true reward = true categories = [ "Contact Form" ] tags = [ "Netlify", "Getform" ] series = [ "Docs" ] images = [] aliases = [ "/en/posts/contact-form", "/en/docs/contact-form", "/en/docs/layouts/contact-form" ] authors = ["RazonYang"]

[menu.footer]

parent = "features"

weight = 6

[menu.footer.params]

icon = ''

+++

We can put our email address on [social links]({{< ref "/docs/widgets/social-links" >}}) so that readers can contact us. Unfortunately, emails will be more or less treated as spam and even filtered. Therefore, we bring a feature called contact form.

Prerequisites

We need to create a contact page called contact/index.md in the content directory, so that we can access the contact form.

+++
title = "Contact Us"
layout = "contact"
+++

Once created, the link will appear in the profile widget.

Parameters

Name Type Default Description
contact Object -
contact.endpoint String - See also Backends.
contact.file Boolean false Enable/Disable file upload.
contact.fileField String - The name of file field.
contact.reCaptcha Object - Google reCAPTCHA
contact.reCaptcha.siteKey String -

Backends

It is designed to be compatible with most backends, such as Netlify form, Getform, Formspree and Fabform.io. Also works with self-hosted alternative Formailer.

Netlify

Netlify form are supported out of box, therefore, you don't need to specify the contact.endpoint parameter.

The demo site uses Getform instead of Netlify form, because the Netlify will upgrade your form level automatically if you exceed the limit of current plan, which will lead to additional expenses.

Please make sure the contact.endpoint parameter is empty if you intend to use Netlify form.

Formailer

Formailer is supported with a [contact form hook]({{< ref "/docs/advanced/hooks" >}}) to inject a missing input to the form.

See also Google Cloud Functions example upstream.

Others

Let's take Getform as an example:

[contact]
  endpoint = "YOUR_ENDPOINT"

reCAPTCHA

In addition to set the contact.reCaptcha.siteKey parameter, you need to perform additional steps according to the backend: