Magento – Add custom fields to the Contact Form

If you need to add additional fields to Magento’s default contact form, read on! First open the form.phtml file located in your /magento_root/app/design/frontend/YOUR_INTERFACE/YOUR_THEME/template/contacts/form.phtml. So, we are going to add a subject field to this contact form so that customers tell us the subject of their email. Open the file for editing in your favorite editor.

Find this section in the file below (this should be around line 39):

<div class="input-box">
    <label for="name"><?php echo Mage::helper('contacts')->__('Name') ?> <span class="required">*</span></label><br />
    <input name="name" id="name" title="<?php echo Mage::helper('contacts')->__('Name') ?>" value="<?php echo $this->htmlEscape($this->helper('contacts')->getUserName()) ?>" class="required-entry input-text" type="text"/>
</div>

We are going to add another field above this one for the subject of the email. Copy and paste this code above the block of code (name field) referenced above.

<div class="input-box">
    <label for="subject"><?php echo Mage::helper('contacts')->__('Subject') ?> <span class="required">*</span></label><br />
    <input name="subject" id="subject" title="<?php echo Mage::helper('contacts')->__('Subject') ?>" value="" class="required-entry input-text" type="text"/>
</div>

As far as Magento is concerned, it doesn’t care what fields we add to this form. It is written in such a way that it accepts all of the field posted for processing and send that out to the transactional e-mail form that you create. Now, go to System->Transactional E-mails in the Magento Admin section. Click “Add New Template” and from the “Template” dropdown box select “Contact Form” then “Load Template”. Under template content you will see:

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

Comment: {{var data.comment}}

Add your new field before Name: {{var data.name}} so that now it should looks like this:

Subject: {{var data.subject}}
Name: {{var data.name}}
E-mail: {{var data.email}}
Telephone: {{var data.telephone}}

Comment: {{var data.comment}}

Enter a new name under “Template Name” to save your new Template and click on “Save Template”. Now we need to tell Magento to use this new template for the Contact form. Go to System->Configuration and select “Contacts”. Under “Email Options”, select your new template under the “Email Template” dropdown box. Click on “Save Config”. For validatation  add this class to the field:

class=”required-entry input-text”
That’s it!

DOWNLOAD SOLUTION HERE