Getting Started

Welcome to the Custom Form Builder documentation.

Whether you are a new or an advanced user, you can find some useful information here.

Go ahead, dive in!

Firstly, please, find our extension in My Downloadable Products section of our store. Learn how to install extension.

How to install the extension

How to install the extension using composer

  1. Backup your store's database and web directory.
  2. Login to the SSH console on your server and navigate to the root directory of the Magento 2 store.
  3. Copy the installation instructions from the page My Downloadable Products to the SSH console and press ENTER.
  4. Run command php -f bin/magento module:enable Mirasvit_Core Mirasvit_FormBuilder to enable the extension.
  5. Run command php -f bin/magento setup:upgrade to install the extension.
  6. Run command php -f bin/magento cache:clean to clean the cache.
  7. Deploy static view files

    rm -rf pub/static/*; rm -rf var/view_preprocessed/*; php -f bin/magento setup:static-content:deploy

How to install the extension manually

  1. Backup your store's database and web directory.
  2. Download archive from My Downloadable Products.
  3. Unzip the extension locally.
  4. Copy unzipped folder to the root directory of the Magento store.
  5. Run command php -f bin/magento module:enable Mirasvit_Core Mirasvit_FormBuilder to enable the extension.
  6. Run command php -f bin/magento setup:upgrade to install the extension.
  7. Run command php -f bin/magento cache:clean to clean the cache.
  8. Deploy static view files

    rm -rf pub/static/*; rm -rf var/view_preprocessed/*; php -f bin/magento setup:static-content:deploy

Quick Start

Our Custom Form Builder for Magento 2 is a simple, yet powerful extension, that allows creating eye-catching forms (call back forms, price match requests, contact forms, order forms, etc.) of various complexity in a visual editor.

Start from the following settings:

  • Forms - create your own Custom Form or with ready-made templates without touching a single line of code.
  • Answers - manage all submitted Forms in one place.
  • Statuses - create unique Status of submitted Form for easy management.

Forms

To see and manage all created forms in one place, go to Content -> Form Builder -> Forms.

You may create your own by the Add Form or choose one of the predefined forms: Call Back, Contact Us, Price Match Request, Satisfaction Survey.

On the forms grid page, you can sort by ID, Name, Code, Status, Answers. At the Action column, click Select for Deleting or Editing the necessary Form.

Edit page consists of sections:

Take a look at the Custom Form shown on the frontend click Preview at the editing page.

To display a finished form in the frontend, check our example here.

General Information


  • Active - Form status.
  • Internal Name - Form name. Used only for internal purposes.
  • Store View - store view where Form can be applied.
  • Customer Groups - customer groups where Form can be applied.
  • Internal Note - Form Notes for admin. Used only for internal purposes.

Form Builder


Creating a form is as simple as dragging visual components in the Form Builder window and dropping them where you need them on the form. Each component that serves as a field on the resulting form comes with reasonable defaults, but you can fine-tune each field by setting their properties while editing the form.

Success Actions


This section is for redirecting customers after he/she fulfills the Form.

  • Success URL - Redirect visitor after submitting the form. Leave empty to preventing redirecting.
  • Success Message - It will be shown to the customer once the Form sent. You can use the variables.

Email Configuration


  • Admin emails - Specify the particular admin email.
  • Admin Email Template - Specify an email template.

Additional Info


  • Form Code - Form Code. Used for internal purposes (will be displayed at the Insert Widget page).

How to display Form on the frontend


Custom Forms will be displayed through the Magento Widgets.
For example, you want to add Call Back form at the 404 Not Found page. Hence, on the Admin sidebar, go to Content -> Elements -> Pages select required CMS Page, or create a new one. At the Contend editor, add Insert Widget -> Widget Type choose Form Builder and enter the necessary Form Code.

Answers

To see and manage all submitted forms in one place, go to Content -> Form Builder -> Answers.

On the Answers grid page, you can sort by ID, Form, Store View, Status, Created At. At the Action column click Select for Deleting or Editing the necessary Form.

Edit page consists of sections:

  • General Information - divided into two parts: Submitted Data (will be available in the preview window on the Answers grid and Information (data about user which submitted the form).
  • Internal Note - Form Notes for admin. Used only for internal purposes.
  • Status - Admin sets the status of the answer.

Statuses

To see and manage all Statuses in one place, go to Content -> Form Builder -> Statuses.

On the Statuses grid page, you can sort by ID, Title, Sort Order, Color. At the Action column, click Select for Deleting or Editing the necessary status. You may create your own by Add New Status.

Edit page consists of General Information:

  • Title - Status title.
  • Code - Status Code. Used for internal purposes.
  • Color - Set the Status color label.

How to upgrade extension

To upgrade the extension, follow these steps:

  1. Backup your store's database and web directory.
  2. Login to the SSH console of your server and navigate to the root directory of the Magento 2 store.
  3. Run command composer require mirasvit/module-form-builder:* --update-with-dependencies to update current extension with all dependencies.

    Note

    In some cases, the command above is not applicable, or it's not possible to update just the current module, or you need to upgrade all Mirasvit modules in a bundle. In this case, the command above will have no effect.

    Run instead composer update mirasvit/* command. It will update all Mirasvit modules installed in your store.

  4. Run command php -f bin/magento setup:upgrade to install updates.
  5. Run command php -f bin/magento cache:clean to clean the cache.
  6. Deploy static view files

    rm -rf pub/static/*; rm -rf var/view_preprocessed/*; php -f bin/magento setup:static-content:deploy

Disabling the Extension

Temporarily Disable

To temporarily disable the extension please follow these steps:

  1. Login to the SSH console on your server and navigate to the root directory of the Magento 2 store.
  2. Run the command php -f bin/magento module:disable Mirasvit_FormBuilder to disable the extension.
  3. Log in to the Magento backend and refresh the store cache (if enabled).

Extension Removal

To uninstall the extension, please follow these steps:

  1. Login to the SSH console on your server and navigate to the root directory of the Magento 2 store.
  2. Run command php -f bin/magento module:disable Mirasvit_FormBuilder to disable the extension.
  3. Run command composer remove mirasvit/module-form-builder to remove the extension.
  4. Log in to the Magento backend and refresh the store cache (if enabled).

1.0.8

(2020-09-24)

Fixed

  • Compatibility with m2.2.0

1.0.7

(2020-08-11)

Improvements

  • Small spelling fixes

1.0.6

(2020-08-19)

Improvements

  • Added hidden type for text field input
  • Added new variable {{ page.url }}

1.0.5

(2020-08-17)

Fixed

  • Issue with escaper

1.0.4

(2020-08-17)

Improvements

  • Ability to print results
  • Ability to edit results in the backend
  • New autocomplete field (products autocomplete)
  • Display form submissions in the account

1.0.3

(2020-07-30)

Improvements

  • Support of Magento 2.4

1.0.2

(2020-07-02)

Fixed

  • Minor fixes

1.0.0

(2020-06-02)

Improvements

  • Initial release

0.0.1

(2020-05-21)

Improvements

  • Pre-release version