This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Calculate Your Savings on Cloudways and Compare With Kinsta, WP Engine and Flywheel. Calculate Now

How to Customize Contact Us Form in Magento 2

Updated on December 23, 2021

6 Min Read
Magento 2 Contact Form Banner

The Magento 2 Contact Us form is a great way to reach your audience, opening the door for customers to ask business queries. While building an ecommerce store, it’s essential that you develop a way for the audience or customers to get in touch with you.

Since Magento Contact forms are handled at the server-side that helps in reducing the spam. It saves your time since you want your customer to be specific and collect the exact information which can be done through a customize contact us form. Ultimately, it helps you in serving them better with consistency.

So in this blog, I will explain how to configure Magento 2 Contact Us form if you haven’t done so yet. Further, I will look at how to build a custom Magento 2 Contact form and add new fields.

Let’s get started.

How to Configure Magento 2 Contact Us Form

To configure Magento 2 Contact Us page section, you need to follow these steps. 

Step #1: Log in to your Magento admin with the right credentials.

Step #2: Navigate to Stores from the left navigation bar and select Configuration.

Magento Contact Form Configuration

Step #3: Navigate to Contact under the section of General.

Magento 2 Contact Form

Step #4: This lets you see the settings of the Magento 2 Contact Us form. Make sure to select “Yes” to enable the contact us line and proceed to the email options:

Enable Magento Contact Us Form

Step #5: For this section, add your email to the “Send Emails” field. Select the Email Sender from the drop-down menu and choose an Email Template. If you don’t have any custom email, choose the Contact Form Default.

Magento Contact Us Email Option

Step #6: Hit the Save Config and see the applicable changes in your store link.

Magento Contact Us Result

Book a Personalized Cloudways Product Demo With One of Our Expert

If you’re unable to see the changes, purge the cache.

How to Create a Custom Contact Us Form in Magento 2

In this section, I’ll show you how to add a custom field in a Magento 2 Contact form. Basically, it depends on what you want to extract from the form. As an example, I will add a Subject field to the Magento Contact Us form.

Using the same procedure, you can add your own fields to the Contact Us form on your store. In line with the best Magento development practices, I will create a module to override the core files. 

Create Module for Magento 2 Contact Us Form

To configure the module, you need to create the module.xml in the category app/code/Cloudways/Modulecontact/etc

Once you set the directory, place the following piece of code:

<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">

<module name="Cloudways_Modulecontact" setup_version="1.0.1">



Register the Module

Now register the module. For that, create the registration.php to the following path app/code/Cloudways/Modulecontact.







Scale Your Magento 2 Store With Ease

One-Click Magento installation with your own managed hosting solution.

It’s Time to Override & Add Custom Field 

Copy the form.phtml from the path vendor/magento/module-contact/view/frontend/templates and paste it into the app/code/Cloudways/Modulecontact/view/frontend/templates.

Here’s a visual to assist you.

Custom Magento 2 Form Directory

Add a new field named “Subject”, as mentioned above on the Magento Contact Us form. Open the 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}"

This would be the final look for form.phtml:



 * 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()) ?>"



      data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>"


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



        <?= $block->getChildHtml('') ?>


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






Optimize Magento Speed Like a Pro

Subscribe now and get a free ebook to your inbox.

Thank You

Your Ebook is on it’s Way to Your Inbox.

Here is the last thing to do before you purge and run the command lines. Create contact_index_index.xml to the following directory app/code/Cloudways/Modulecontact/view/frontend/layout and place the following code so that it can override the original form.phtml file with the module’s form.phtml file.

<?xml version="1.0"?>

<page xmlns:xsi="" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">    


      <referenceBlock name="contactForm" remove="true"/>   

       <referenceContainer name="content">

           <block class="Magento\Contact\Block\ContactForm" name="customContactForm" template="Magenticians_Modulecontact::form.phtml" />




Don’t Forget to Run the CLI Commands

If you’re using Cloudways Magento hosting solution, launch the SSH or use the Putty and connect your server 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

How to Change Email Template for the Magento Contact Form

Here too you will need to work on the block. But this time you will use the Magento backend. 

Step #1: Navigate to Content > Block

Magento 2 Contact Form Block

Step #2: From the blocks, find Contact Info and select Edit from the drop-down menu.

Magento Contact Form Info

Step #3: Add your content in the box and save the block.

Magento Contact Form Block

Alternative for Magento 2 Contact Us Form Customization?

Yes, there are a bunch of reliable extensions available on the Magento marketplace. It helps you to unlock options like geo-location, quickly access queries, send emails, and much more. If you want me to help you install any specific Magento 2 contact form extension, let me know in the comment section.

Wrap Up!

Magento 2 custom contact us form personalizes your page, and helps you turn your visitors into customers. I hope this blog helps you understand the concept of customizing the Magento contact form with custom fields. If you need any assistance, just drop a comment. If you are looking for the best Magento 2 hosting to kick off your business then opt for a managed cloud hosting solution.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Great speed, features, knowledgebase, dashboard, UX and fast, expert support. Very happy!”

Stefan [Management Consultant]

Abdur Rahman

Abdur Rahman is the Magento whizz at Cloudways. He is growth ambitious, and aims to learn & share information about Ecommerce & Magento Development through practice and experimentation. He loves to travel and explore new ideas whenever he finds time. Get in touch with him at [email protected]


Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!


Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Unleash The Cloud.
Not Budgets.

For 4 Months +
Up To 30 Free Migrations

Cyber Week

Time Left In Offer
  • 0


  • 0


  • 0


  • 0


40% OFF

On All Plans