Form Builder
Create custom Front-end forms
Form Builder
Create custom front-end forms with a simple builder
Features
- Build and manage your forms in TastyIngiter backend
- Use custom HTML markup for fields
- Create custom fields
- Google reCaptcha support
- Reply to functionality
- Form logs with export functionality
- Event for extending default functionality
Documentation
Usage
After installation extension will register backend Form Builder menu position. From there you will be able to manage your forms.
There will be three sub-menus, Forms, Field types and Form logs. Forms will list all created forms. Field types will list all available field types and Form logs will list all data sent by user
On installation the extension will create example form with some field types.
Extension will register renderForm component to use it on your page. After adding this component to page, you must choose the form to be displayed, you can also specify the redirect page which will be showed to user after successful form sent then manually insert @component('renderForm') where you want that it will be rendered in the page.
Available field types
- Text
- Number
- Date
- Time
- Range
- Terms of service
- Textarea
- Select
- Checkbox
- Checkbox list
- Checkbox inline list
- Radio list
- Radio inline list
- Google ReCaptcha
- Section
- Submit button
Section
Renders a section with assigned fields to group multiple fields together. Fields has Section select which is used to assign section to them. Sections fields will be rendered before other fields.
reCaptcha
Renders google reCaptcha box for SPAM protection.
To obtain reCaptcha credentials please go to the following page reCaptcha site, at the moment only v2 "I\'m not a robot" checkbox type is supported.
Next go to System > Settings Form Builder Google reCaptcha and fill your site key and secret. You can choose between dark end light style and the language of the field (or leave to Auto-detect)
Important note: This field must have g-recaptcha-response as field name and required|googlerecaptcha in validation section to work properly. When you add a reCaptcha field to your form this values are automatically setted, don't change it.
Visibility
Fields can be excluded from the rendered form by uncheck "Visible" switch in the field, an icon in field list indicate the visibility of the field.
Require
You can add required attribute to the fields by check "Required" switch in the field, this add a required HTML attribute to the rendered tag field, an icon in field list indicate the Require attribute state of the field.
Custom field types
You can create custom field types by going to Form Builder > Field types and create New button.
Now after saving this field it will be possible to use it in your form.
In markup section you can use Blade and following variables:
Variable | Type | Description |
---|---|---|
$label | String | Label for the field. |
$name | String | HTML name attribute. Also used in mail template. |
$default | String | Default value for the field. |
$class | String | HTML class. |
$wrapper_class | String | HTML wrapper class. |
$placeholder | String | Placeholder for the field. |
$options | Array | Options for select, radio (inline) list, checkbox (inline) list. |
$custom_attributes | String | Custom HTML attributes. For example id="my-field". |
$tos_label | String | Text of the anchor for the Terms of service |
$tos_url | String | Url of Terms of service linked by $tos_label |
Mail templates
Extension uses mail templates created in TastyIgniter. To create new template, please go to Design > Mail Templates.
Extension include basic mail template, but you should customize it for your project.
Form Logs and Mail logging
Form Builder extension will log information about sent form.
Form log record will contain filled form data by user and html email sent to him.
Events
Extension will fire formBuilder.beforeSendMessage event before sending email. You can use this to extend Form Builder default functionality.
In your extension boot method listen for this event:
Event::listen('formBuilder.beforeSendMessage', function ($form, $data, $files) {
});
You will have access to form object and array with posted data.
If you return true from this event than this will stop default behavior of sending email message.
Releases
-
Latest release
v1.0.2
Fix empty list translations
-
v1.0.1
- Fix static method
- Fix if settigs is not configured
-
v1.0.0