Building page templates

Movement allows you to setup page templates. These can be used within the page builder to quickly create custom, branded, page designs.

This guide explaines how you can define page templates.

Page Template Components

Page templates are defined by 4 key components:

Body HTML
Head HTML
Styles CSS
Fields

Body HTML

Body HTML defines the layout of the page content and is written in HTML and preprocessed using Liquid. To show the contents of the form, include the <surveyform></surveyform> HTML tags.

Injecting template contents

Inject the contents of a template defined field value using the syntax {{ template.slugName }}. The slug name should always be in camel case.

Conditional Logic

You can show or hide content based on field values using Liquid's if, elsif, and else statements.

{% if template.showContactInfo != blank %}
  Contact us at 0123456789
{% endif %}

Head HTML

Head HTML defines the metadata for the page and is written in HTML. This can be used to add custom fonts, scripts, and more.

Styles CSS

Styles CSS defines the styling of the page and is written in CSS.

The .template-body selector can be used to reference the template parent div.

Fields

Fields defines options that the template provides and is written in JSON. Each field represents a configurable value, for instance a page heading or optional content.

A field is defined by

slug, to reference the field from within the template. This should be in camelCase to match the body template. (required)
label, name the field (required)
questionType, set the field type (required)
options, a set of value and label options for certain question types
defaultValue, the default value of the field
wysiwyg, whether the field is editable within the page builder preview (default: false)
setup, whether the field is shown and editable within the page builder setup tab (default: false)
showInWizard, whether the field is shown and editable within the page wizard initial setup (default: false)
description, additional description provided when editing the field
required, whether the field is required (default: true)
image, whether the value should be displayed as an image
translatable, whether the value can have different values across different languages (default: false)

Field Types

There is a variety of field types (questionType) available:

text, a single line text input
url, a single line text input
paragraph, a multi-line text input
select, a dropdown selector (options required)
checkbox, a boolean checkbox
image, an image uploader

Example

Body HTML

<div class="header">
    {% if template.memberType == 'supporter' %}
    <p>A Movement Supporter Survey</p>
    {% elsif template.memberType == 'member' %}
    <p>A Movement Member Survey</p>
    {% else %}
    <p>A Movement Staff Survey</p>
    {% endif %}
    <h1>{{ template.salutation }}</h1>
</div>
<div class="survey-box">
<div class="hero">
        {{ template.hero }}
</div>
<div class="questions">
    <p class="intro">{{ template.introductionMessage }}</p>
    <surveyform></surveyform>
</div>
</div>
<div class="footer">
    {% if template.showDisclaimerNotice != blank %}
    <div class="disclaimer">
        A disclaimer notice about collecting and processing data
    </div>
    {% endif %}
</div>

Head HTML

<link href="https://fonts.googleapis.com/css2?family=League+Gothic&display=swap" rel="stylesheet">

Styles CSS

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

@font-face {
	font-family: 'Gellix';
	font-weight: 400;
	src: url('https://movement-industries.s3.eu-west-1.amazonaws.com/Gellix-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Gellix';
	font-weight: 700;
	src: url('https://movement-industries.s3.eu-west-1.amazonaws.com/Gellix-Bold.ttf') format('truetype');
}

* {
	font-family: 'Gellix', sans-serif;
}

.template-body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	align-items: center;
}

.header {
	text-align: center;
	padding: 20px 0;
}

.header p {
	color: #bbb;
	font-style: italic;
	font-size: 12px
}

h1 {
	font-family: 'League Gothic';
	margin-top: 10px;
}

body {
	font-size: 16px;
	background: white;
}

.survey-box {
	padding: 0 10px;
	display: flex;
	gap: 48px;
	max-width: 876px;
	margin: 0 16px;
}

.questions {
	box-shadow: 4px 16px 48px 0px #19193629;
	padding: 32px;
	border-radius: 8px;
	min-width: 304px;
}

.hero {
	flex-grow: 1;
}

.hero img {
	border-radius: 8px;
	width: 100%;
}

.survey-box p.intro {
	font-size: 12px;
	color: #E4003C;
	padding-bottom: 10px;
}

.footer {
	background: #454545;
	color: #9F9F9D;
	margin-top: 60px;
	padding: 60px 0;
	width: 100%;
	position: absolute;
	bottom: 0;
}

.disclaimer {
	text-align: center;
	padding: 20px 0;
	font-size: 10px;
	color: #aaa;
}

button,
a.button {
	padding: 8px 24px 12px 24px;
	font-weight: 700;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
}

button[type="submit"] {
	background: #E4003C;
	margin-top: 8px;
	border: none;
	color: white;
	width: 100%;
}

.field {
	margin-bottom: 12px;
}

.field label {
	display: flex;
	gap: 5px;
	color: #1E1E44CC;
	font-weight: 700;
	line-height: 32px;
	font-size: 14px;
}

input[type="text"],
input[type="email"],
input[type="date"],
textarea {
	font-size: 16px;
	width: 100%;
	border-radius: 4px;
	border: 2px solid #20204D33;
	padding: 8px;
	background-color: white;
}

Fields

[
  {
    "slug": "salutation",
    "wysiwyg": true,
    "label": "Header Salutation",
    "questionType": "text",
    "showInWizard": true,
    "translatable": true,
  },
  {
    "slug": "moreInfoUrl",
    "wysiwyg": true,
    "label": "More Info URL",
    "questionType": "url",
    "defaultValue": "https://movement.industries"
  },
  {
    "slug": "introductionMessage",
    "wysiwyg": true,
    "label": "Introductory Message",
    "questionType": "paragraph",
    "defaultValue": "Thanks for taking the time to fill out our survey. It should only take a few minutes!",
    "translatable": true,
  },
  {
    "slug": "memberType",
    "label": "Member Type",
    "questionType": "select",
    "showInWizard": true,
    "options": [
      {
        "value": "supporter",
        "label": "Supporter"
      },
      {
        "value": "member",
        "label": "Member"
      },
      {
        "value": "staff",
        "label": "Staff"
      }
    ]
  },
  {
    "slug": "showDisclaimerNotice",
    "label": "Show disclaimer notice",
    "questionType": "checkbox",
    "setup": true
  },
  {
    "slug": "hero",
    "image": true,
    "label": "Hero Image",
    "questionType": "image",
    "required": false,
    "showInWizard": true
  }
]