How to Customize Contact Us Form in Magento 2

Table of Content

how-to-customize-contact-us-page-in-magento-2
Posted in: Magento 2 Guides & Tricks
Last Updated: February 12, 2024
4 comments

Every start-up business needs to be original and have distinctive features to gain brand awareness. But all the Magento stores have one thing in common – a contact us page.

Today we will tell you how to customize this page from the Admin Panel, what opportunities Magento 2 provides by default and what are the additional options. In the end of the article we consider the main issue you can meet on the way.

Default Magento options

How to set up and enable a Magento 2 Contact Us form

The most important thing that should be on your contact page is your contact information - address, email address, phone number and other means of contact. To configure this feature, you need to follow these 6 easy steps.

Step 1. Go to your backend and sign in.

Step 2. In the Admin Panel, choose Stores > Configuration.

Step 3. Navigate to Contacts in the General tab.

Step 4. Now you see settings of Magento 2 Contact Us form. Choose Yes in the Enable Contact Us line and move down to the Email Options.

Step 5. Put your contact email in the Send Emails To field. Select the name of the sender that will be set in emails in the Email Sender option.

You can choose a template you want to use for your messages in the Email Template option.

Step 6. Save settings by clicking on the Save Config button.

How to change the contact form

Creating a custom form is a complicated process but if you want to get a unique result, you need to work with Magento blocks. Let’s move on to customization options.

Step 1. Go to Content > Blocks.

Step 2. There you will see a list of all the available blocks. Find the block Contact us info and choose Edit in the Select dropdown.

Step 3. Enter your contact info in the Content box and Save the block.

That was all the default Magento 2 contact us form settings and customization possibilities.

Obviously, those are not enough for a custom store design. So we will look through additional opportunities for improving your Contact Us page value below.

Personalize Your Conversations

Use a constructor to generate customizable questionnaires and forms in no time!

Create Custom Forms with Magento 2 Form Builder

  • Easy drag-and-drop form constructor
  • 20 elements for custom form creation
  • 5 pre-made templates and themes
Learn More

Additional customization options for Magento 2 Custom Contact form

How to edit fields of the Magento 2 Contact Us form programmatically

Say, you want to add the Subject field to your email template. To do this, you will need to create a new little module.

Step 1. Firstly, create module.xml in app/code/<Vendor>/<Module>/etc and insert the following code part:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">

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

</module>

</config>

Step 2. Next, register this mod in app/code/<Vendor>/<Module> by creating registration.php. For this, enter this code:

<?php

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

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

'Module_Name',

__DIR__

);

Step 3. Сopy form.phtml file from the vendor/magento/module-contact/view/frontend/templates for the following steps and paste it into app/code/<Vendor>/<Module>/view/frontend/templates. Then open this file and add the new field to your contact form. Please use this 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>

Step 4. Create contact_index_index.xml in app/code/<Vendor>/<Module>/view/frontend/layout to override the previous form.phtml file with the new one. You need to insert the following code patch into this 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="Module_Name::form.phtml" />

       </referenceContainer>

   </body>

</page>

Step 5. When you are ready, move to your Admin Panel > Marketing > Email Templates.

Step 6. In the window that appears, you will see the Add New Template button. Click on it.

Step 7. It will open the New Template page. Choose the Contact Form template from the dropdown and click on Load Template.

Step 8. Create a name for your new template and enter it into the Template Name field.

Paste the additional code into the Template Content field:

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

Data.subject here is the name of the field you added to form.phtml file. It should be the same in both places.

Now Click on Save Template.

Step 9. Go to Stores > Configuration > General > Contacts and choose your Email Template in the Email Options section. Save changes and enjoy the result.

How to enable Google Map on Contact Us page

Say, you have pickup points around the city. Google map helps you show shops on the map. Google Map module allows you to mark the coordinates of your pickup points with Google. You can change the height and width of the map look or use it as a widget on any CMS-pages on the website.

All you need to add Google Map to Contact Us page is to navigate to Stores > Configuration > Amasty Extensions > Google Map > General Settings and configure the displayed fields:

