Magento 2 – How to Add New Custom Field in Contact Form

First, open the form.phtml file located in your theme.

/magento_root/app/design/frontend/VENDER_NAME/YOUR_THEME/Magento_Contact/templates/form.phtml, then add subject field to this contact form:

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

Add the above field in the form.

As far as Magento is concerned, it doesn't care what fields we add to this form. It is written in such a way that it accepts all of the field posted for processing and send that out to the transactional e-mail form that you create. Now, go to MARKETING > Communication > Email Templates in the Magento Admin section. Click "Add New Template" and from the "Template" dropdown box select "Contact Form" then "Load Template". Under template content you will see:

{{trans "Name: %name" name=$data.name}}
{{trans "Email: %email" email=$data.email}}
{{trans "Phone Number: %telephone" telephone=$data.telephone}}
{{trans "Comment: %comment" comment=$data.comment}}

Add your new field before Name: {{trans "Name: %name" name=$data.name}} so that now it should looks like this:

{{trans "Subject: %subject" subject=$data.subject}}
{{trans "Name: %name" name=$data.name}}
{{trans "Email: %email" email=$data.email}}
{{trans "Phone Number: %telephone" telephone=$data.telephone}}
{{trans "Comment: %comment" comment=$data.comment}}

Enter a new name under "Template Name" to save your new Template and click on "Save Template". Now we need to tell Magento to use this new template for the Contact form. Go to STORES -> Settings -> Configuration -> General -> Contacts and select "Contacts". Under "Email Options", select your new template under the "Email Options" -> "Email Template" dropdown box. Click on "Save Config".

• Open form.phtml file located at app/design/frontend/default/YOUR_THEME/template/contacts folder.
• Then find the following lines of code:

**

<li>
    <label for="telephone"><?php echo Mage::helper('contacts')->__('Telephone') ?></label>
    <div class="input-box">
        <input name="telephone" id="telephone" title="<?php echo Mage::helper('contacts')->__('Telephone') ?>" value="" class="input-text" type="text" />
    </div>
</li>

**

and replace it with:

<li>
    <label for="subject"><?php echo Mage::helper('contacts')->__('Subject') ?> <span class="required">*</span></label>
    <div class="input-box">
        <input name="subject" id="subject" title="<?php echo Mage::helper('contacts')->__('Subject') ?>" value="" class="required-entry input-text" type="text"/>
    </div>
</li>

• Now to show this field in contact us mail login to Admin Panel => System => Transactional Emails and click Add New Template and from the templates drop-down box select Contact Form. Then click on Load Template button.
• Under template content, find:

Telephone: {{var data.telephone}}

and replace it with:

Subject: {{var data.subject}}

• Now go to System => Configuration and select Contacts. Then under the Email Options, select your new template under the Email Template drop-down and click on Save Config button.