
The built-in form builder creates and manages forms, such as contact forms and newsletter signups. All form submissions are validated server-side before saved in the database. The generated forms can be added with optional HTML-code generation and with multiple forms on the same page.
The forms can be used in js free pages as well, they do not require js to function.
- Secure data
The form submissions are stored on your server and makes it easy to adhere to GDPR and other privacy laws. - Server-side data validation
Form submissions are validated before saved in the database to prevent attacks, errors and maintain data integrity. - Unlimited forms
This is a self-hosted solution: no limit on the amount of forms and form submissions. - Connect to other services
Use webhooks to connect to other services. - Email notifications
Setup email notification when receiving a form submission. - No-code HTML generation
Optional HTML-code generation for easy setup of forms. - Multiple forms
Multiple forms, such as a contact form as well as a newsletter signup, can be setup on the same page. - JS free
Forms work without JS. - Code freedom
Customize forms freely.
Form entries

Form submissions are validated server-side before saved.
Form validation
Form entries are validated server-side for malicious use.
- URLs/links are only allowed in form fields with type
url.
Add new form
Forms and creating a new form.- Navigate to
Forms, found underMessagesin the left-side menu. - Press
Create formand give a handle for the form. The handle is used as form name and identifier when including on the site.
Form actions
Three values are possible: No action, Forward to email and Newletter signup
| Action | Description |
|---|---|
| No action | The form entries are saved but no further actions are taken. |
| Forward to email | A copy of the form entry is also sent to the email specified under Messages > Email |
| Newsletter signup | A customer is created in the system. |
Set up form fields

Fields are added in admin with a no-code builder. Forms are added and modified under Messages, also form submissions can be found here.
Form fields consists of Name, Type, Required, Match, Attributes and Value. Each input field that the form will consist of needs to be specified in admin, this is part of the form validation.
| Option | Description |
|---|---|
| Required | Form submissions are only accepted if containing this field. required will be added into the form field. HTML code should reflect this with the required attribute for the best UX experience. |
| Name | The name of the form field, used in the label and as HTML attribute name="email" for the input field. |
| Type | Type of HTML input field for example type="email". |
| Value | Sets a value on the input field. |
| Attributes | Adds input attributes for the generated HTML code. |
| Match | The given value has to match in the form submission, this can be used to create a validation to detect human users. |
Attributes
Attributes are specified as they are written in the HTML field with a space in-between. For example for a text-field it is common to specify a placeholder placeholder="My name" or minimum and maximum values such as the starting date min="2025-10-07".
Input types, select box and textarea

There is support for input types text, number, email, tel, url, color, date, datetime, month, week, time, range, hidden, reset and submit, as well as textarea and select.
All browsers will display the types in slightly different ways and it is possible to add in your own styling with CSS to overrun the default browser styles - Webdev guide for forms.
| Name | Description |
|---|---|
| Text | Is used for a single line of text, usually a name. |
| Textarea | Most commonly used to write a message. |
| Number | Allows the user to specify a number. |
| Similar to a text input field but used for email-address insertions. | |
| Tel | An input field for phone numbers. |
| URL | Input field for website addresses. |
| Color | Displays a color picker. |
| Date | For specifying dates. |
| Datetime | For specifying date in combination with time. |
| Month | For specifying a month. |
| Week | For specifying a week. |
| Time | For specifying a time. |
| Select | Creates a select box. |
| Range | Choosing a value from a range. |
| Hidden | A way to add in meta data for the form entry. |
| Reset | A reset button for the form. |
| Submit | A submit button for the form. |
More information about input types
<input>: The HTML Input element
Text
Input attributes are used as a client-side validation.
Attributes: minlength, maxlength, placeholder
text, here with the name name.Settings Example
| Required | Name | Type | Value | Attributes | Match |
|---|---|---|---|---|---|
| Yes | Name | Text | - | minlength=“4” maxlength=“8” | - |
HTML Output
<label for="Name">Name</label>
<input type="text" name="Name" minlength="4" maxlength="8">
Textarea
Typically a textarea is used in a contact form for a message, and could be set to required. Specifying the number of rows as an attribute is a good idea as the default number is only two.
textarea, for submitting a Message.Input
| Required | Name | Type | Value | Attributes | Match |
|---|---|---|---|---|---|
| Yes | Message | Textarea | - | rows=“6” | - |
HTML Output
<label for="Message">Message</label>
<textarea name="Message" rows="6" required=""></textarea>
Number
Number input can be used to collect a number and by adding attributes it is possible to get stepped values between a minimum and maximum amount.
Settings
| Required | Name | Type | Value | Attributes | Match |
|---|---|---|---|---|---|
| - | Amount | Number | - | min=“100” max=“900” step=“10” | - |
HTML Output
<label for="Amount">Amount</label>
<input type="number" name="Amount" min="100" max="900" step="10" >
A required email input field specification
Input
| Required | Name | Type | Value | Attributes | Match |
|---|---|---|---|---|---|
| Yes | - | - | - |
HTML Output
<label for="Email">Email</label>
<input type="email" name="Email" required="">
Phone
Input
| Required | Name | Type | Value | Attributes | Match |
|---|---|---|---|---|---|
| - | Phone | Tel | - | - | - |
HTML Output
<label for="Phone">Phone</label>
<input type="tel" name="Phone">
Url
The input field with type set to url is the only field that allows link-insertions.
Input
| Required | Name | Type | Value | Attributes | Match |
|---|---|---|---|---|---|
| - | Website | Url | - | - | - |
HTML Output
<label for="Website">Website</label>
<input type="url" name="Website" >
Colorpicker
Input
| Required | Name | Type | Value | Attributes | Match |
|---|---|---|---|---|---|
| - | Colorpicker | Color | - | - | - |
HTML Output
<label for="Colorpicker">Colorpicker</label>
<input type="color" name="Colorpicker">
Date and times
Date
| Attributes | Description | Example |
|---|---|---|
| Value | Specify a preselected value. | value="2025-10-12" |
| Min | Start date from where dates can be selected | min="2025-10-07" |
| Max | Last date from where dates can be selected | max="2025-10-25" |
Datetime
Note that the type in HTML is
datetime-local
| Attributes | Description | Example |
|---|---|---|
| Value | Specify a preselected value. | value="2025-06-12T19:30" |
| Min | Start date from where dates can be selected | min="2025-06-07T00:00" |
| Max | Last date from where dates can be selected | max="2025-07-07T00:00" |
Month
Use the month type with caution, only partially supported - Can I Use?
Week
Use the week type with caution, only partially supported - Can I Use?
Time
| Attributes | Description | Example |
|---|---|---|
| Value | Specifies a preselected value. | value="13:30" |
| Min | Earliest time | min="08:30" |
| Max | Latest time | max="19:00" |
Select
Settings
| Required | Name | Type | Value | Attributes | Match |
|---|---|---|---|---|---|
| - | Select | Select | Cat, Dog, Rabbit | - | - |
HTML Output
<label for="Select">Select</label>
<select name="Select">
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
<option value="Rabbit">Rabbit</option>
</select>
Range
Input
| Required | Name | Type | Value | Attributes | Match |
|---|---|---|---|---|---|
| - | Range | Range | - | min=“0” max=“100” step=“10” | - |
HTML Output
<label for="Range">Range</label>
<input type="range" name="Range" min="0" max="100" step="10">
Hidden
Input
| Required | Name | Type | Value | Attributes | Match |
|---|---|---|---|---|---|
| - | Hidden | Hidden | - | - | - |
HTML Output
<input type="hidden" name="Hidden" value="">
Reset
Input
| Required | Name | Type | Value | Attributes | Match |
|---|---|---|---|---|---|
| - | Reset | Reset | Reset | - | - |
HTML Output
<input type="reset" name="Reset" value="Reset">
Submit
Input
| Required | Name | Type | Value | Attributes | Match |
|---|---|---|---|---|---|
| - | Submit | Submit | Submit | - | - |
HTML Output
<input type="submit" name="submit" required="" value="Submit">
Adding form into website

