Form builder

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

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

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.

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.

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

Text

Input attributes are used as a client-side validation.

Attributes: minlength, maxlength, placeholder

Settings Example

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.

Input

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

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

Input

HTML Output

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

Phone

Input

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

HTML Output

<label for="Website">Website</label>
<input type="url" name="Website" >

Colorpicker

Input

HTML Output

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

Date and times

Date

Datetime

Note that the type in HTML is datetime-local

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

Select

Settings

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

HTML Output

<label for="Range">Range</label>
<input type="range" name="Range" min="0" max="100" step="10">

Hidden

Input

HTML Output

<input type="hidden" name="Hidden" value="">

Reset

Input

HTML Output

<input type="reset" name="Reset" value="Reset">

Submit

Input

HTML Output

<input type="submit" name="submit" required="" value="Submit">

Adding form into website

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>

Creating a contact page

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

• The HTML input fields
• Input fields at Mozilla developers
• Email Input field at Mozilla developers