Add custom field to contact form Magento 2?

Question

I'm using magento 2 and I would like to add a custom field to the contact form , how I would be able to do that ?

• Hitesh Balpande: Here is good explanation regarding how to add Custom Field in Contact form belvg.com/blog/… . Please go though it.

Answer 1

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

• Stijn Duynslaeger - Echron: This is correct, instead of creating the template for the email in te database, I would override the template in my theme (/magento_root/app/design/frontend/VENDER_NAME/YOUR_THEME/Magento_Contact/email/submittted_form.html). It's just personal taste ;)
• Key Shang: @StijnDuynslaeger-Echron Hi, the file name submittted_form.html has a extra t, the correct template path is /magento_root/app/design/frontend/VENDER_NAME/YOUR_THEME/Magento_Contact/email/submitted_form.html

Answer 2

If you want to add extra field in contact form and send it with email,Go to vendor/magento/magento_contact/view/templates/frontend/form.phtml

<div class="field subject">
<label class="label" for="subject"><span><?= $block->escapeHtml(__('Subject')) ?></span></label>
<div class="control">
<input name="subject" id="subject" title="<?= $block->escapeHtmlAttr(__('Subject')) ?>" value="<?= $block->escapeHtmlAttr($this->helper(\Magento\Contact\Helper\Data::class)->getPostValue('subject')) ?>"class="input-text" type="text" />
</div>
</div>

Go to admin,Marketing->Email Templates->Click on "Add new Template"->Select Contact form->Click on "Load Template"

{{template config_path="design/email/header_template"}}
<table class="message-details">
<tr>
<td><strong>{{trans "Name"}}</strong></td>
<td>{{var data.name}}</td>
</tr>
<tr>
 <td><strong>{{trans "Subject"}}</strong></td>
<td>{{var data.subject}}</td>
</tr>
<tr>
 <td><strong>{{trans "Email"}}</strong></td>
<td>{{var data.email}}</td>
</tr>
<tr>
<td><strong>{{trans "Phone"}}</strong></td>
<td>{{var data.telephone}}</td>
</tr>
</table>
<p><strong>{{trans "Message"}}</strong></p>
<p>{{var data.comment}}</p>
{{template config_path="design/email/footer_template"}}

Save Your Template, Go to Stores->Configuration->General->Contacts->In "Email Options" select your template->Save Config