How to add custom field in Contact Us form in Magento2?
In this article, I’ll explain the process of adding a custom field in a Magento 2 contact form. For the purpose of understanding, I will add a Subject field to the contact form, however, you can add your own fields to the contact form at your store.
First of all we need to create a module to override the core files. If you are not familiar with Magento 2 custom module creation, check out my previous article: How to create custom module in magento2?
Create the Module:
To configure the module, create module.xml in app/code/Magento/CustomContactForm/etc and paste the following code:
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Magento_CustomContactForm" setup_version="1.0"/>
</config>
To register the module, create registration.php in app/code/Magento/CustomContactForm and paste the following code:
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Magento_CustomContactForm',
__DIR__
);
?>
Override and Add Custom Field in Magento 2 Contact Form
Copy form.phtml file from the vendor/magento/module-contact/view/frontend/templates and paste it into the app/code/Magento/CustomContactForm/view/frontend/templates.
Now to add a new field named Subject to the contact form, open form.phtml file and add the following code as shown in the following screenshot:
<div class="field subject required">
<label class="label" for="subject"><span><?= $block->escapeHtml(__('Subject')) ?></span></label>
<div class="control">
<input name="subject" id="subject" title="<?= $block->escapeHtml(__('Subject')) ?>" value="" class="input-text" type="text" data-validate="{required:true}"/>
</div>
</div>
After that, form.phtml file will look like:
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
/** @var \Magento\Contact\Block\ContactForm $block */
?>
<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(__('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><?= $block->escapeHtml(__('Name')) ?></span></label>
<div class="control">
<input name="name" id="name" title="<?= $block->escapeHtmlAttr(__('Name')) ?>" value="<?= $block->escapeHtmlAttr($this->helper('Magento\Contact\Helper\Data')->getPostValue('name') ?: $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><?= $block->escapeHtml(__('Email')) ?></span></label>
<div class="control">
<input name="email" id="email" title="<?= $block->escapeHtmlAttr(__('Email')) ?>" value="<?= $block->escapeHtmlAttr($this->helper('Magento\Contact\Helper\Data')->getPostValue('email') ?: $this->helper('Magento\Contact\Helper\Data')->getUserEmail()) ?>" class="input-text" type="email" data-validate="{required:true, 'validate-email':true}"/>
</div>
</div>
<!-- Custom field -->
<div class="field subject required">
<label class="label" for="subject"><span><?= $block->escapeHtml(__('Subject')) ?></span></label>
<div class="control">
<input name="subject" id="subject" title="<?= $block->escapeHtml(__('Subject')) ?>" value="" class="input-text" type="text" data-validate="{required:true}"/>
</div>
</div>
<!-- Custom field -->
<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($this->helper('Magento\Contact\Helper\Data')->getPostValue('telephone')) ?>" class="input-text" type="text" />
</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($this->helper('Magento\Contact\Helper\Data')->getPostValue('comment')) ?></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">
<span><?= $block->escapeHtml(__('Submit')) ?></span>
</button>
</div>
</div>
</form>
Now create contact_index_index.xml in app/code/Magento/CustomContactForm/view/frontend/layout and paste the following code that overrides the original form.phtml file with the module’s form.phtml file.
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<title>Contact Us</title>
</head>
<body>
<referenceBlock name="contactForm" remove="true"/>
<referenceContainer name="content">
<block class="Magento\Contact\Block\ContactForm" name="customContactForm" template="Magento_CustomContactForm::form.phtml" />
</referenceContainer>
</body>
</page>
Run CLI Commands
open the terminal and run the following commands:
php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deploy php bin/magento cache:clean php bin/magento cache:flush
Add the new Email Template
Go to admin of your store and navigate to MARKETING → Email Templates as shown in the below screenshot:
Click on Add New Template button as shown in the below screenshot:
Now go to Load default template section, select Contact Form from the Template drop-down and click the Load Template button:
Enter the template name. I am using the Custom Contact Form.
Now, in order to receive a text from the custom field which you have added in the form.phtml, go to Template Content field and add the following code in it:
<tr>
<td><b>{{trans "Subject"}}</b></td>
<td>{{var data.subject}}</td>
</tr>
Click the Save Template button at the top of the page as shown in the screenshot below:
Change Email Template
Now go to STORES → Configuration as mentioned below:
Click on Contacts under the General tab and go to the Email Options section, select Custom Contact Form from Email Template drop-down option & click the Save Config button:
Go to the Contact page where you will see the new field Subject as mentioned in the screenshot below:
Share your views/queries in comments and do share it with your friends if you find the article helpful.
Also Read- How to create a Custom Module in Magento2
