How to Customize Contact Us Form in Magento 2

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:

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.

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

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:

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 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!

Using Magento, create a form easily with the drag-and-drop constructor: Magento 2 add a custom field to the registration form, 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:

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

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

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:

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

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:

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

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.