The Most Popular Extension Builder for Magento 2

With a big catalog of 224+ extensions for your online store

Configure Magento 2 Contact Form & Email: Detailed Guides

The Contact Us link placed at the footer of the Magento 2 store allows customers to send a message directly to you by completing the form. Thanks to this contact method, any requests or concerns can be resolved effectively, which assists the customer support better. Hence, online businesses can build a close and long-term relationship with customers.

The Contact email address indicates the email recipient to which the forms are sent, and the email sender by which the store replies to customers. Magento sets [email protected] as the default email address, but you may want to change it to your own here. To make sure it send to you inbox, you should enable SMTP. In addition, you also can customize the email templates, and upload your brand email logo here.

Why are Contact Us form and Contact email address essential for your online store?

Contact Us form can:

  • Be a useful channel for customers to get in touch with the business
  • Ensure the emails not get lost because of wrong address
  • Save time when all important information is collected beforehand
  • Store the conversation in the email inbox for future management

And rather than using the default email by Magento 2, contact email address configuration can:

  • Be easier to remember
  • Assign different emails for different purposes
  • Assist the branding strategies

Here is the Contact us form in the frontend, visitors/customers can send you an email via this page.

How to configure Contacts form and contact email address Contact us form

After the form is submitted, a thank-you message appears. The contact-us-info block contains the form, and can be easily customized.

4 steps to configure Contact Us form in Magento 2

This tutorial will guide you through 4 steps to set up the Contact Us form:

Step 1: Login to your Magento 2 backend

  • On the Admin sidebar, click Stores. Then under Settings, choose Configuration.
  • In the panel on the left under General, choose Contacts.

Step 2: Configure Contact Us form

After logging in the backend, now you can set up the Contact Us form, as well as configure the Contact email address as you wish:

  • Expand the Contact Ussection. If necessary, set Enable Contact Us to “Yes”

How to configure Contacts form and contact email address Contact us setting

  • Expand the Email Options section. Then, do the following:
    • In the Send Emails to field, enter the email address where messages from the Contact Us form are sent.
    • Set Email Sender to the store identity that appears as the sender of the message from the Contact Us form. For example: Custom Email 2.
    • Set Email Template to the template that is used for messages sent from the Contact Us form.

How to configure Contacts form and contact email address Email Options

When all the steps aren’t done, click Save Config.

Step 3: Customize Contact Us form

Contact Us form is also an opportunity for you to provide essential information for your customers. You can include this content with ease after following these steps:

  • On the Admin sidebar, click on Content. Then under Elements, choose Blocks.
  • Find the Contact Us Info block in the list, and open in the Edit mode.

How to configure Contacts form and contact email address Contact us in Block

  • Scroll down to the Content field, and make any changes necessary.
    • Use the editor toolbar to format the text, and add images and links.
    • Click on Show / Hide Editor to work directly with the HTML.

How to configure Contacts form and contact email address Edit Contact us information

Step 4: Check the result

After setting up everything, click on Save Block to get all done.


Custom Form

Custom Form extension for Magento 2

Set up conditional logic to show or hide form fields based on the customer's input, making the form more intuitive and user-friendly.

Learn more


Other custom options for Magento 2 Custom Contact form

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

Let’s take adding the Subject field to the email template as an example. To implement, you need to create a new module.

  • Step 1: 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: Register this mod in app/code/<Vendor>/<Module> by creating registration.php. Enter the following code:
<?php

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

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

'Module_Name',

__DIR__

);
  • Step 3: Сopy the form.phtml file from the vendor/magento/module-contact/view/frontend/templates for the below steps. Paste it into app/code/<Vendor>/<Module>/view/frontend/templates. Next, open this file then add the new field into your contact form with 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: Make contact_index_index.xml in app/code/<Vendor>/<Module>/view/frontend/layout in order to overrule the former form.phtml file with a new one. To do so, please insert this code path to the 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: Now that you’re ready, please go to Marketing > Email Templates > Add New Template.
  • Step 6: Then you’ll see the New Template page. Select the Contact Form template and choose Load Template.
  • Step 7: Insert a name for the Template Name field.
  • Step 8: Paste this code to the Template Content field then save it:
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.
  • Step 9: Navigate to Stores > Configuration > General > Contacts. Select Email Template in the Email Options. Finally, save your changes.

How to add a Contact Us form to other pages

You can add a Contact Us form to the CMS page.

First, you need to change the contact form.

  • Go to Content > Elements > Blocks
  • Choose the Contact Us info block and edit it
  • Provide your contact infomation in the Content box then save it Save the block

Now, we will guide you how to add a Contact Us form to other pages. Select the Content block, add this code (where you need it, such as footer, navigation block, and so on).

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

Don’t forget to save your changes.

How to enable CAPTCHA in Magento 2 Custom form

CAPTCHA is a must-have tool for online stores as it can protect them from being spam. To enable CAPTCHA for custom form, please navigate to Stores > Configuration > Customers > Customers Configuration > CAPTCHA. Choose Yes in the Enable CAPTCHA on Storefront field, save config, and it’s done.

How to fix Magento 2 custom form submit error/ contact form not sending emails

If your contact form is not working the way you want it to be, check all the settings in the backend one more time.

In case you did everything right but it’s still not working, please navigate to the template/contact/form.phtml file. Find this code part:

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

Replace it with this:

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

The bottom line

That is all you have to do to enable the Contact Us form, edit its content and the Contact email address. Obviously, it is vital for online stores when it comes to business and customer communication. This is general guidance, so if you have more questions, you can leave the comment in the comment box and we will reply as soon as possible.

Related Posts:

Image Description
Hello, I'm the Chief Technology Officer of Mageplaza, and I am thrilled to share my story with you. My deep love and passion for technology have fueled my journey as a professional coder and an ultra-marathon runner. Over the past decade, I have accumulated extensive experience and honed my expertise in PHP development.

Looking for
Customization & Development Services?

8+ years of experiences in e-commerce & Magento has prepared us for any challenges, so that we can lead you to your success.

Get free consultant
development service
x

    Explore Our Products:

    People also searched for

    Subscribe

    Stay in the know

    Get special offers on the latest news from Mageplaza.

    Earn $10 in reward now!

    Earn $10 in reward now!

    comment
    iphone
    go up