Magento 2 - Tips and Tricks

HOW TO ADD CUSTOM FIELDS ON YOUR CONTACT US FORM IN MAGENTO 2

A Contact Us page is an essential part of an online store. The contact page allows your visitors or customers to send you their questions and queries, messages, or emails. The Contact Us page is crucial for any online store as you can get the requirement and feedback from your customers. This helps you increase your sales and customer satisfaction.

Magento 2 already has a contact us page with a standard contact form with name, email, phone number, and a question box. Still, sometimes you need to ask your customers more questions based on your business needs. For example, a custom gift store may ask customer’s anniversary date, date of birth, city or state, etc., on the contact form, while an auto part company may ask for the year and the model of the car to serve their customers better. So here, we will discuss adding a custom field on the Contact page.

Here is the default contact page asking for “Name,” “E-mail,” “Phone Number,” and a description of your Query.

So here we are going to ask the customer about the nature of his query. Let’s consider the title of the field as “Subject.” So, now the customer can put a subject as a summary of their query.

We will do this job in two different parts.

  1. In the first part, we will extend the core functionality of the Magento contact us form and add the new fields on the frontend Contact Us page.
  2. We will create a new e-mail template in the second part and add a field to the e-mail templates. Once the contact us form is submitted, the e-mail template will send an e-mail to the store owner with these new fields.

Part 1: Add a Custom Field in Magento 2 Contact Form

To achieve this, we need to extend the core functionality, and for this, we will create a new module.

Step 1: Create module.xml in app/code/<vendor>/<module>/etc

For us <vendor>/<module> is Bizspice/Contactus we will us this

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
  <module name="Bizspice_Contactus" setup_version="1.0.1"> </module>
</config>

Step 2: To register the module, create registration.php in app/code/<vendor>/<module>

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Bizspice_Contactus',
   __DIR__
 );

Step 3: Copy form.phtml file from the vendor/magento/module-contact/view/frontend/templates and paste it into the app/code/<vendor>/<module>/view/frontend/templates , and add a new field named Subject in appropriate place in the contact form

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

Step 4: Now create contact_index_index.xml in app/code/<vendor>/<module>/view/frontend/layout to override core form.phtm and to use newly created form.

<?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="newContactForm" template="Bizspice_Contactus::form.phtml" />
      </referenceContainer>
  </body>
</page>

This is how the new form will look now.

Now we will move on to the second part

2. Add the new Magento 2 Email Template

Step 1: Open the admin panel and navigate to MARKETING => Email Templates

Step 2: Click the Add New Template button

Step 3: Now from the Load default template section, select Contact Form from the Template drop-down and click the Load Template button

Step 4: Enter the template name, let’s say Custom Contact Form, and to receive a text from the custom field you added, go to the Template Content field and add the following code in the appropriate place.

<tr>
    <td><b>Subject</b></td>
    <td>{{var data.subject}}</td>
</tr>

Where subject in data.subject is the name of the field you added in form.phtml. It should be the same in both places.

Now Click on Save Template to save your new template.

Step 5: This is the final step. Here we will choose our newly created template as the Contact Us template.

For this Go to STORES => Configuration and then click on Contacts under the General tab.

Now go to the Email Options section, select Custom Contact Form from the Email Template drop-down option

That’s it. You are ready with a new field on your contact us page.

  • Written by: BizSpice
  • Posted on: October 8, 2018