Magento’s design theme system has grown significantly over the years. Compared to Magento 1.x, there are so many distinctive changes and improvements were done in default theme structure also now it allows creating unlimited parent themes as well as now its support latest languages like HTML5, CSS3, and jQuery. When it comes to giving a personalized touch to Magento store, instead of modifying default theme files overriding file is the safest way to change the layout & We also never recommended to modify core files. Also, check out the Quick Contact Form extension for Magento 2 which helps to embed the contact button on all the pages of your website.
Recently working on Magento custom development requirement, we came across the requirement of adding an element on the frontend form. At that time, we have overridden child theme contact form which we have shared below.
Step 1: First, we need to create “contact_index_index.xml” file inside extension the below directory
app\design\frontend\Themes\Yourtheme\Magento_Contact\layout\contact_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="contactForm">
<action method="setTemplate">
<argument name="template" xsi:type="string">Magento_Contact::contactform.phtml</argument>
</action>
</referenceBlock>
</body>
</page>Step 2: After that, you need to create “contactform.phtml” file inside extension the below directory
app\design\frontend\Your_Theme\Magento_Contact\templates\
<?php
/** @var \Magento\Contact\Block\ContactForm $block */
/** @var \Magento\Contact\ViewModel\UserDataProvider $viewModel */
$viewModel = $block->getViewModel();
?>
<form class="form contact"
action="<?= $block->escapeUrl($block->getFormAction()) ?>"
id="contact-form"
method="post"
data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>"
data-mage-init='{"validation":{}}'>
<fieldset class="fieldset">
<legend class="legend"><span><?= $block->escapeHtml(__('Write Us')) ?></span></legend><br />
<div class="field note no-label">
<?= $block->escapeHtml(__('Join 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><?= $block->escapeHtml(__('Name')) ?></span></label>
<div class="control">
<input name="name"
id="name"
title="<?= $block->escapeHtmlAttr(__('Name')) ?>"
value="<?= $block->escapeHtmlAttr($viewModel->getUserName()) ?>"
class="input-text"
type="text"
data-validate="{required:true}"/>
</div>
</div>
<div class="field email required">
<label class="label" for="email"><span><?= $block->escapeHtml(__('Email')) ?></span></label>
<div class="control">
<input name="email"
id="email"
title="<?= $block->escapeHtmlAttr(__('Email')) ?>"
value="<?= $block->escapeHtmlAttr($viewModel->getUserEmail()) ?>"
class="input-text"
type="email"
data-validate="{required:true, 'validate-email':true}"
data-mage-init='{"mage/trim-input":{}}'
/>
</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"
title="<?= $block->escapeHtmlAttr(__('Phone Number')) ?>"
value="<?= $block->escapeHtmlAttr($viewModel->getUserTelephone()) ?>"
class="input-text"
type="tel" />
</div>
</div>
<div class="field comment required">
<label class="label" for="comment">
<span><?= $block->escapeHtml(__('What’s on your mind?')) ?></span>
</label>
<div class="control">
<textarea name="comment"
id="comment"
title="<?= $block->escapeHtmlAttr(__('What’s on your mind?')) ?>"
class="input-text"
cols="5"
rows="3"
data-validate="{required:true}"
><?= $block->escapeHtml($viewModel->getUserComment()) ?></textarea>
</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" title="<?= $block->escapeHtmlAttr(__('Submit')) ?>" class="action submit primary"
id="send2"
<?php if ($block->getButtonLockManager()->isDisabled('contact_us_form_submit')): ?>
disabled="disabled"
<?php endif; ?>>
<span><?= $block->escapeHtml(__('Submit')) ?></span>
</button>
</div>
</div>
</form>
<script type="text/x-magento-init">
{
"*": {
"Magento_Customer/js/block-submit-on-send": {
"formId": "contact-form"
}
}
}
</script>Taada, you have successfully override contact form in your Magento 2 child theme. You can even customize this code according to your need of adding and removing contact form elements.
Comment down below if you are looking for help regarding this code & don’t forget to rate this blog.
Happy Overriding!
Hi,
Thanks for the helpful post. Question: how would I reference the custom contact form block as a namespace? i.e., what’s the equivalent of Magento\Contact\Block\ContactForm here?
Then you can use another method of specify template with the class like this one
< block class="Vendor\Extension\Block\Yourblock" name="yourblockname" template="Vendor_Extension::form.phtml">