How to Create Custom Form in Magento 2

The shopping experience in an online store is a huge factor and store owners do not leave any stone unturned in employing strategies to collect maximum customer data for improving their store experience.

Success in today’s competitive E-commerce market depends on calculative decisions based on data and analysis. Also, as a customer, allowing businesses to process your data benefits you in ways like better service, personalized and quick recommendations, etc.

One of the ways to collect customer data is through forms. As default Magento 2 does not offer sufficient forms and its fields, I have posted a programmatic method to create custom form in Magento 2.

With the below solution, you can create a form in Magento 2 with fields like text, numbers, date, etc. Not only this, but you can set validation for each field to ensure correct data collection from the Magento 2 frontend customers.

You can create Magento 2 custom forms like feedback form, surveys, contact form, registration form, donation form, audit form, etc. It depends on the type and requirements of your business.

Method to create custom form in Magento 2:

1. Update code in file Form.php at app\code\Meetanshi\Extension\Block
   
   <?php namespace Meetanshi\Extension\Block; use Magento\Framework\View\Element\Template; use Magento\Backend\Block\Template\Context; class Form extends Template { public function __construct(Context $context, array $data = []) { parent::__construct($context, $data); } public function getFormAction() { return $this->getUrl('extension/index/submit', ['_secure' => true]); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   <?php   namespace Meetanshi\Extension\Block;   use Magento\Framework\View\Element\Template; use Magento\Backend\Block\Template\Context;   class Form extends Template {     public function __construct(Context $context, array $data = [])     {         parent::__construct($context, $data);     }       public function getFormAction()     {         return $this->getUrl('extension/index/submit', ['_secure' => true]);     } }

2. Update code in file form.phtml at app\code\Meetanshi\Extension\view\frontend\templates
   
   <div class="row"> <div class="col-md-8"> <form name="addData" method="post" id="addData" class="form" action="<?php echo $this->getFormAction(); ?>" data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>" data-mage-init='{"validation":{}}'> <fieldset class="fieldset"> <legend class="legend"><span><?= $block->escapeHtmlAttr(__('Fill Detail')) ?></span></legend> <fieldset class="fieldset row"> <div class="fields col-md-6"> <div class="field name required"> <label class="label" for="title"><span><?= $block-> escapeHtmlAttr(__('Name')) ?></span></label> <div class="control"> <input name="name" id="name" title="Name" value="" class="input-text" type="text" data-validate="{required:true, 'validate-alphanum-with-spaces':true}"> </div> </div> <div class="field name required"> <label class="label" for="title"><span><?= $block-> escapeHtmlAttr(__('Email')) ?></span></label> <div class="control"> <input name="email" id="email" title="Email" value="" class="input-text" type="text" data-validate="{required:true, 'validate-email':true}"> </div> </div> <div class="field name required"> <label class="label" for="title"><span><?= $block->escapeHtmlAttr(__('Telephone')) ?></span></label> <div class="control"> <input name="telephone" id="telephone" title="Telephone" value="" class="input-text" type="text" data-validate="{required:true}"> </div> </div> </div> </fieldset> </fieldset> <div class="actions-toolbar"> <div class="primary"> <button type="submit" class="action submit primary" title="Save"><span><?= $block-> escapeHtmlAttr(__('Save')) ?></span></button> </div> </div> </form> </div> </div>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

   <div class="row">     <div class="col-md-8">         <form name="addData" method="post" id="addData" class="form"               action="<?php echo $this->getFormAction(); ?>"               data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>"               data-mage-init='{"validation":{}}'>             <fieldset class="fieldset">                 <legend class="legend"><span><?= $block->escapeHtmlAttr(__('Fill Detail')) ?></span></legend>                 <fieldset class="fieldset row">                     <div class="fields col-md-6">                         <div class="field name required">                             <label class="label" for="title"><span><?= $block->                                 escapeHtmlAttr(__('Name')) ?></span></label>                             <div class="control">                                 <input name="name" id="name" title="Name" value="" class="input-text" type="text"                                        data-validate="{required:true, 'validate-alphanum-with-spaces':true}">                             </div>                         </div>                         <div class="field name required">                             <label class="label" for="title"><span><?= $block->                                 escapeHtmlAttr(__('Email')) ?></span></label>                             <div class="control">                                 <input name="email" id="email" title="Email" value="" class="input-text" type="text"                                        data-validate="{required:true, 'validate-email':true}">                             </div>                         </div>                         <div class="field name required">                             <label class="label" for="title"><span><?= $block->escapeHtmlAttr(__('Telephone')) ?></span></label>                             <div class="control">                                 <input name="telephone" id="telephone" title="Telephone" value="" class="input-text"                                        type="text" data-validate="{required:true}">                             </div>                         </div>                     </div>                 </fieldset>             </fieldset>             <div class="actions-toolbar">                 <div class="primary">                     <button type="submit" class="action submit primary" title="Save"><span><?= $block->                         escapeHtmlAttr(__('Save')) ?></span></button>                 </div>             </div>         </form>     </div> </div>

We have created getFormAction() in block file that will be used in the template file.

Additionally, if the form is long enough, you can add checkout-like progress bar to it and make it easy for the customers to fill up.

This is how your custom form in Magento 2 will appear frontend.Create new database table in Magento 2 to store and retrieve the data. Not only that, but you can also perform various operations such as insert, update and delete on the table data.

That’s it. Also to prevent yourself from multiple form submission and storing same data of same user, once clicked on submit button disable submit button on form submission in Magento 2.

Now that you know the solution to create Magento 2 form and collect customer data, you are all set to have a database that is going to be the cornerstone of your marketing strategy! You may also love to read How to Add Validation For Custom Password Field in Magento 2.

Any doubts with the topic? Do mention them in the Comments section below. I’d be happy to help.

Also, please share the solution with Magento 2 developers via social media.

Thank you.