Latest news

How To Add Contact Form To CMS Page In Magento 2?

No comments

In this Magento 2 tutorial, we will show you five simple steps to add a contact form to your CMS page (e.g.: Contact us page) in Magento 2. Let’s get started!

Step 1: Add new CMS Page

Open your Magento 2 admin panel, navigate to CONTENT, select Pages (under Element), then click on Add New Page button.

(Admin Panel > CONTENT > Pages > Add New Page)

add contact form on cms page magento 2

Step 2: Add information for the CMS page

Here, you need to enter the Page Title, URL Key, Meta Title, Meta Keyword, Meta Description and select the store view(s) where the page belongs to.

add contact form on cms page magento 2

Step 3: Add content (HTML) to the CMS page:

It’s up to you to add more information to the Content section.

contact form magento 2

For example, you can insert the Google Maps as the followings: firstly, visiting the Google Maps, search for your location; secondly, click on Share, select Embed a map and click on COPY HTML; and finally, paste the link to your HTML Content.

magento 2 how to create contact form
Step 4: Add the contact form to the CMS page

You can change the title for each field in the contact form.

In your source code:
app/design/frontend/company/name_theme/ new folder: Magento_Contact
app/design/frontend/company/name_theme/Magento_Contact/ new folder: templates
app/design/frontend/company/name_theme/Magento_Contact/templates/ new file: form.phtml.

In this file, you can customize the form to your need.

Then, to insert the contact form to the CMS page that we are creating, you just need to add: {{block type=’core/template’ name=’contactForm’ template=’contacts/form.phtml’}} to the Content section.

Step 5: Save the page

Eventually, remember to save the configuration and flush cache (or run the command: php bin/magento cache:flush).

We have given you the detailed instruction to easily add a custom contact form to your CMS Page. If you have any difficulties when following the instruction, be free to leave a comment below. See you in the next tutorial.

1 Star2 Stars3 Stars4 Stars5 Stars (11 votes, average: 4.45 out of 5)


Related Posts:

Magento 2.3.0 Beta Release – What To Expect?

How To Add Extension Attribute To Order In Magento 2?

Magento 2 vs Shopify: 10 Key Differences – One Winner

The Time To Upgrade To Magento 2 Is NOW

How To Configure SMTP In Magento 2? [5 minutes]

TobyHow To Add Contact Form To CMS Page In Magento 2?

Leave a Reply

Your email address will not be published. Required fields are marked *