Vinh Jacker | 03-17-2025
Normally, the default configuration of Magento 2 is not able to meet all the demands of online merchants. To collect customer information which is important to create a personalized shopping experience, the store admin needs more than what Magento Default provides. Using forms is a great way to do that.
It is essential for every e-commerce store to create a custom form in Magento 2. Interestingly, Magento 2 comes with UI components, which assist store owners in creating a custom form with many useful features.
In this article, I will show you how to do that through 4 steps To Create A Custom Form In Magento 2!
Firstly, you need to create a controller file
app/code/[Name_Space]/[Your_Module]/Controller/Adminhtml/SampleForm/Index.php
<?php
namespace [Name_Space]\[Your_Module]\Controller\Adminhtml\SampleForm;
class Index extends \Magento\Framework\App\Action\Action
{
/** @var \Magento\Framework\View\Result\PageFactory */
protected $resultPageFactory;
public function __construct(
\Magento\Framework\App\Action\Context $context,
\Magento\Framework\View\Result\PageFactory $resultPageFactory
) {
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
/**
* Load the page defined in view/adminhtml/layout/samplenewpage_sampleform_index.xml
*
* @return \Magento\Framework\View\Result\Page
*/
public function execute()
{
return $this->resultPageFactory->create();
}
}
In the next step, you are required to create a layout file
app/code/[Name_Space]/[Your_Module]/view/adminhtml/
layout/samplenewpage_sampleform_index.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<head>
<title>
Sample Form
</title>
</head>
<body>
<referenceContainer name="content">
<uiComponent name="sampleform_form"/>
</referenceContainer>
</body>
</page>
In the third step, please create the UI component file
app/code/[Name_Space]/[Your_Module]/view/adminhtml/ui_component/sampleform_form.xml
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/Ui/etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">sampleform_form.sampleform_form_data_source</item>
<item name="deps" xsi:type="string">sampleform_form.sampleform_form_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">Sample Form</item>
<item name="layout" xsi:type="array">
<item name="type" xsi:type="string">tabs</item>
</item>
</argument>
<dataSource name="sampleform_form_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">[Name_Space]\[Your_Module]\Model\DataProvider</argument>
<argument name="name" xsi:type="string">sampleform_form_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">entity_id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
</argument>
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
</item>
</argument>
</dataSource>
<fieldset name="sample_fieldset">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Sample Fieldset</item>
</item>
</argument>
<!-- This field represents form id and is hidden -->
<field name="entity_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="visible" xsi:type="boolean">false</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">sampleform</item>
</item>
</argument>
</field>
<!-- This field has data type 'text' and standard 'input' form element and looks like input -->
<field name="title">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">New title</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">sampleform</item>
</item>
</argument>
</field>
</fieldset>
</form>
Lastly, you have to create the provider file to finish the process of creating the custom form with the UI component in Magento 2.
app/code/[Name_Space]\[Your_Module]\Model\DataProvider.php
<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
namespace [Name_Space]\[Your_Module]\Model;
/**
* Class DataProvider
*/
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
/**
* Get data
*
* @return array
*/
public function getData()
{
return [];
}
}
Custom Form extension for Magento 2
Set up conditional logic to show or hide form fields based on the customer's input, making the form more intuitive and user-friendly.
Learn moreThis is the detailed instruction for creating a custom form in Magento 2 with a UI component, which is one of the most popular forms in Magento 2 you have to be familiar with.
However, if you find the process too complex, we recommend utilizing a third-party module with a user-friendly interface and a more comprehensive range of features. For a simpler alternative, consider exploring the Magento 2 Custom Form extension, which provides ease of use and added versatility to meet your needs. Here’s a guide to learning how to create Custom Contact Form in Magento 2 frontend with the module.
I hope that this guide is useful for you! If you have any questions or want to discuss this post, feel free to leave a comment below!
Jacker is the Chief Technology Officer (CTO) at Mageplaza, bringing over 10 years of experience in Magento, Shopify, and other eCommerce platforms. With deep technical expertise, he has led numerous successful projects, optimizing and scaling online stores for global brands. Beyond his work in eCommerce development, he is passionate about running and swimming.
Related Post
Review 74 Mageplaza extension updates from April 2025, highlighting Magento 2.4.8 compatibility, Hyvä theme support, and enhanced functionalities.
Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.
Get Started
