Contact form

A static site can’t receive form messages, so the form posts to a form service that emails them to you. Izar works with two, both with free plans. The form needs no JavaScript. It sits in the contact section of contact.md.

You choose the service in _config.yml, under izar.form.

Web3Forms

1. Go to web3forms.com, enter your email address and get your access key.
2. In _config.yml:

izar:
  form:
    provider: web3forms
    access_key: your-access-key
    subject: New message from your website

Messages arrive by email, and visitors are sent to your /thank-you/ page (this needs url to be set in _config.yml). The access key only lets people send messages to you, so it’s safe in a public repository.

Formspree

1. Create a form at formspree.io and copy its address, such as https://formspree.io/f/abcdwxyz.
2. In _config.yml:

izar:
  form:
    provider: formspree
    endpoint: https://formspree.io/f/abcdwxyz
    subject: New message from your website

The first message asks you to confirm your email address. Izar doesn’t tell Formspree where to send visitors afterwards, so by default they see Formspree’s own thank-you page. To send them to your /thank-you/ page, set the redirect in your form’s settings on Formspree, if your plan allows it.

What the form sends

Name, email and message, plus the budget and topic when the contact section has budgets and topics lists. The name, email and message are required, and the browser checks the email address before sending. The budget and topic are optional.

Both services also get a hidden spam-trap field that people never see and bots fill in. Web3Forms gets it as botcheck and Formspree as _gotcha.

subject is the subject line of the email you receive. If you leave it out, the words come from form_subject in _data/strings.yml.

Demo mode

provider: demo is how the theme is set when you get it. It sends nothing: the form goes straight to the thank-you page, which says “This is the theme demo, so nothing was sent.” The fields have no names, so nothing a visitor types leaves the page or appears in the address bar.

Change it before you launch, or your visitors’ messages will be lost. Any other value, or a missing provider, also acts as demo mode.

The form’s words

The field labels, the “Send message” button and the “(optional)” tag come from _data/strings.yml. The text around the form (the heading, intro, availability line, menus and the note under the button) is in the contact section of contact.md.

The thank-you page

thank-you.md is the page visitors land on. Edit the heading and text in its front matter. It’s hidden from search engines and left out of the sitemap.