- Add the form tags
{% form 'contact' %}{% endform %}on a page in the editor (Rich Text Editor or Markup editor). - Use the
rendertemplate for the page.
The content for a page is not automatically rendered but if including liquid filter
| renderto the html output liquid will be processed.
<section>
<h1>{{ meta.h1 }}</h1>
<div>
{{ page.html | render }}
</div>
</section>
Creating a contact page
Steps in the video:
- Adding a 2 column layout in the RTE.
- Adding a heading and text to the left column.
- Navigating to
Formsand opening the editor for the form. - Adding
Name,EmailandMessagefield as well as a submit button. - Going back to the Contact page view in admin.
- Adding the form tags with the form handle.
- Choosing the
renderpage template. - Previewing the form on the page.
- Changing color scheme in theme settings.
Generated form HTML
When {% form '<handle>' %} and {% endfrom %} tags has no content in between markup for the form is generated from setup in admin.
{% form '<handle>' %}{% endform %}
Example code
Generated code for a typical contact form:
<form method="POST" name="contact" id="contact-form" action="/forms/contact">
<input type="hidden" name="returnUrl" value="/#contact-form">
<label for="name">Name</label>
<input type="text" name="name" required="">
<label for="email">Email</label>
<input type="email" name="email" required="">
<label for="phone">Phone</label>
<input type="tel" name="phone" required="">
<label for="subject">Subject</label>
<input type="text" name="subject" required="">
<label for="message">Message</label>
<textarea name="message" required="" rows=""></textarea>
<input type="submit" name="submit" required="" value="Send">
</form>
CSS for generated form HTML
CSS for the generated HTML if the css-framwork used requires another html structure:
form {
max-width: 500px;
margin: 0 auto;
padding: 1em;
}
form input, form label, form textarea {
width: 100%;
}
form label {
display:block;
font-size: 0.8em;
text-align: left;
padding: 0 0.5em
}
form input[type="submit"] {
margin-bottom: 0.5em;
}
Custom HTML code in template
If including html inside of the {% form %} tag, this code will be used instead of the generated code.
Code for a typical contact form:
{% form 'contact' %}
<h3>Say hallo!</h3>
{% if form.errors %}
<div class="alert alert-error">
<span>Sorry, looks like something went wrong, please try again.</span>
</div>
{% endif %}
{% if form.success %}
<div class="alert alert-success">
<span>Thank you for the message, we will contact you shortly!</span>
</div>
{% else %}
<label class="input {% if form.errors contains 'name' %} input-error{% endif %}">
<input type="text" name="name" placeholder="Name" required/>
</label>
<label class="input {% if form.errors contains 'email' %} input-error{% endif %}">
<input type="email" name="email" placeholder="Email" required />
</label>
<textarea placeholder="Message" name="message" class="textarea {% if form.errors contains 'message' %} textarea-error{% endif %}" required ></textarea>
<button type="submit" class="btn btn-primary">Send</button>
{% endif %}
</div>
{% endform %}
With
{{ form | print_r }}it is possible to view the form object.
Spam filtering
Spam filtering helps protect your message inbox from unwanted, potentially harmful, messages
- Create your own questions with the form validations built in.
- Add a load delay with Javascript on the form.
- Use 3rd party services such as reCAPTCHA.