How to Customize Contact Us Form in Magento 2

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.

Contents

1 Steps to Customize Contact Us Form in Magento 2:
2 Conclusion:

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!

Click to rate this post!

[Total: 5 Average: 5]

Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate 🎖️ Certified Magento Developer👨‍💻. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.🏏

Next Follow these Steps to Display Eye-Catchy Banner Slider in Magento 2 »

Previous « Magento 2: Check if the Current URL is HomePage

View Comments

Amine says:

December 26, 2021 at 12:12 am

Hi)
I have somes issues with my store
I want to edit some strings of contact form such as Leave us a Message, (Aenean massa diam, viverra vitae luctus sed, gravida eget est. Etiam nec ipsum porttitor, consequat libero eu, dignissim eros. Nulla auctor lacinia enim id mollis. Curabitur luctus interdum eleifend. Ut tempor lorem a turpis fermentum.) and What’s On Your Mind?
I tried to edit the relevant strings in form.phtml located in /var/www/html/magento/app/design/frontend/Alothemes/default/Magento_Contact/templates but it doesn't work
i have another form.phtml located in /var/www/html/magento/vendor/magento/module-contact/view/frontend/templates but it does not contain the strings i want to edit
what i should i do?)
Thanks
You can check contact form in my website