Google Map fields

How to add a Contact Us form to other pages

You can also add a contact form to any CMS page. To do this, proceed in the way we’ve described (see How to change the contact form). Just choose the Content block and add the following code at the needed place: footer, navigation block, etc.:

block type=’core/template’ name=’contactForm’ template=’contacts/form.phtml’

Save the changes.

How to enable CAPTCHA in Magento 2 Custom form

CAPTCHA is the tool that protects your store from spam. Go to Stores > Configuration to enable it. Click the Customer Configuration on the Customers tab.

Find the CAPTCHA block on this page and choose Yes from Enable CAPTCHA on Storefront dropdown.

Trouble: Magento 2 custom form submit error or contact form not sending emails

If your contact form doesn’t work as required, please check all the settings we explained above in the Admin Panel.

If all the configurations are right but the form won’t work, go to template/contact/form.phtml file. Find this part of code there:

getFormAction(); ?>” id=”contactForm” method=”post”>

Replace it with:

getUrl(‘contacts/index/post’); ?>” id=”contactForm” method=”post”>

These changes usually solve problems.

How can I send an email from a custom form in Magento 2?

To send an email from a custom form in Magento 2, you can follow these steps:

  1. Create a custom form in your Magento 2 store using HTML and PHP.
  2. Open the PHP file that handles the form submission and add the following code to send an email:
use Magento\Framework\Mail\Template\TransportBuilder;
use Magento\Framework\Translate\Inline\StateInterface;
use Magento\Store\Model\StoreManagerInterface;

class FormController extends \Magento\Framework\App\Action\Action
{
protected $transportBuilder;
protected $inlineTranslation;
protected $storeManager;

public function __construct(
TransportBuilder $transportBuilder,
StateInterface $inlineTranslation,
StoreManagerInterface $storeManager
) {
$this->transportBuilder = $transportBuilder;
$this->inlineTranslation = $inlineTranslation;
$this->storeManager = $storeManager;
parent::__construct($context);
}

public function execute()
{
$vars = [
'name' => $name,
'email' => $email,
'message' => $message,
];

$templateOptions = [
'area' => \Magento\Framework\App\Area::AREA_FRONTEND,
'store' => $this->storeManager->getStore()->getId(),
];

$templateVars = [
'data' => new \Magento\Framework\DataObject($vars),
];

$from = [
'email' => $fromEmail,
'name' => $fromName,
];

$this->inlineTranslation->suspend();
$transport = $this->transportBuilder->setTemplateIdentifier($templateId)
->setTemplateOptions($templateOptions)
->setTemplateVars($templateVars)
->setFrom($from)
->addTo($toEmail)
->getTransport();
$transport->sendMessage();
$this->inlineTranslation->resume();
}
}

  1. Replace the placeholder values (e.g., $name, $email, $message) with the actual form data you want to include in the email.
  2. Customize the email template to match your store's branding and messaging.
  3. Save the PHP file and test the custom form by submitting it and verifying that the email is sent.

By following these steps, you can send an email from a custom form in Magento 2, which can be useful for collecting customer feedback, processing orders, and other purposes.

Originally published: August 13, 2019
August 26, 2019
August 6, 2019
Related posts
Related products
Comments
car accident lawyer
November 23, 2019
Wow, that's what I was looking for, what a material! present here at this blog, thanks admin of this site.
Reply
Polina Litreyeva
November 25, 2019
Hello there! Thanks for your feedback! We are happy that our articles are helpful to our readers.
Reply
complicated diet
December 6, 2019
Good answwers in return of this matter with genuine arguments and describing everything regarding that.
Reply
Polina Litreyeva
December 9, 2019
Hello! Thanks for your feedback!
Reply
Leave your comment

Your email address will not be published

This blog was created with Amasty Blog Pro

Join our blog newsletter!

Search

About author

Polina and digital marketing are almost synonyms. That’s why her articles contain a treasure trove of knowledge in this domain.

Table of Contents

This blog was created with Amasty Blog Pro

Loading
© 2009-2025 Amasty. All Rights Reserved.