Add Custom Field(s) to Magento 2 Contact Page

An online store is incomplete without a contact form. It is often the only way through which customers can easily drop/ask their store related queries. Thus, a contact form is one of the essential factors that contribute to the success of an online store. In this tutorial, I will discuss how you could easily add a custom field in a Magento 2 contact form. For the purpose of this tutorial, I will add a Subject field to the contact form. However, you could use this tutorial to add your own fields to the contact form on your store. To follow the best Magento development practices, I will create a module to override the core files. If you are not familiar with the process of Magento 2 custom module creation, check out this excellent guide: How to Create a Custom Module in Magento 2.

Create the Module

To configure the module, create module.xml in app/code/Magenticians/Modulecontact/etc and paste the following code in it:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Magenticians_Modulecontact" setup_version="1.0.1">
</module>
</config>

To register the module, create registration.php in app/code/Magenticians/Modulecontact and paste the following code in it:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Magenticians_Modulecontact',
__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/Magenticians/Modulecontact/view/frontend/templates. Now to add a new field named Subject to the contact form, open form.phtml file and add the following code:

<div class="field subject required">
             <label class="label" for="subject"><span><?php /* @escapeNotVerified */ echo __('Subject') ?></span></label>
             <div class="control">
                  <input name="subject" id="subject" title="<?php /* @escapeNotVerified */ echo __('Subject') ?>" value="" class="input-text" type="text" data-validate="{required:true}"/>
             </div>
        </div>

The final form.phtml file of your module will look like this:

<?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 subject required">
             <label class="label" for="subject"><span><?php /* @escapeNotVerified */ echo __('Subject') ?></span></label>
             <div class="control">
                  <input name="subject" id="subject" title="<?php /* @escapeNotVerified */ echo __('Subject') ?>" value="" 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>

        <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>

Next, create contact_index_index.xml in app/code/Magenticians/Modulecontact/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"?>
<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" remove="true"/>   
       <referenceContainer name="content">
           <block class="Magento\Contact\Block\ContactForm" name="customContactForm" template="Magenticians_Modulecontact::form.phtml" />
       </referenceContainer>
   </body>
</page>

Run CLI Commands

Launch the SSL 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 Magento 2 Email Template

Open the admin panel of your store and navigate to MARKETING → Email Templates: Click the Add New Template button: 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 of your choice. I am using My 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>

Finally, click the Save Template located at the top of the page:

Change Your Magento 2 Email Template

Now navigate to STORES → Configuration and click on Contacts under the General tab: Go to the Email Options section, select My Contact Form from Email Template drop-down option: To end the process, click the Save Config button at the top of the page: To see the new modified form in action, go to the Contact form where you will see the new field Subject:

Wrapping Up

Adding custom fields to contact forms adds the element of personalization that goes a long way in converting visitors into customers. I hope you are now able to add custom fields to your Magento 2 contact forms. If you need help, just drop a comment below.