How to create custom form in Magento 2.2.3

Question

I like to add custom form with submit button. After submitting the form I need to get details to my email. Please let me know how to start.

Thanks in advance.

Okay i created Returns/Cform/registration.php

php?
\Magento\Framework\Component\ComponentRegistrar::register( 
\Magento\Framework\Component\ComponentRegistrar::MODULE, 
'Returns_Cform', 
__DIR__ 
);

Returns/Cform/Controller/Index/index.php

namespace Returns\Cform\Controller\Index;
use Magento\Framework\App\Action\Action;
class Index extends Action
{
 public function __construct(
 \Magento\Framework\App\Action\Context $context
 ) {
 parent::__construct($context);
 } 
 public function execute()
 {
 $post = $this->getRequest()->getPostValue();
 $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); 
 $data = $objectManager->create('Returns\Cform\Model\Cform');
 $data->setData($post);
 $data->save();
 echo "hello";
 exit; 
 $this->messageManager->addSuccess(__('Form successfully submitted'));
 }
}

Returns/Cform/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="Returns_Cform" setup_version="2.2.0">
 </module>
</config> 

Returns/Cform/etc/frontend/routes.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">
 <router id="standard">
 <route id="cform" frontName="cform">
 <module name="Returns_Cform" />
 </route>
 </router>
</config>

Returns/Cform/Model/Cform.php

<?php
namespace Returns\Cform\Model;
class Cform extends \Magento\Framework\Model\AbstractModel
{
 /**
 * Initialize resource model
 *
 * @return void
 */
 protected function _construct()
 {
 $this->_init('Returns\Cform\Model\ResourceModel\Cform');
 }
}

Returns/Cform/Model/ResourceModel/Cform.php

<?php
namespace Returns\Cform\Model\ResourceModel;
class Cform extends \Magento\Framework\Model\ResourceModel\Db\AbstractDb
{
 protected $storeManager;
 public function __construct(
 \Magento\Framework\Model\ResourceModel\Db\Context $context,
 \Magento\Store\Model\StoreManagerInterface $storeManager,
 $connectionName = null
 ) {
 parent::__construct($context, $connectionName);
 $this->storeManager = $storeManager;
 }
 protected function _construct()
 {
 $this->_init('returns_contect', 'contect_id');
 }
}

Returns/Cform/Model/ResourceModel/Cform/Collection.php

<?php
namespace Returns\Cform\Model\ResourceModel\Cform;
use \Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection;
class Collection extends AbstractCollection
{
 protected $_idFieldName = \Returns\Cform\Model\Cform::CONTECT_ID;
 /**
 * Define resource model
 *
 * @return void
 */
 protected function _construct()
 {
 $this->_init('Returns\Cform\Model\Cform', 'Returns\Cform\Model\ResourceModel\Cform');
 }
}

Return/Cform/Setup/InstallSchema.php

<?php
namespace Returns\Cform\Setup;
use Magento\Framework\Setup\InstallSchemaInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;
/**
 * @codeCoverageIgnore
 */
class InstallSchema implements InstallSchemaInterface
{
 public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)
 {
 $installer = $setup;
 $installer->startSetup();
 /**
 * Create table 'returns_contect'
 */
 $table = $installer->getConnection()->newTable(
 $installer->getTable('returns_contect')
 )->addColumn(
 'contect_id',
 \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
 null,
 ['identity' => true, 'unsigned' => true, 'nullable' => false, 'primary' => true],
 'Contect Id'
 )->addColumn(
 'name',
 \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
 255,
 ['nullable' => false],
 'Name'
 )->addColumn(
 'email',
 \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
 255,
 ['nullable' => false],
 'Email Id'
 )->addColumn(
 'telephone',
 \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
 null,
 ['nullable'=> false],
 'Phone Number'
 )->addColumn(
 'order_id',
 \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
 null,
 ['nullable'=> false],
 'Order ID'
 )->addColumn(
 'product',
 \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
 null,
 ['nullable'=> false],
 'Product Name'
 )->addColumn(
 'quantity',
 \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
 null,
 ['nullable'=> false],
 'Quantity'
 )->addColumn(
 'opened',
 \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
 null,
 ['nullable'=> false],
 'Product is opened'
 )->addColumn(
 'comment',
 \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
 255,
 ['nullable' => false],
 'Reason for Return'
 );
 $installer->getConnection()->createTable($table);
 }
}

Return/Cform/view/frontend/layout/contactform_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
 <referenceContainer name="content">
 <block class="Returns\ContactForm\Block\Form" name="contactForm" template="Returns_ContactForm::form.phtml">
 <container name="form.additional.info" label="Form Additional Info"/>
 </block>
 </referenceContainer>
 </body>
</page>

Return/Cform/view/frontend/templates/form.phtml

