Form

The Form extension is a helper utility to generate form fields so that it is consistent among other extensions and plugins if needed. It provides useful form fields like text, email, image, color, drop downs, tinymce and many more. You can easily add on to the existing ones by hooking your own fields

Overview

Dependencies

This extension requires the DatabaseMedia and AJAX extensions.

You DO NOT NEED to require the above extension(s) in your composer.json. It will automatically be loaded when you require this form extension.

Delegate

The Form extension acts as a delegate (as in “used by”) for the Admin and Metabox extensions. Moreover, it may be a delegate for many others.

How to install

Make sure you have read the extension installation guide first.

You can choose to install the extension by modifying the composer.json file and using the terminal OR instead you can do a one liner in the terminal. In both cases, make sure you cd into the boots directory prior to using the terminal commands.

A. Installing the extension via composer.json and terminal.

Place the following inside the “require” block of the composer.json file.

Now run $ composer install  in your terminal. Thats it!

— OR —

B. Installing the extension via the terminal as a one liner.

Usage

In order to consume the form fields, we first need to enqueue the scripts and styles on the relevant pages so that we can proceed to generate the fields we require.

The following is the code to enqueue the scripts and styles. Later we will dig into each form fields that we can consume.

It is recommended that you enqueue the scripts and styles (line 31 and 32) of the form extension on the relevant pages where you will be displaying the form fields as opposed to the example provided above which will enqueue them on all admin pages.

Getting Started

Assuming you have the $this->Boots object at your disposal, lets have a look at the fields available for use. The code snippets below may be consumed where ever you find fit. Make sure you wrap them inside a container with a class attribute of boots-form, e.g. <div class="boots-form"> form field code here </div>

Textbox

The following code will display a simple text field.

Textarea

The following code will display a multi line text area field.

Select Dropdown

The following code will display a select drop down field.

Multi Select Dropdown

The following code will display a multi select drop down field.

Checkboxes

The following code will display a couple of checkboxes.

Radio Buttons

The following code will display 3 radio buttons.

Range Slider

A sweet range slider provided by noUiSlider.

The data key may contain an array of options

Color Picker

The following code will display a color picker field.

Image Picker

The following code will display an image picker field.

TinyMCE Editor

The following code will display a tinyMCE editor. Note that tinyMCE gets echoed and not returned.

Posts

The following code will display a posts selector.

Pages

The following code will display a pages selector.

Categories

The following code will display a category selector.

Tags

The following code will display a tag selector.

Hooks - Adding custom fields

As an added feature, you may also add on to the available form fields. To do so, you need to use a filter hook as mentioned below.

Khan

A die hard programmer!