Add Custom Fields To Contact Form In Magento

Recently one of my customers required additional functionality which required me to add custom fields to their contact form. Although doing this requires more than back-end configuration, with the way Magento’s transactional emails work –  this job is achievable for people with low level developer skill.

Editing your Form.phtml

1.Firstly you are required to edit your form.phtml. This file controls your contact form. This file can be found at:

app/design/frontend/YOUR_THEME/YOUR_PACKAGE/template/contacts/form.phtml

If it isn’t, make a copy from your default/base theme so your changes aren’t overwritten with the next update.

2. Locate the following code:


<ul class="form-list">
<li class="fields">
<div class="field">
<label for="name" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Name') ?></label>
<div class="input-box">
<input name="name" id="name" title="<?php echo Mage::helper('contacts')->__('Name') ?>" value="<?php echo $this->escapeHtml($this->helper('contacts')->getUserName()) ?>" class="input-text required-entry" type="text" />
</div>
</div>


3. Directly under enter the following code:

<li>
<label for="YOUR_FIELD"><?php echo Mage::helper('contacts')->__('YOUR_FIELD') ?></label>
<div class="input-box">
<input name="YOUR_FIELD" id="YOUR_FIELD" title="<?php echo Mage::helper('contacts')->__('YOUR_FIELD') ?>" value="" class="input-text" type="tel" />
</div>
</li>


Remember to replace all instances of “YOUR_FIELD” to the required field name.

Now save this field. We are finished with it.

Create A New Transactional Email

1. Firstly, in your Magento control panel navigate to:

System -> Transactional E-mails -> Add New Template

From here you will need to load the contact form template using the drop down.

2. You will see the following code


Name: {{var data.name}}
E-mail: {{var data.email}}
Telephone: {{var data.telephone}}
Comment: {{var data.comment}}


Make the additional of the following code:


Comment: {{var data.YOUR_FIELD}}


Remembering to replace “YOUR_FIELD” with the name chosen in the template file.

3. Now navigate to:

System -> Configuration -> Contacts -> Email Options

Set your “Email Template” to the newly created modified template.

4. Refresh your cache & test.