How to Override phtml or layout core files in Magento 2 ?

In this article, i will help you for how to override core phtml files in Magento 2 custom extension.

For this we will follow one by one step, so you can easily understand the process.

Let's create one custom module in which we will override core module contact us form.phtml file using layout xml.

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/registration.php

Step 1. Create registration.php in our custom VendorName_ModuleName module.

Simply replace the VendorName_ModuleName with your own.

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

Step 2. Create module.xml in our module's etc directory.

Replace VendorName_ModuleName with your own and Set 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>

Step 3. form.phtml. Now, you need to make the custom form template. You can copy the original one(core Contect us module form.phtml) and paste in our module's template directory and then 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>

Step 4. Create contact_index_index.xml in our custom module under the layout folder and add below code for override core contact us phtml file.

       
<?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>
        <referenceBlock name="contactForm">
            <action method="setTemplate">
                <argument name="template"xsi:type="string">VendorName_ModuleName::form.phtml</argument>
            </action>
	</referenceBlock>
    </body>
</page>

if you want to override any core files, you simply use reference name and this reference name passed to referenceBlock name="passit".

For conatct us file override, first you get the original file of contactus form.phtml and after that find it's layout file contact_index_index.xml and get the reference name like "contactForm".

This "contactForm" reference name passed to our extension layout file in referenceBlock tag. Please check above my extension contact_index_index.xml layout file in which i have set <referenceBlock name="contactForm"> for override core phtml file.

After this , system contactus form.phtml not called, Our extension form.phtml file called. 

That's it, You can check using Developer front end debugging tool.