Magento 2 Custom Admin Forms – Create Backend Forms Easily

📝 Magento 2 Custom Admin Forms

Need to collect or manage custom data in Magento’s admin panel? That’s where custom admin forms shine. With Magento 2’s UI Component system, we can build powerful, clean backend forms with validation, fieldsets, tabs, and more.

🎯 What We’ll Build

We’ll create a simple admin form to manage a custom entity like “Notice” with fields: Title, Content, and Status.

📁 Step-by-Step Folder Structure

Create your module like:

app/code/Vendor/AdminForm/
├── etc/
│   └── adminhtml/menu.xml, routes.xml
├── Controller/Adminhtml/Notice/Edit.php, Save.php
├── view/adminhtml/layout/notice_edit.xml
├── view/adminhtml/ui_component/notice_form.xml
├── Block/Adminhtml/Notice/Edit/Form.php
└── registration.php, module.xml

🔧 Example: Admin Form UI Component

This XML defines your admin form using UI Components.


<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">notice_form.notice_form_data_source</item>
            <item name="deps" xsi:type="string">notice_form.notice_form_data_source</item>
        </item>
        <item name="label" xsi:type="string">Notice Form</item>
        <item name="dataScope" xsi:type="string">data</item>
    </argument>
    <dataSource name="notice_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Vendor\AdminForm\Model\Notice\DataProvider</argument>
            <argument name="name" xsi:type="string">notice_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
        </argument>
    </dataSource>
    <fieldset name="general">
        <field name="title">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="label" xsi:type="string">Title</item>
                    <item name="required" xsi:type="boolean">true</item>
                </item>
            </argument>
        </field>
        <field name="content">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">textarea</item>
                    <item name="label" xsi:type="string">Content</item>
                    <item name="required" xsi:type="boolean">false</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

Try It Now

🧠 Controller to Load the Form

/* File: Controller/Adminhtml/Notice/Edit.php */
namespace Vendor\AdminForm\Controller\Adminhtml\Notice;

use Magento\Backend\App\Action;
use Magento\Framework\View\Result\PageFactory;

class Edit extends Action
{
    protected $resultPageFactory;

    public function __construct(Action\Context $context, PageFactory $resultPageFactory)
    {
        parent::__construct($context);
        $this->resultPageFactory = $resultPageFactory;
    }

    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        $resultPage->setActiveMenu('Vendor_AdminForm::notices');
        $resultPage->getConfig()->getTitle()->prepend(__('Edit Notice'));
        return $resultPage;
    }
}

Try It Now

📋 Add Form Container Block

/* File: Block/Adminhtml/Notice/Edit/Form.php */
namespace Vendor\AdminForm\Block\Adminhtml\Notice\Edit;

use Magento\Backend\Block\Widget\Form\Container;

class Form extends Container
{
    protected function _construct()
    {
        $this->_blockGroup = 'Vendor_AdminForm';
        $this->_controller = 'adminhtml_notice';
        $this->_mode = 'edit';
        $this->buttonList->update('save', 'label', __('Save Notice'));
    }
}

Try It Now

🚀 Result

Once everything is in place, you’ll have a working custom admin form accessible from your custom admin menu. Use it to insert or edit data for your custom entity like a pro.

✅ Summary

Custom admin forms in Magento 2 are built with UI Components
You need controller, block, layout, and XML UI Component files
Great for creating settings panels, entity editors, and admin dashboards

Mastering these forms gives you superpowers to manage any custom data right inside the Magento backend!