Blog Posts

How to add custom field in Contact Us form in Magento2?

How to add custom field in Contact Us form in Magento2?

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.

« Previous Post

Update existing products with bulk import

Next Post »

How to Set Up a Magento 2 Multistores?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.