Magento Tutorials

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.

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: 6 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.?

View Comments

  • 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

Recent Posts

Generating Thumbnails with Spatie Media Library in Laravel 11: A Step-by-Step Guide

Generating image thumbnails is a common requirement in web applications, especially when handling media-heavy content.…

2 hours ago

Enhancing Web Application Security with Laravel’s Built-In Features

In today’s digital landscape, web application security is paramount. As a powerful PHP framework, Laravel…

1 day ago

Magento 2 Extensions Digest October 2024 (New Release & Updates)

October was an exciting month for MageComp! From significant updates across our Magento 2 extension…

1 day ago

Improving Error Handling and Transition Management in Remix with useRouteError and useViewTransitionState

In modern web development, seamless navigation and state management are crucial for delivering a smooth…

1 week ago

Magento Open Source 2.4.8-Beta Release Notes

Magento Open Source 2.4.8 beta version released on October  8, 2024. The latest release of…

1 week ago

How to Create Catalog Price Rule in Magento 2 Programmatically?

Hello Magento Friends, Creating catalog price rules programmatically in Magento 2 can be a valuable…

1 week ago