Download the PHP package digiti/form-builder without Composer
On this page you can find all versions of the php package digiti/form-builder. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package form-builder
Form Builder
This is a minimalist form builder build on Livewire V3. This is mainly used to create multi-step forms with reactive fields and content.
Installation
In order for this package to work you need to have completed the Livewire v3 installation guide. Once you have done that you include this package in your composer file.
To include the basic styling you need to add the import below in the main css file of your project.
@import '/vendor/digiti/form-builder/dist/build/assets/main.css';
Forms
Once you completed the installation you can immediatly start creating forms with the handy command below:
This will generate the base file structure which is needed to use the existing form component of this package.
A form needs a name. This name will be used to link the results to the form. So it has to be unique. By default all results will be stored in as a cookie.
This is where you create the whole schema for your new form:
With the submit method you do whatever with your data on a form submit
A form can show an overview/conclusion of all data related to the form. To activate this you have to provide the following public variable in your form class.
When Submitted it fires a event OnFormSubmitted
which can be used to hook on your custom logic for saving or sending the results somewhere.
Other available events:
OnStepCompleted
OnChapterCompleted
Methods:
schema() Define your chapters and inputs here in an array. This will be automagically be converted in a functional form.
Fieldtypes
When constructing your form you make use of these fieldtype classes to build each input.
They can be nested in 'Chapters' but more on that later.
Note: The make($string) method is required to construct a fieldtype object
Fieldtype options:
- ->label(): Label for the input. If not provide we will create a label with the name of the field.
- ->required(): Makes field required.
Text
First of all you have the Text fieldtype.
A example:
Methods:
type($string)
Changes the text input type to the value provided in $string
email() Changes the text input type to email
Validation: email
integer() Changes the text input type to integer
Validation: integer
password() Changes the text input type to password
Validation: password
tel() Changes the text input type to tel
url() Changes the text input type to url
Validation: url
Radiobuttons
A example:
Methods
label Will overwrite the name with the given label
options(array()) Constructs the options of your select input. The key will be the value that is being stored. When you only provide a label, radiobuttons will be shown. If you add an asset, this will hide the radiobutton and only show the assets
Checkboxes
A example:
Methods
single checkbox Creates 1 checkbox. The value will the name. If this needs to be overwritten check the 'label' option
label(string) Will overwrite the name with the given label
options(array()) Constructs the options of your select input. The key will be the value that is being stored. When you only provide a label, radiobuttons will be shown. If you add an asset, this will hide the radiobutton and only show the assets
Range slider
A example:
Methods
label(string) Will overwrite the name with the given label
min(integer) Set minimum value of slider
Validation: min:{amount}
max(integer) Set maximum value of slider
Validation: max:{amount}
step(integer) Set the step of slider
Select
A example:
Methods
options(array()) Constructs the options of your select input. The key will be the value that is being stored. When you only provide a label, radiobuttons will be shown. If you add an asset, this will hide the radiobutton and only show the assets
multiple() This method enables you to select multiple options
Validation
Validation plays a crucial role in the construction of your form. Each fieldtype is equipped with a set of general accessible methods designed to assist you in validating user inputs.
Furthermore, certain specific fieldtype methods automatically incorporate fundamental validation rules. We have included the validation rule within each method where applicable.
Required()
rawRule(string, bool) With rawRule() you can add your own validation rules. all validation rules you define will be added to already defined rules in other methods. If you want to overwrite all automaticlly set validation rules you can switch the optional $overwrite attribute to true
You can add your own custom validations with the method above. Check out the Laravel documentation on Custom validation rules to create your own.
Layout
Steps
You can think of steps like screens. A step can have multiple fieldtypes and will show them step per step.
A example:
Methods
title Adds a title to the step
description Adds a description to step
reactive Makes a step conditional. The function should return a boolean. This wil result in hiding/showing of the step based on input In the example you see this step will only be shown when the 'company' field exists and is 'Digiti'
Chapters
Chapter have multiple steps and can be reactive
A example:
Methods
title Adds a title to the step
description Adds a description to step
reactive Makes a step conditional. The function should return a boolean. This wil result in hiding/showing of the step based on input
In the example you see this step will only be shown when the 'company' field exists and is 'Digiti'
conclusion A chapter can show an overview of all data related to the chapter.
Row
A row is used to wrap Columns. The behaviour is the same as in Bootstrap. Row is not dynamic is html only. You can overwrite default classes to overwrite default styling
classes() This methods lets you overwrite classes.
Column
A Column needs a Row as parent. The behaviour is the same as in Bootstrap.
classes() This methods lets you overwrite classes.
Heading
Let's you create a html heading. Use the level function to select the heading type
classes() This methods lets you overwrite classes.
Paragraph
classes() This methods lets you overwrite classes.
Anchor
classes() This methods lets you overwrite classes.
target() This methods let's you set the target of a link.
rel() This methods let's you set the relationship between a linked resource and the current document.
Html
Image
classes() This methods lets you overwrite classes.