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 [];
}
}
This 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
The Complete Guide to UTM Parameters & Google Analytics for Magento website
Master UTM parameters and Google Analytics for Magento. Track traffic sources, measure campaign performance, and practical tips to use it for better business decisions.
How to implement Cookie Consent for GTM & Google Analytics in Magento Under GDPR?
Implement cookie consent for GTM & GA4 in Magento under GDPR. Step-by-step guide using Google Consent Mode v2 to avoid fines and maintain analytics.
Speed vs. Sales: Comparing Hyvä Checkout and Mageplaza One Step Checkout
Learn how Hyvä Checkout and Mageplaza One Step Checkout impact order completion rates and revenue growth.
Hyvä Theme is Now Open Source: What This Means for Magento Community - Mageplaza
Hyvä is now Open Source and free. Discover what changed, what remains commercial, how it impacts the Magento ecosystem, and how to maximize its full potential.
The Complete Guide to UTM Parameters & Google Analytics for Magento website
Master UTM parameters and Google Analytics for Magento. Track traffic sources, measure campaign performance, and practical tips to use it for better business decisions.
How to implement Cookie Consent for GTM & Google Analytics in Magento Under GDPR?
Implement cookie consent for GTM & GA4 in Magento under GDPR. Step-by-step guide using Google Consent Mode v2 to avoid fines and maintain analytics.
Speed vs. Sales: Comparing Hyvä Checkout and Mageplaza One Step Checkout
Learn how Hyvä Checkout and Mageplaza One Step Checkout impact order completion rates and revenue growth.
Hyvä Theme is Now Open Source: What This Means for Magento Community - Mageplaza
Hyvä is now Open Source and free. Discover what changed, what remains commercial, how it impacts the Magento ecosystem, and how to maximize its full potential.
