Form builder

The built-in form builder enables the creation and management of forms, including contact forms and newsletter sign-ups. All form submissions are validated server-side before being saved in the database. The generated forms can be added with optional HTML-code generation and with multiple forms on the same page.

• Secure data
  The form submissions are stored on your server and make it easy to adhere to GDPR and other privacy laws.
• Server-side data validation
  Form submissions are validated before being 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.
• Email notifications
  Set up email notification when receiving a form submission.
• Auto HTML generation
  Optional HTML-code generation for easy setup of forms.
• Multiple forms on pages
  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 form HTML and CSS freely.
• Connect to other services
  Send form submissions to other services with webhooks.
• Translations
  All form fields and messages can be translated in Language > Translations (found under form context).

The forms can be used in JS-free sites as they do not require JS to function.

Form entries

Form submissions are validated server-side before being saved.

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 the 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 consist of Name, Type, Required, Match, Attributes, and Value. Each input field that the form will consist of needs to be specified in the 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".

Mdn docs provides more information on how attributes are used in input fields.

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 override the default browser styles - Webdev guide for forms.

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

Checkbox

		<label>
			<input type="checkbox" value="I consent to having this website store my submitted information so they can respond to my inquiry. See our privacy policy to learn more about how we protect and manage your submitted data." name="policy" required="">
			I consent to having this website store my submitted information so they can respond to my inquiry. See our privacy policy to learn more about how we protect and manage your submitted data.
  </label>

Colorpicker

<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

Email

A required email input field specification

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

Hidden

A hidden field is not shown to users but can be used to hold information that needs to be submitted with the form.

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

Label

The type label makes it possible to add another label to a form field. Text is inserted int the value field and the name should be same as for the form fields.

<label for="myInput">Title of the label</label>

If using multiple labels for the same input field it is a good idea to use aria property aria-labelledby, both aria properties and html ids can be added in the Attributes field in the forms builder. Reference: Mozilla developer resource

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.

Example

<label for="Amount">Amount</label>
<input type="number" name="Amount" min="100" max="900" step="10" >

Paragraph

<p><small>Your Personal Data Will Be Used To Support Your Experience Throughout This Website, To Manage Access To Your Account, And For Other Purposes Described In Our Privacy Policy.</small></p>

Radio buttons

For radiobuttons, several are set up in admin, aswell as a label, all should share the same name.

		<label for="color1">Pick color</label>
		<label><input type="radio" value="blue" name="color1" required="">Blue</label>
		<label><input type="radio" value="red" name="color1" required="">Red</label>
		<label><input type="radio" value="greenish" name="color1" required="">Greenish</label>

Range

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

Reset

The reset type adds a reset button which clears all inputs.

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

Select

A select-box will show a drop-down with options to choose from when pressed.

<label for="Select">Select</label>
<select name="Select">
  <option value="Cat">Cat</option>
  <option value="Dog">Dog</option>
  <option value="Rabbit">Rabbit</option>
</select>

More options

• Options values can have separate title when using : on value:title
• A hyphen value - inserts a horizontal ruler <hr> in the select options dropdown list.

Submit

The field type submit generates a button for the form. Almost all themes has a button class which can be added with class="btn" in the Attribute specification.

Input

HTML Output

<button type="submit" name="submit" class="btn">Submit</button>

Tel or Phone

The phone field can be set to check for patterns client side.

<label for="Phone">Phone</label>
<input type="tel" name="Phone" placeholder="123-4567-8901">

Text

Input attributes are used for 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.

<label for="Message">Message</label>
<textarea name="Message" rows="6" required=""></textarea>

Url

The input field with type set to url is the only field that allows link-insertions.

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

Adding form to the 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 syntax 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. Navigate to Forms and open 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 have no content in between, markup for the form is generated from the 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>

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.

References

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