Skip to content

Site forms

A site form lets your visitors send you information: a contact message, a table booking, a newsletter sign-up, a review… Each submission adds an entry to a table of your project. You see it in the Studio right away, like any other data: the table is your inbox.

Example

A restaurant has a Bookings table (name, email, date, guests, message). The booking form on its contact page adds a new entry to this table for each request, and the owner gets an email.

Add a form in a few clicks

  1. Open the table that will receive the submissions (or create it) with the fields you want to ask for.
  2. Open the ⋯ menu at the top right, then Add a form.
  3. Choose:
    • the fields of the form (required fields of the table are also required in the form);
    • the page where the form is added (you can move it later);
    • what happens after sending: a thank-you message, or a page of your site;
    • Notify me by email on each submission: an email to the project owner with the content of the submission.
  4. Click Add the form: the site editor opens on the page, with the form ready.

The form uses the right control for each field type: email address, number, date, date and time, checkbox, long text, and a list for a category field (its values come from the category table).

The labels are the names of your fields, in each language of the site. You can change them in the translation files (i18n/), like any text of your site.

What the form accepts

  • Only the declared fields of the declared table: anything else sent to the form is ignored.
  • A form only adds entries: it can never change or delete your data.
  • Values are checked according to the field type (an email must be an email, a number a number…). Invalid fields are highlighted, with a message.
  • File, relation and location fields cannot be filled by a form.

Spam protection

Every form is protected, with nothing to configure:

  • an invisible field that robots fill in (their submissions are silently ignored);
  • a minimum time to fill in the form (robots send it instantly);
  • a limit on the number of submissions per visitor and per site;
  • a maximum size for each submission.

Write a form yourself (developers)

A form is declared in the front matter (--- block) of a page or partial, then written with the {{#ekform}} block:

---
forms:
  booking:
    table: bookings                       # slug of the table
    fields: [name, email, date, guests]   # slugs of the accepted fields
    success: FORM_BOOKING_SUCCESS         # message after sending (text or i18n key)
    notify: true                          # email to the project owner
---
{{#ekform "booking" class="booking-form"}}
  <label>{{ektrans 'FORM_BOOKING_NAME'}} <input name="name" required></label>
  <label>Email <input type="email" name="email"></label>
  <label>Date <input type="date" name="date"></label>
  <label>Guests <input type="number" name="guests"></label>
  <button type="submit">{{ektrans 'FORM_BOOKING_SEND'}}</button>
{{/ekform}}
Option Description
table Table receiving the submissions (slug). Required.
fields Accepted fields (slugs). The name of each input is the field slug. Required.
success Message shown after sending: plain text, or a translation key of the site.
redirect Page shown after sending, instead of the message: a path of your site, e.g. /{lang}/thanks/ ({lang} = language of the visitor).
notify true: email to the project owner on each submission.
  • {{#ekform}} adds the <form> tag with the right address, the spam protection and the language of the page: never write the action yourself.
  • Checkbox: <input type="checkbox" name="optin" value="1">. Category: a <select> whose options have the entry uid as value (or its title).
  • With JavaScript, the form is sent without reloading the page: the success message replaces the form, and invalid fields get aria-invalid="true" (style them with [aria-invalid="true"]). Without JavaScript, the form still works (confirmation page or redirect).
  • The editor completes the forms: options and flags an unknown table or field in the Problems panel.
  • The AI assistant knows this syntax: "Add a booking form on the contact page".

Limits

Free Pro Team
Forms per site 2 Unlimited Unlimited

Submissions are entries: they count in the entries per project limit of your plan. When the limit is reached, the form shows a neutral message to visitors. See Plans & limits.