Add Custom Fields to Magento’s Contact Us Form

The Magento ecommerce platform comes with an array of standard features and functions that set it apart as one of the most complete and functional ecommerce platforms. This is one of the reasons that developers and site owners are attracted to it.

On the downside, all of Magento’s functionality brings with it a certain level of complexity that can, at times, be frustrating even for experienced developers. One example is Magento’s “Contact” form.

Some developers might expect the form, and the PHP to process it, to be in the same file, since some other applications manage forms that way. If you wanted to add a custom field to the existing Contact Us form, you’d head to that file and be done. But in order for Magento to offer the flexibility that it does, it often uses more than one file rather, than stuffing everything in one place.

In this tutorial, I will demonstrate how to add a custom form field to Magento version 1.4.1.1.

Step No. 1: Make a Choice about Site Hierarchy

For this tutorial, I am going to add a form field that asks for the user’s Twitter handle. I am going to place that field in the form.phtml template in my Magento installation. This file should be located at app > design > frontend > base > default > template > contacts where “base” is the Magento package and “default” is the Magento theme.

I have something of a choice about how I want to manage this file. I am using the default package with the Modern theme for this demonstration, not the base package with the default theme. But the Modern theme does not have a form.phtml template of its own. When a theme is missing a file from the basic Magento structure, the Magento platform programmatically moves up to the default or base package to get the proper template. This is a huge time saver when I am creating themes, since I avoid creating separate files if I’m planning on using those in Magento’s base package.

For my example, I can either make my changes within the base package’s form.phtml template, or I can recreate this template in the Modern theme.

Both approaches have some merit. But I generally recreate override files rather than change the base package, since doing so can make it easy, for example, to run multiple storefronts from the same Magento backend.

So I won’t just open the template and start coding. Rather I will copy it and its position in the Magento hierarchy to the Modern Theme. Specifically, I add a “contacts” folder to app > design > frontend > default > modern > template and place my new copy of form.phtml in it.

Step No. 2: Add Your Custom Field to the Form Template

With my form.phtml file in place, I head to the code. I want to insert the following, positioning it after the field, for the user’s Twitter handle.

1.     <li>
2.                 <label for="twitter"><?php echo Mage::helper('contacts')->__('Twitter') ?></label>
3.                 <div class="input-box">
4.                     <input name="twitter" id="twitter" title="<?php echo Mage::helper('contacts')->__('Twitter Handle') ?>" value="" class="input-text" type="text" />
5.                 </div>
6.             </li>

This code matches Magento’s out-of-the-box structure and produces the desired field.

In my view, the Magento Contact Us form has a case of divitis, meaning that it uses too many or unnecessarydiv elements. So in my own work, I almost always remove the extra div elements, leaving me with leaner code, which might look like the following.

1.  <label for="twitter"><?php echo Mage::helper('contacts')->__('Twitter') ?></label>
2.  <input name="twitter" id="twitter" title="<?php echo Mage::helper('contacts')->__('Twitter Handle') ?>" value="" class="input-text" type="text" />

I would also need to strip out the div elements (and list items) from the rest of the form. But for this tutorial, I am just going to leaving things as they are, since my focus is on adding a custom field, not discussing the finer points of using elements. I just wanted you to be aware.

Step No. 3: Create a Custom Email Template

If I filled out this form right now, and sent it, the site administrator would get an email saying that a question or comment had been submitted. That email response would have my name, my email address my telephone number, and my comment, but not my Twitter handle, since the form that generates the notification email is not yet looking for my new, custom field.

In Magento, it is easiest to create email templates in the administration panel, rather than trying to code them from scratch. So I head to the site backend, clicking System > Transactional Emails > Add New Template.

Magento allows me to use an existing email template as the starting point for my new template, so I select “Contact Form.”

Magento loads the template for me. And using the platform’s block syntax, I add the following line.

1. Twitter Handle: {{var data.twitter}}

With this simple change, my form will now include the user’s Twitter handle when it informs the site administrator about the submission. So I’m done.

Summing Up

In just three easy steps, I’ve demonstrated how to add a custom field to Magento’s Contact Us form. The process itself is very easy. But if you didn’t know where to look in Magento’s often complex file hierarchy, it can be frustrating.

Speaking of knowing where things are, if I wanted to require my new custom field or look at the logic that is processing the form, I would head to app > code > core > Mage > Contacts > controllers and look forIndexController.php.

If I decided to modify this file, which is part of the core that gets overwritten when you upgrade, I would first copy it to app > code >local > Mage > Contacts, and then make my changes.