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

    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

    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.

This is how your custom form in Magento 2 will appear frontend.

How to create custom form in Magento 2

That's it.

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!

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.

How to Create Custom Form in Magento 2

An expert in his field, Jignesh is the team leader at Meetanshi and a certified Magento developer. His passion for Magento has inspired others in the team too. Apart from work, he is a cricket lover.