4 Steps to Create a Custom Form in Magento 2 Admin

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!

Step 1: Create A Controller File
Step 2: Create A Layout File
Step 3: Create A UI Component File
Step 4: Create A Provider File

Step 1: Create A Controller File

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();
}
}

Step 2: Create A Layout File

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>

Step 3: Create The UI Component File

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>

Step 4: Create Provider File

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 more

Conclusion

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!

Summer Nguyen

Marketing Manager of Mageplaza. Summer is attracted by new things. She loves writing, travelling and photography. Perceives herself as a part-time gymmer and a full-time dream chaser.

Previous Latest Guide on How to Add Images To Product in Magento 2

Next How to Create Configurable Product with Magento 2 API