I had developed "Hello world" extension in Magento 2.
I want to override contact Us form of core files. What is correct way for overriding Contact us form file in Magento 2.
Please help me. Any help would be appreciated.
Unlike the two previous answers, I chose to remove the original block from the layout and add a new one using my own template.
We will create a new module, VendorName_ModuleName
, for which we need to create the following files :
/app/code/VendorName/ModuleName/view/frontend/layout/contact_index_index.xml
/app/code/VendorName/ModuleName/view/frontend/templates/form.phtml
/app/code/VendorName/ModuleName/etc/module.xml
/app/code/VendorName/ModuleName/composer.json
/app/code/VendorName/ModuleName/registration.php
Every module in Magento 2 has unique name that’s made up of two parts. The first part is a word that describes the company, individual, or group that built the extension. This is sometimes called the “vendor” namespace. The second part of a module’s name is a word that describes what the module does.
Alan Storm, in his tutorial Magento 2 Hello World Module
<?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">
<body>
<!-- Remove the original Contact Form -->
<referenceBlock name="contactForm" remove="true"/>
<!-- Add a custom Contact Form -->
<referenceContainer name="content">
<block class="Magento\Contact\Block\ContactForm" name="customContactForm" template="My_Module::form.phtml" />
</referenceContainer>
</body>
</page>
In the above code, I removed the original form Block and replaced it by adding my own form inside the referenceContainer
content.
Note :
In
contact_index_index.xml
, the codetemplate="My_Module::form.phtml"
refers to your custom contact form'sphtml
.
Now, you need to make the custom form template. You can copy the original one and make modifications to this file.
<form class="form contact"
action="<?php /* @escapeNotVerified */ echo $block->getFormAction(); ?>"
id="contact-form"
method="post"
data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>"
data-mage-init='{"validation":{}}'>
<fieldset class="fieldset">
<legend class="legend"><span><?php /* @escapeNotVerified */ echo __('Write Us') ?></span></legend><br />
<div class="field note no-label"><?php /* @escapeNotVerified */ echo __('Jot us a note and we’ll get back to you as quickly as possible.') ?></div>
<div class="field name required">
<label class="label" for="name"><span><?php /* @escapeNotVerified */ echo __('Name') ?></span></label>
<div class="control">
<input name="name" id="name" title="<?php /* @escapeNotVerified */ echo __('Name') ?>" value="<?php echo $block->escapeHtml($this->helper('Magento\Contact\Helper\Data')->getUserName()) ?>" class="input-text" type="text" data-validate="{required:true}"/>
</div>
</div>
<div class="field email required">
<label class="label" for="email"><span><?php /* @escapeNotVerified */ echo __('Email') ?></span></label>
<div class="control">
<input name="email" id="email" title="<?php /* @escapeNotVerified */ echo __('Email') ?>" value="<?php echo $block->escapeHtml($this->helper('Magento\Contact\Helper\Data')->getUserEmail()) ?>" class="input-text" type="email" data-validate="{required:true, 'validate-email':true}"/>
</div>
</div>
<div class="field telephone">
<label class="label" for="telephone"><span><?php /* @escapeNotVerified */ echo __('Phone Number') ?></span></label>
<div class="control">
<input name="telephone" id="telephone" title="<?php /* @escapeNotVerified */ echo __('Phone Number') ?>" value="" class="input-text" type="text" />
</div>
</div>
<div class="field comment required">
<label class="label" for="comment"><span><?php /* @escapeNotVerified */ echo __('What’s on your mind?') ?></span></label>
<div class="control">
<textarea name="comment" id="comment" title="<?php /* @escapeNotVerified */ echo __('What’s on your mind?') ?>" class="input-text" cols="5" rows="3" data-validate="{required:true}"></textarea>
</div>
</div>
<?php echo $block->getChildHtml('form.additional.info'); ?>
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<input type="hidden" name="hideit" id="hideit" value="" />
<button type="submit" title="<?php /* @escapeNotVerified */ echo __('Submit') ?>" class="action submit primary">
<span><?php /* @escapeNotVerified */ echo __('Submit') ?></span>
</button>
</div>
</div>
</form>
Simply replace the VendorName_ModuleName
with your own.
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'VendorName_ModuleName',
__DIR__
);
Replace VendorName_ModuleName
with your own and 0.0.1
as setup version with the version of your custom module.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
<module name="VendorName_ModuleName" setup_version="0.0.1" />
</config>
Of course, if you want to make your new module work, don't forget to add composer.json
.
{
"name": "VendorName/ModuleName",
"autoload": {
"psr-4": { "VendorName\\ModuleName\\": "" },
"files": [ "registration.php" ]
} }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With