4 Steps to Create a Custom Form in Magento 2 Admin
Summer Nguyen | 12-18-2024
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 moreConclusion
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!
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.
Related Post
Import and Export Orders in Magento 2
Simplify data handling for your Magento 2 online store! Learn how to import and export orders in Magento 2 quickly and efficiently with this comprehensive guide.
What are Webhooks in Magento 2
Discover webhooks in Magento 2: a powerful tool to reduce manual workload for business owners. Learn how they work, their key features, and easy configuration tips.
Top 10+ Shopify Store Name Generators: Ultimate Review Guide
By exploring the top 10+ Shopify store name generators, we aim to help you create unique and meaningful store names.
Should I Hire A Shopify Expert? Reasons, How-tos
This article will focus on the question “Should I hire a Shopify expert?”, unlock major reasons & practical tips to find the perfect fit for your business.
How to Make FAQ Page Shopify For SEO: A Comprehensive Guide
Confused by customer questions? This article aims to guide you how to make faq page Shopify that saves your time and boosts sales.
Import and Export Orders in Magento 2
Simplify data handling for your Magento 2 online store! Learn how to import and export orders in Magento 2 quickly and efficiently with this comprehensive guide.
What are Webhooks in Magento 2
Discover webhooks in Magento 2: a powerful tool to reduce manual workload for business owners. Learn how they work, their key features, and easy configuration tips.
Top 10+ Shopify Store Name Generators: Ultimate Review Guide
By exploring the top 10+ Shopify store name generators, we aim to help you create unique and meaningful store names.
Should I Hire A Shopify Expert? Reasons, How-tos
This article will focus on the question “Should I hire a Shopify expert?”, unlock major reasons & practical tips to find the perfect fit for your business.
How to Make FAQ Page Shopify For SEO: A Comprehensive Guide
Confused by customer questions? This article aims to guide you how to make faq page Shopify that saves your time and boosts sales.
& Maintenance Services
Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.
Get Started