Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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:

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

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:


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

escapeUrl($block->getFormAction()) ?>"       id="contact-form"       method="post"       data-hasrequired="= $block->escapeHtmlAttr(__('* Required Fields')) ?>"       data-mage-init='{"validation":{}}'>     
        = $block->escapeHtml(__('Write Us')) ?>
= $block->escapeHtml(__('Jot us a note and we’ll get back to you as quickly as possible.')) ?>
        = $block->getChildHtml('') ?>     

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.


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:

marketing-email templates

Click the Add New Template button:

add new template

Now go to Load default template section, select Contact Form from the Template drop-down and click the Load Template button:

load default template

Enter the Template name of your choice. I am using My Contact Form:

template information 1

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:

        {{trans "Subject"}}
        {{var data.subject}}

template content

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

save template

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:

select email template

To end the process, click the Save Config button at the top of the page:
save config

To see the new modified form in action, go to the Contact form where you will see the new field Subject:

contact field Magento 2 - Result

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.

The post Add Custom Field(s) to Magento 2 Contact Page appeared first on Magenticians.

This post first appeared on Magento Tutorials, Tips And Tricks, please read the originial post: here

Share the post

Add Custom Field(s) to Magento 2 Contact Page


Subscribe to Magento Tutorials, Tips And Tricks

Get updates delivered right to your inbox!

Thank you for your subscription