How to Customize Contact Us Form in Magento 2

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.

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

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:

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.

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

Book a Personalized Cloudways Magento Product Demo

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="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">

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

</module>

</config>

Register the Module

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

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'Cloudways_Modulecontact',

__DIR__

);

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.

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}"
</div>
</div>

This would be the final look for form.phtml:

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

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

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

 

Optimize Magento Speed Like a Pro

Subscribe now and get a free ebook to your inbox.

I agree to the Cloudways Terms of Service & Privacy Policy

Subscribe Now

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="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">    

   <body>     

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

       <referenceContainer name="content">

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

       </referenceContainer>

   </body>

</page>

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

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

Step #3: Add your content in the box and save the 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.

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 Connected on: Twitter Community Forum