Every start-up business needs to be original and have distinctive features to gain brain awareness. Being in e-commerce, we offer different products and services, create custom websites and work on a unique selling proposition. 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.

 

How to set up and enable a Contact Us form

The most important thing that should be on your contact page is the ability to reach you. 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:

go to stores and choose configuration

Step 3. Navigate to Contacts in the General tab:

go to contact 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:

enable contact us

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:

email options

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.

Here is an example of how it will look on the frontend:

frontend example

How to change the contact form

Those were just standard settings, and 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:

go to content and choose 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:

contact us info block

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 form

Merchants often ask if it is possible to edit default fields or add the button for file uploading. Or, say, you want to show your offline store location on the map. Let’s figure it out!

Create any custom form with the drag-and-drop constructor: registration, support, marketing survey form, and more. Use the Custom Form extension to add different types of fields and change them to your taste.

How to edit fields of Magento 2 Contact 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.

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

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

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

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

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

go to marketing and choose email templates

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

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

upload email template

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

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

insert code into the content block

Now Click on Save Template.

#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. We offer you to try our Google Map module. It allows you to mark the coordinates of your pickup points with Google:

mark the coordinates

You can change the height and width of the map look or use it as a widget on any CMS-pages on the website:

google map settings

How to add a contact 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.:

Save the changes.

How to enable CAPTCHA in Magento 2 contact 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:

go to customer configuration

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

enable captcha

Try our Google Invisible reCAPTCHA for more settings and customization options. You can show CAPTCHA only to guests or set up languages for different store views with this mod.

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:

Replace it with:

These changes usually solve problems.

If the challenge remains, feel free to contact us at support@amasty.com. We are always ready to help you!

Some useful extensions you can use in your contact form:

Follow Up Email – helps to create custom triggered emails and automate the dispatch.

SMTP Email Settings – this module assists you with setting SMTP that decreases the possibility that your emails will end up in the spam folder.

Store Locator – it serves to display all your stores on the map, filter them and show the nearest one.