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
• Email
• 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
• File Uploader

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.

File Uploader

Renders a Dropzone widget for uploading files.

You can define max size and accepted file types with validation rules (https://laravel.com/docs/8.x/validation), the form support only one file uploader field instance at the time but setting "max" attribute in field configuration you can define how many files user can upload and with the min attribute you can define the minimun number of files that the user will have to upload. The uploaded files will be attached to the sent email.

Example Setting max attribute field to 3 and min to 2 with this validation rulse "required|max:3000|mimes:pdf,png" the widget will accept only pdf and png file with a max size of 3 megabyte, the user will be capable to upload a maximum of three file but at least two file will have to be loaded.

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:

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.