How to Create a Custom Form in Magento 2 Admin Panel Programmatically?

The default configuration of Magento 2 doesn't fully satisfy the needs of online merchants.

To gather crucial customer information necessary for creating a personalised shopping experience, store administrators require more than what Magento's default settings offer.

Utilising forms is an excellent method for this purpose.

Creating a custom form in Magento 2 is essential for every e-commerce store.

Fortunately, Magento 2 includes a layout that helps store owners create custom forms with a variety of useful features.

Step 1: Create a Module

First, we need to create a custom module. Follow these steps:

Create module directory structure:

app/code/Mageants/CustomForm

Create the registration.php file:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Mageants_CustomForm',
    __DIR__
);

Create the module.xml file:

<!-- app/code/Mageants/CustomForm/etc/module.xml -->
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Mageants_CustomForm" setup_version="1.0.0">
    </module>
</config>

Defining the Admin Menu

Create the menu.xml file:

Next, we need to define the admin menu item that will link to our custom form:

<!-- app/code/Mageants/CustomForm/etc/adminhtml/menu.xml -->
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <menu>
        <add id="Mageants_CustomForm::custom_form" title="Custom Form" module="Mageants_CustomForm" sortOrder="10" parent="Magento_Backend::content" action="customform/index/index"/>
    </menu>
</config>

Create the acl.xml file:

<!-- app/code/Mageants/CustomForm/etc/acl.xml -->
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <acl>
        <resources>
            <resource id="Magento_Backend::admin">
                <resource id="Mageants_CustomForm::custom_form" title="Custom Form" sortOrder="10" />
            </resource> 
        </resources>
    </acl>
</config>

Create the Admin Router Configuration

<!-- app/code/Mageants/CustomForm/etc/adminhtml/routes.xml -->
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <router id="admin">
        <route id="Mageants_CustomForm" frontName="Mageants_CustomForm">
            <module name="Mageants_CustomForm"/> 
        </route>
    </router>
</config>

Create layout/customform_index_index.xml:

<!-- app/code/Mageants/CustomForm/view/adminhtml/layout/customform_index_index.xml -->
<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="custom_form_block" template="Mageants_CustomForm::form.phtml"/> 
        </referenceContainer>
    </body>
</page>

Create templates/form.phtml:

<!-- app/code/Mageants/CustomForm/view/adminhtml/templates/form.phtml -->
<div class="custom-form">
    <form action="<?= $block->getUrl(Mageants_CustomForm/index/save') ?>" method="post">
        <div>
            <label for="name"><?= __('Name') ?></label>
            <input type="text" name="name" id="name" required>
        </div>
        <div>
            <label for="email"><?= __('Email') ?></label>
            <input type="email" name="email" id="email" required>
        </div>
        <div>
            <button type="submit"><?= __('Submit') ?></button>
        </div>
    </form>
</div>

Create Adminhtml/Controller/Index/Save.php:

<?php
namespace Mageants/CustomForm\Controller\Adminhtml\Index;

use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;
use Magento\Framework\Controller\ResultFactory;

class Save extends Action
{
    public function __construct(
        Context $context
    ) {
        parent::__construct($context);
    }

    public function execute()
    {
        $postData = $this->getRequest()->getPostValue();

        if ($postData) {
            $this->messageManager->addSuccessMessage(__('Form submitted successfully.'));
        } else {
            $this->messageManager->addErrorMessage(__('Unable to submit form. Please try again.'));
        }

        /** @var \Magento\Backend\Model\View\Result\Redirect $resultRedirect */
        $resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
        $resultRedirect->setUrl($this->_redirect->getRefererUrl());
        return $resultRedirect;
    }
}

Conclusion

Creating a custom form in the Magento 2 admin panel programmatically involves creating a custom module, defining the admin menu, creating the form layouts, adding form fields, and handling form submission.

By following this guide, you can enhance your Magento 2 admin panel with custom forms tailored to your specific needs.

If you are looking for a fresh approach to interact with your store visitors and customers, the MageAnts Custom Form Magento 2 extension is just what you need.

Any custom forms that may be used to collect data or allow customers to communicate with you are possible with this tool (e.g., the Contact Us form).

The backend interface is feature-packed and straightforward at the same time. It has everything you need to quickly build Magento 2 custom forms to suit your business's requirements.