Formtopia Overview

Formtopia is a complete forms solution that let’s your team build powerful forms more quickly than ever. A modular design creates a high-degree of flexibility in how it can be integrated into your projects. Formtopia consists of:

FormML - A markup-style syntax for form definitions
Form Store - A cloud-hosted database for all of your form responses
FormML-JS - a Javascript module to transform FormML into a web form

Throughout this documentation, you will also find references to these terms:

Fields - a label and input displayed on a form
Inputs - the element that accepts data from the user
Validations - rules used to ensure that data entered into a field is in the correct format
Behaviors - advanced functions that may be applied to improve the quality of form entries
Theme Flavors - form post-rendering step that enables makes form markup compatible with your theme
Entries / Responses - data submitted by completing a form

FormML

FormML is a markup-style language used to create form definitions. FormML will be transformed into the rendered form when a web page is constructed or when the browser renders the page contents. A FormML block must contain one or more fields and can optionally include comments, special blocks and front-matter properties.

Field Syntax

Simplest Field Definition

A Field can be defined as simply as specifying the name of the data you would like to collect. For example, name or email or phone. Each field must be seperated by a comma or new-line character.

Examples

Simplest form - collecting just a single email.

email

Collect 3 fields - comma delimited

name, email, phone

Collect 3 fields - new-line delimited

name
email
phone

Note	By default, all fields will be 'required'. Forms will not be able to be submitted by a user unless they are completed and in the correct format.

Complete Field Syntax

A field may also include several optional elements for more control.

Full Field Syntax

field_name?:input_type<label | placeholder>

field_name - data collected from this field will have this label in the Form Store
optional flag - a question mark ? after the field_name makes the field optional. Fields are all required by default.
input type - Fields are single-line text inputs by default. If they field name is recognized it may be automatically assigned to a specific type. For example, a field named company_email will automatically be assigned an email input type. To specify the field type, set the input_type name after a colon :
label - by default the field label will be a titleized version of the field name. Add angle brackets to specify a different field label.
Placeholder - for inputs that support placeholders, you can specify the placeholder after bar | character inside the label brackets. You can specify a lable, or a placeholder or both.

Comments

If you would like to add comments to your FormML code, you can use // characters at the beginning of any line

Special Blocks

Fieldset

:fieldset<Label> will group all the inputs below into an HTML Fieldset container with the label provided.

Submit

:submit<Label> will change the default label of the Submit button for the form.

Documentation

Inputs

Behaviors

Renderers

Web Flavors