Today, we will talk about creating custom web forms on a Magento 2 site. If you are looking for an appropriate third-party solution with a comprehensive set of tools, pay attention to the Magento 2 Custom Form Builder extension by Mirasvit. With the module. online store managers can quickly build custom forms for various purposes and tweak their design and layout. The Magento 2 custom form module comes with a drag-and-drop form constructor, a rich selection of elements, support for various field input types, and other handy features. Below, we have a closer look at the Mirasvit Custom Form Builder extension’s functionality and describe how it works in the backend and frontend.
- Visual editor for creating custom forms with multiple elements;
- A selection of ready-to-use templates;
- A big variety of form elements and field input types;
- Visual editor with a drag-and-drop tool in the form configuration;
- Ability to create forms with multiple pages;
- Fields with conditional logic;
- Forms can be displayed anywhere on the frontend using Magento Widgets;
- Spam protection with integrated Google Invisible reCaptcha;
- Fully responsive design.
Mirasvit Custom Form Builder enables online store managers to create various types of forms and easily add them to the website. The forms have a fully responsive design, so they will look great both on the desktop, tablets, and smartphones. The Magento 2 custom form module provides a wide selection of elements that you can use depending on the purpose of your form. This way, merchants can collect additional data about their customers and use it to fine-tune their marketing and sales strategies.
With the Mirasvit webform extension for Magento 2, you can build your custom form from scratch or use one of the available templates with a pre-configured layout. You can utilize one of the following pre-made templates: call back form, price match request, contact us form, or satisfaction survey. You can customize templates’ design to make them satisfy your requirements.
The extension comes with a handy form constructor with a drag-and-drop editor. With the tool, you can quickly drag all required elements to your form template and adjust their position on a page by changing their order. To make your custom form more visually appealing, you can divide its fields into several columns. Also, note that the Mirasvit Magento 2 form builder module supports both one-page and multi-page forms. Before saving your template, you can preview its appearance on the frontend with one click.
Furthermore, it is possible to pre-fill particular fields with personal details of registered users, like first name, last name, address, etc., and show this data as default on the frontend. Customers can also be offered to upload a relevant file or image to make their submission more informative. Moreover, you can create custom messages displayed to your clients after they successfully fill in the form. It is also possible to set up redirects to a particular page on the form submission.
Another prominent feature of the Magento 2 contact form extension is the ability to create dynamic fields. It means that you can use conditional logic for particular fields, arranging them in a specific order based on a customer’s answer. This feature is very beneficial for building surveys and polls. Besides, you can mark selected fields as mandatory for filling in. This way, you can be sure that you will collect essential data from your website visitors.
Created forms can be embedded into any CMS page of your web store via widgets. Using widgets, you can select any position for your custom form to attract website visitors’ attention and increase the chances of collecting customer data. You can also decide on which store views a form will be displayed and choose customer groups that will have access to filling in the form.
As for some admin features, store managers can quickly check all submitted answers and analyze filled in data from one place in the backend. You can also configure automatic email notifications to inform your admins about a new form submission.
Next, we will explore the backend interface of Mirasvit Magento 2 Custom Form Builder to understand better how it works from the admin perspective.
All created forms are gathered in a grid under Content -> Form Builder -> Forms. The grid shows the following information on each custom form: an ID, name, code, status, and answers. You can edit or delete selected forms from the Action column and filter out the grid records. When adding a new form, you can create a new one from scratch or select one from the pre-made templates – Call Back, Contact Us, Price Match Request, or Satisfaction Survey.
We will look at the available form elements and settings on the example of the call back form. The form edit page is divided into 5 sections: General Information, Form Builder, Success Actions, Email Configuration, and Embedding.
In the first section, you enable/disable the form, specify its internal name, select store views where it will be visible and customer groups to which it will be available, and add an internal note for the admin if necessary.
The following section contains a form builder divided into 2 blocks: an area for adding elements to your form (on the left) and all available elements (on the right). Note that it is possible to add multiple pages to the form. Elements are added to the form via dragging and dropping from the right area to the form builder window. After moving the necessary elements to your form, you can change their position on the page.
In Success Actions, you can specify a URL path to redirect customers after submitting a form and create a text for the success message displayed after a customer sends a form (variables can be used here).
Next, you can enter an email for admin notifications and select an appropriate email template.
The Embedding section contains a field for specifying the form code and code snippets for inserting the created form into CMS pages, .xml layout files, and .phtml templates.
Forms submitted by customers can be viewed and managed on a separate screen under Content -> Form Builder -> Answers. The grid here includes 9 columns with the information about each submitted answer, as well as applicable actions:
- Store View,
- Remote Address,
- Created At,
- Internal Note,
- Updated At,
- Action (Edit, Print, Delete).
By hovering over an eye icon next to an answer’s ID number, you can quickly check the data a customer filled in the form fields.
The answer view page displays all submitted data and allows editing it. Here, you can also view information about a customer who sent the form, add an internal note for the admin, and change the submission status (Pending or Processed).
The Custom Form Builder extension by Mirasvit also provides a separate grid for statuses under Content -> Form Builder -> Statuses. You can edit or delete each existing status from the Action column and add new custom statuses.
When adding a new status, you need to create its title and code, set the sorting order, and choose a color.
Now, when you understand how to configure Mirasvit Custom Form Builder in the backend, let’s have a look at a few frontend examples of custom forms created with the Magento 2 extension.
The call back form, which configuration we were describing above, has the following look on the frontend:
Below is an example of a customer service survey form:
We also give an example of a custom form with all available elements:
Also, note that form submissions are displayed in the customer account:
Mirasvit Custom Form Builder is a robust solution that substantially extends default Magento 2 possibilities and enables users to create unique forms that meet any business requirements. With the module, you can easily build custom forms of different types that will engage customers and help you collect all necessary data from them. This way, you will improve communication with your online store visitors and understand their interests and demands better. You can buy the Magento 2 custom form module by Mirasvit for $249.'