Every start-up business needs to be original and have distinctive features to gain brain 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 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.
Additional customization options for Magento 2 Contact Us 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.commentData.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:
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 Contact Us 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: 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”>
