Form

Installation

1. Download & Install all required dependencies.
2. Create new folder project/plugins/form/
3. Download Form Plugin and unzip plugin content to the folder project/plugins/form/

Fieldsets are configuration files written in YAML for Admin Panel to create publish forms. They establish your content model. Essentially, a schema that defines your fields, data types, and the interface used to manage them.

Settings

Fields

• Text
• Email
• Number
• Password
• Textarea
• HTML
• Hidden
• Heading
• Select
• Select Template
• Select Visibility
• Select Routable
• Select Media
• Tags
• Date Time Picker

Fields Details

Text

The plain text field for short text blocks or a short paragraph of information related to a item–basic text content that doesn't need special formatting.

Common uses: Short-form text that doesn't need any formatting; Product titles; Event names

Example:

form:
  fields:
    title:
      title: Title
      type: text

Field Properties

Email

The email field for email text blocks.

Example:

form:
  fields:
    email:
      title: Email
      type: email

Field Properties

Number

The number field for number blocks.

Example:

form:
  fields:
    number:
      title: Number
      type: number

Field Properties

Password

The password field for password text blocks

Example:

form:
  fields:
    password:
      title: Password
      type: password

Field Properties

Textarea

While a plain text field is used for creating short-form, a textarea field is used for long-form content.

Common uses: Long-form text that doesn't need any formatting; Product descriptions; Event descriptions

Example:

form:
  fields:
    message:
      title: Message
      type: textarea

Field Properties

HTML

While a textarea field is used for creating long-form, unformatted text, a html field is used for long-form content that you can format. The html field gives your collaborators freedom to create and format your content.

Common uses: Most long-form content with links; Blog posts; Articles; Team member bios; Product description; Event details.

We are using Trumbowyg - a very small but powerful WYSIWYG editor created by Alexandre Demode (@Alex-D)

Example:

form:
  fields:
    content:
      title: Content
      type: html

Field Properties

Hidden

The hidden field allows storing values in the content file that are not visible to users. This can be useful to store additional information for a page, which is only available to the developer or editors who have access to the filesystem. Such a hidden field can be edited only either directly in the filesystem or programmatically via a script.

Example:

form:
  fields:
    hidden:
      title: Hidden
      type: hidden

Field Properties

Heading

The heading field helps to group larger sets of fields.

Example:

form:
  fields:
    heading:
      title: Heading
      type: heading

Field Properties

Select

The heading field helps to group larger sets of fields.

Example:

form:
  fields:
    genre:
      title: Genre
      type: select
      options:
        action: Action
        adventure: Adventure
        horror: Horror

Field Properties

Select Template

Template select field for selecting entry template.

Example:

form:
  fields:
    template:
      title: Template
      type: select_template

Field Properties

Select Visibility

Visibility select field for selecting entry visibility state.

Example:

form:
  fields:
    visibility:
      title: Visibility
      type: select_visibility

Field Properties

Select Routable

Routable select field for selection entry routable state.

Example:

form:
  fields:
    routable:
      title: Routable
      type: select_routable

Field Properties

Select Media

Media select field for selection media for entry.

Example:

form:
  fields:
    cover:
      title: Media
      type: select_media

Field Properties

Tags

An interactive tags input field.

Example:

form:
  fields:
    tags:
      title: Tags
      type: tags

Field Properties

Date Time Picker

The datetimepicker field lets you specify a date and time.

Example:

form:
  fields:
    published_at:
      title: Tags
      type: datetimepicker

Field Properties

Basic Fieldset Example

project/fieldsets/default.yaml

title: Default
default_field: title
Form: 'far fa-file-alt'
size: 12
form:
  name: default
  id: default
  method: post
  messages:
    success: true
    error: true
  buttons:
    submit:
      title: Submit
      type: submit
  tabs:
    main:
      title: admin_main
      fields:
        title:
          title: admin_title
          type: text
          size: 12
        content:
          title: admin_content
          type: html
          size: 12
    settings:
      title: admin_settings
      fields:
        general_heading:
          title: admin_general
          type: heading
        description:
          title: admin_description
          type: textarea
          size: 12
        visibility:
          title: admin_visibility
          type: select_visibility
          size: 4/12
        published_at:
          title: admin_published_at
          type: datetimepicker
          size: 4/12
        routable:
          title: admin_routable
          type: select_routable
          size: 4/12

Rendering forms in the TWIG templates

{% set registration_form_file = PATH_PROJECT ~ '/fieldsets/default.yaml' %}

{{ flextype.form.render(flextype.serializers.yaml.decode(filesystem().file(registration_form_file).get()), {})|raw }}

Processing form in the Backend

use Psr\Http\Message\ResponseInterface as Response;
use Psr\Http\Message\ServerRequestInterface as Request;

flextype()->post('{uri:.+}', function(Request $request, Response $response) {

    // get post data
    $post_data = $request->getParsedBody();

    // save date from $post_data
    flextype('entries')->create($post_data['name'], ['title' => $post_data['name']]);

    // redirect
    return $response->withRedirect('./');
})->add('csrf');