Form builder

Contactform on a website

Forms can be added on any page with the builder in admin.

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

Adminview for formpostings

Form entries in admin.

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

Navigating to Forms and creating a new form.
  1. Navigate to Forms, found under Messages in the left-side menu.
  2. Press Create form and 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

Form setup in admin

Form setup in admin for a contact form

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.
Form field options in admin

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

Form field setup with input types displayed

Form field type is specified and corresponds to a HTML form type.

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.
Email 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.
Input types specified

More information about input types <input>: The HTML Input element

Text

Input attributes are used as a client-side validation.

Attributes: minlength, maxlength, placeholder

Example of a form field with type 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.

Example of a form field with type 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.

Number input

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" >

Email

A required email input field specification

Email input

Input

Required Name Type Value Attributes Match
Yes Email Email - - -

HTML Output

<label for="Email">Email</label>
<input type="email" name="Email" required="">

Phone

Phone input

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

Color input

Input

Required Name Type Value Attributes Match
- Colorpicker Color - - -

HTML Output

<label for="Colorpicker">Colorpicker</label>
<input type="color" name="Colorpicker">

Date and times

Fields for types date, datetime, month, week and time.
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

Select box

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

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

Text editor with form tags

Form tag can be added into the HTML and RTE editors and will be rendered if the page-template is set to render the content.
  1. Add the form tags {% form 'contact' %} {% endform %} on a page in the editor (Rich Text Editor or Markup editor).
  2. Use the render template for the page.

The content for a page is not automatically rendered but if including liquid filter | render to the html output liquid will be processed.

<section>
    <h1>{{ meta.h1 }}</h1>
    <div>
        {{ page.html | render }}
    </div>
</section>
Example of code for a page-template rendering content

Creating a contact page

Creating a contact page with with a form using the render template in the theme.

Steps in the video:

  1. Adding a 2 column layout in the RTE.
  2. Adding a heading and text to the left column.
  3. Navigating to Forms and opening the editor for the form.
  4. Adding Name, Email and Message field as well as a submit button.
  5. Going back to the Contact page view in admin.
  6. Adding the form tags with the form handle.
  7. Choosing the render page template.
  8. Previewing the form on the page.
  9. 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.

References