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 Us 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 you want from them. Ultimately, it helps you in serving them better with consistency.
So in this blog, I will explain how to enable the Contact Us form for Magento 2 if you haven’t done so yet. Further, I will look at how to customize the Magento Contact Us form and add custom fields.
Let’s get started.
How to Enable Magento 2 Contact Us Form
To enable the 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 Product Demo With One of Our Expert
If you’re unable to see the changes, purge the cache.
How to Create a Custom Contact 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 MagentoFrameworkComponentComponentRegistrar::register( MagentoFrameworkComponentComponentRegistrar::MODULE, 'Cloudways_Modulecontact', __DIR__ );
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.
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 MagentoContactBlockContactForm $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('MagentoContactHelperData')->getPostValue('name') ?: $this->helper('MagentoContactHelperData')->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('MagentoContactHelperData')->getPostValue('email') ?: $this->helper('MagentoContactHelperData')->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('MagentoContactHelperData')->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('MagentoContactHelperData')->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.
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="MagentoContactBlockContactForm" name="customContactForm" template="Magenticians_Modulecontact::form.phtml" /> </referenceContainer> </body> </page>
Don’t Forget to Run the CLI Commands
If you’re using Cloudways, 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 Us 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.
Any 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 custom contact form extension, let me know in the comment section.
Wrap Up!
Customizing Magento 2 Contact 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.
Boost Your Magento Store Performance by 5x Times & Maximize Your Sales
Our fastest Magento hosting can help you in growing your business revenue by 500%
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!
Keep reading the article at The Official Cloudways Blog. The article was originally written by Abdur Rahman on 2020-12-04 09:37:23.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.