How to Customize Contact Us Form in Magento 2

Dhiren Vasoya

3 years ago

Hello Magento Friends,

Customization is the major benefit of Magento 2. The admin can customize every part of the Magento website. Today I am going to explain How to Customize Contact Us Form in Magento 2.

Contact form is the easy way to build the trust of customers. Customers can use contact forms to guarantee that someone is paying attention to their concerns and feedback. Learn How to Setup Contact us Form in Magento 2.

Contact us form usually include name, image, and message. However, you can customize the Contact Us form according to your business needs. Check out the Quick Contact Form extension for Magento 2 which helps to embed the contact button on all the pages of your website.

Let’s learn the steps to Customize Contact Us Form in Magento 2.

Steps to Customize Contact Us Form in Magento 2:

You have to override the Magento contact form file.

Copy the form.phtml from the path
vendor/magento/module-contact/view/frontend/templates

and paste it into the
app/code/Vendor/Extension/view/frontend/templates

Step 1: File Path : app\code\Vendor\Extension\view\frontend\templates\form.phtml

<div class="field custom required">
	<label class="label" for="custom">
               <span>
                    <?php /* @escapeNotVerified */ echo __('Custom Field') ?>
              </span>
       </label>

      <div class="control">
	   <input name="custom" id="custom" title="
                      <?php / @escapeNotVerified */ echo __('Custom Field') ?>" 
                      value="" class="input-text" type="text" data-validate="{required:true}"
      </div>
</div>

Step 2: Add the below code in following file path: app\code\Vendor\Extension\view\frontend\layout\contact_index_index.xml

<?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="Vendor_Extension::form.phtml" />

       </referenceContainer>

   </body>

</page>

Conclusion:

This way you can Customize Contact Us Form in Magento 2. If you face any hardship while customizing your contact us form, get in touch with me via the comment box. Share the article with your developer friends and stay updated with us for more information.

Happy Reading!