How To Append Additional Fields In Magento’s Default Contact Form?

Magento itself provides a lean Contact Us form which can be used by customers to contact the store owners. But, what if you want to take additional inputs from your user? Customizing Magento Contact Us form is one of the most common request any Magento developer recives. So, here is an easy way of appending/inserting more fields to customize Magento Contact form.

Step 1. Edit form.phtml file located at app/design/frontend/default/YOUR_THEME/template/contacts/form.phtml. Suppose you want to add subject field after telephone. Then find the following lines of code

1
2
3
4
5
6

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

And just add the following code to add subject as a new field in the contact us form

1
2
3
4
5

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

Step 2. Now to show this field in contact us mail login to Admin Panel => System => Transactional E-mails and click Add New Template and from the Template drop-down box select Contact Form then Load Template. Under template content you will see a piece of code like this:

1
2
3
4

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

You can add your new field Subject after Telephone : {{var data.telephone}} like this:

1
2
3
4
5

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

Then enter the template name and click on Save Template.

Step 3. Now the final step is to go to System => Configuration and select Contacts. Then under the Email Options, select your new template under the Email Template drop-down and click on Save Config.

Similarly, you can add any numbers of fields in your Magento’s default Contact Form.

Please leave us a comment and share your experiences of customizing Magento’s default Contact form with us.