<form id="contact-form" class="form-horizontal" method="post" enctype="multipart/form-data" action="<?php echo $this->getUrl("cform/index/index")?>">
 <h3><?= $block->escapeHtml(__('Order Information')) ?></h3>
 <fieldset class="fieldset">
 <div class="field name">
 <label class="label" for="name"><span><?= $block->escapeHtml(__('Name')) ?></span></label>
 <div class="control">
 <input name="name" id="name" class="input-text" type="text" />
 </div>
 </div>
 <div class="field email">
 <label class="label" for="email"><span><?= $block->escapeHtml(__('Email')) ?></span></label>
 <div class="control">
 <input name="email" id="email" class="input-text" type="email" />
 </div>
 </div>
 <div class="field telephone">
 <label class="label" for="telephone"><span><?= $block->escapeHtml(__('Phone Number')) ?></span></label>
 <div class="control">
 <input name="telephone" id="telephone" class="input-text" type="text" />
 </div>
 </div>
 <div class="field order_id">
 <label class="label" for="order_id"><span><?= $block->escapeHtml(__('Order ID')) ?></span></label>
 <div class="control">
 <input name="order_id" id="order_id" class="input-text" type="text" />
 </div>
 </div>
 <h3><?= $block->escapeHtml(__('Product Information')) ?></h3>
 <div class="field product">
 <label class="label" for="product"><span><?= $block->escapeHtml(__('Product Name')) ?></span></label>
 <div class="control">
 <input name="product" id="product" class="input-text" type="text" />
 </div>
 </div>
 <div class="field quantity">
 <label class="label" for="quantity"><span><?= $block->escapeHtml(__('Quantity')) ?></span></label>
 <div class="control">
 <input name="quantity" id="quantity" class="input-text" type="text" />
 </div>
 </div>
 <div class="field comment">
 <label class="label" for="comment"><span><?= $block->escapeHtml(__('Reason for Return')) ?></span></label>
 <div class="control">
 <textarea name="comment" id="comment" class="input-text" cols="5" rows="2" ></textarea>
 </div>
 </div>
 <div class="field opened">
 <label class="label" for="comment"><span><?= $block->escapeHtml(__('Product is opened')) ?></span></label>
 <div class="control">
 <label class="radio-inline">
 <input type="radio" name="opened" value="1"> Yes</label> &nbsp;
 <label class="radio-inline">
 <input type="radio" name="opened" value="0" checked="checked"> No</label>
 </div>
 </div>
 <?= $block->getChildHtml('form.additional.info') ?>
 </fieldset>
 <div class="actions-toolbar">
 <div class="primary">
 <input type="hidden" name="hideit" id="hideit" value="" />
 <button type="submit" id="add" title="" class="action submit primary">
 <span><?= $block->escapeHtml(__('Request Return')) ?></span>
 </button>
 </div>
 </div>
</form>
<script>
require(['jquery'],function($){
 $(document).ready(function(){
 $("#add").click(function(){
 var customurl = "<?php echo $this->getUrl("cform/index/index") ?>";
 $.ajax({
 url: customurl,
 type: "POST",
 data: $(this).closest('form').serialize(),
 dataType: "json",
 success: function(result){
 console.log(result);
 }
 });
 $('#contact-form')[0].reset(); 
 return false;
 });
 });
}); 
</script>

• Sameer Bhayani: Do you want your custom form at frontend or Backend?
• Priya: I need at frontend, like feedback form
• user99550: I have also tried to do the initial example that Priya shows but it has not worked for me, could you please tell me that I should correct it so that in my module from the backend it works for me?

Answer 1

Create layout XML

/app/code/Company/Module/view/frontend/layout/module_index_custom.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <referenceContainer name="content">
 <block class="Company\Module\Block\Custom" name="customer_index_gallery" template="Vendor_Module::custom.phtml" cacheable="false"/>
 </referenceContainer>
</page>

/app/code/Company/Module/Block/Custom.php

<?php
namespace Vendor\Module\Block;
class Custom extends \Magento\Framework\View\Element\Template
{
 /**
 * Construct
 *
 * @param \Magento\Framework\View\Element\Template\Context $context
 * @param array $data
 */
 public function __construct(
 \Magento\Backend\Block\Template\Context $context,
 array $data = []
 )
 {
 parent::__construct($context, $data);
 }
 /**
 * Get form action URL for POST booking request
 *
 * @return string
 */
 public function getFormAction()
 {
 return '/companymodule/controller_name/custom';
 // here controller_name is index, action is booking
 }
}

/app/code/Company/Module/view/frontend/templates/custom.phtml

<form action="<?php echo $block->getFormAction() ?>" method="post">
 <input name="firstname" type="text">
 <input name="lastname" type="text">
 <input name="email" type="text">
 <input type="submit" value="informations">
</form>

/app/code/Company/Module/Controller/Index/Custom.php

<?php
namespace Company\Module\Controller\Index;
use Magento\Framework\Controller\ResultFactory;
class Custom extends \Magento\Framework\App\Action\Action
{
 /**
 * Booking action
 *
 * @return void
 */
 public function execute()
 {
 // 1. POST request : Get booking data
 $post = (array) $this->getRequest()->getPost();
 if (!empty($post)) {
 // Retrieve your form data
 $firstname = $post['firstname'];
 $lastname = $post['lastname'];
 $email = $post['email'];
 
 // Doing-something with...
 // Display the succes form validation message
 $this->messageManager->addSuccessMessage('Booking done !');
 // Redirect to your form page (or anywhere you want...)
 $resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
 $resultRedirect->setUrl('/companymodule/index/custom');
 return $resultRedirect;
 }
 
 }
}

• Priya: Please let me noe file name for "/app/code/Company/Module/Block"
• Arunprabakaran M: Block file name Custom.php
• Priya: Thanks for the list, i like to recive email after "informations submit"
• Arunprabakaran M: get email in controller file $email = $post['email']
• Priya: i did not receive any email

Answer 2

Here I show you the modified example given the characteristics of my module:

RealexPayments/HPP/Controller/Index/index.php

enter image description here

RealexPayments/HPP/etc/module.xml

enter image description here

RealexPayments/HPP/etc/adminhtml/routes.xml

enter image description here

RealexPayments/HPP/Model/Cform.php

enter image description here

RealexPayments/HPP/Model/ResourceModel/Cform.php

enter image description here

RealexPayments/HPP/Model/ResourceModel/Cform/Collection.php

enter image description here

RealexPayments/HPP/view/adminhtml/layout/contactform_index_index.xml

enter image description here

RealexPayments/HPP/view/adminhtml/templates/form.phtml

enter image description here