# WP Libre Formbuilder
Free WYSIWYG formbuilder for WP Libre Form. Anyone who is able to write HTML is able to create fields that act as building blocks for the forms, and the outputted forms are rather accessible.
The plugin is in rather early development, and new features and improvements are subject to be added based on user feedback.
## Installing
You need to have WP Libre Form installed before you can use this plugin.
The plugin has been submitted to the WordPress plugin directory, and once accepted, should appear there.
Until that happens, you can download the latest release on [the releases page](https://github.com/k1sul1/wp-libre-formbuilder/releases).
You can also use Composer:
```
composer require k1sul1/wp-libre-formbuilder
```
## Screenshots
## How does it work
Think of it as a preprocessor for WP Libre Form. It generates HTML from the building blocks you create. Obviously there's some built-in building blocks as well.
That means that any of the usual features should work just fine. Dynamic values? Check. Multilinguality support with Polylang? Check.
## How to add fields
### The easy way
Using wp-admin: /wp-admin/post-new.php?post_type=wplfb-field
Follow the instructions in the Field metabox.
### Using PHP
This assumes that you're running the latest version of WP Libre Form.
```php
wplf()->plugins->Formbuilder->addField([
'key' => 'U0', // Used to differentiate fields from others, especially when two fields share the same name
'name' => 'Range', // Name shown to the end user
'field' => '', // HTML fragment. Attributes will be editable.
'template' => '
', // HTML fragment for wrapping field with
'label' => 'On a scale of 1 to 5, how did we do?', // Default label for input, leave empty to disable
]);
```
## Wrapper fields
Sometimes you want to nest fields, or group them in logical sections. Wrapper fields allow you to do just that. They're normal fields but they don't contain any inputs themselves, usually.
```html
Elements before inputs
Elements after inputs
```
The class `wplfb-child-container` is mandatory.
## Templates
In addition to having wrapper fields, you can provide a template that wraps your field. Useful for adding boilerplate around the inputs allowing you to utilize the power of CSS frameworks like Bootstrap, Foundation, or Pure. Templates can't have configurable parameters. But you can probably use wrapper fields to achieve that and live.
```html
This is a very important heading
```
The class `wplfb-field-container` is mandatory.
### Hold up. Templates and wrappers look like the same to me?
Indeed they do, but they're not. Templates can't contain multiple fields, as in, they can't have children. When you use templates, the tag you used for the template is discarded and a field takes it's place, but when you use wrapper fields, you can put any field inside it and the wrapping element is preserved.
## FAQ
### Why no drag & drop?
DnD interfaces are often tedious to use. Sure, they work great on desktop, when there's one level, but complex forms may have any number of levels. Using mobile devices with limited screen space makes it spectacularly easy to ~~ruin everything~~ misplace elements.
By not relying on DnD the code stays relatively simple, and works on every device. The current move controls should feel intuitive, and after adding keyboard shortcuts everything should be a breeze.
If there's demand, drag & drop controls might be implemented, there's nothing in the code preventing that from being done.