Setting up Forms

 Last Edited: Jul 02, 2019

Creating Forms

To create a new webform, navigate to CMS / Forms on the left-hand menu and then click the blue “+ Add New Form” button.

Form Setup:

  • Form Name - This field is used to name your form, please do not use specical characters.
  • Form Redirect - This field specifies which page the user is redirected to after they have submitted your form. It requires no initial /, for example; contact or services/my-service.

Default Required Fields:

  • Name - User submitting the form is required to enter their name.
  • Email Address - User submitting the form is required to enter their email.

Custom Field Types:

  • Text (String) - Single line text field, used for short text inputs.
  • Text (Multiline) - Multiline text field, used for longer text inputs.
  • Checkbox - Comma seperated e.g. Checkbox 1, Checkbox 2
  • Radio Button - Comma seperated e.g. Radio 1, Radio 2
  • Dropdown - Comma seperated e.g. Option 1, Option 2
  • File - Media upload field

You can set any of your custom fields as required/optional via the checkbox next to each field created.

Files uploaded via a form will be stored within a folder named after the form UID (custom_form_1). You can view these folders via File Manager.

Outputting a Form

You can output forms on any page via Pages in your Admin using Toolbox.

Toolbox compiles the following liquid tag automatically for you when you select a new form to output.

{%- include 'form', id:'custom_form_1', layout: 'default', name: 'test form 1' -%}

Required Parameters:

  • id - The ID of the form you are outputting
  • name - Name of the form you are outputting

Optional Parameters:

  • upload_dir - Formatted example: images/all/ - Default = images/{{id}}/
  • layout - Name of layout you want to use e.g. my-own-layout - Default = default

Editing a Form

You can edit the name, details and fields of any form by clicking on the edit pencil button next to the desired form.

Editing Form Layouts

You can edit the HTML Layout of any form within Code Editor. Form Layouts can be found via layouts/forms/form_name/default.liquid'. You can also create alternate layouts by creating a new.liquid` file within the same folder.