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

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

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!

Image Description
Summer Nguyen
A data-driven marketing leader with over 10 years of experience in the ecommerce industry. Summer leverages her deep understanding of customer behavior and market trends to develop strategic marketing campaigns that drive brand awareness, customer acquisition, and ultimately, sales growth for our company.
Previous Latest Guide on How to Add Images To Product in Magento 2
Next How to Create Configurable Product with Magento 2 API
One Step Checkout for Magento 2 by Mageplaza
x