Magento: Add a custom field to the Contact Us Form

Magento’s default contact form asks the user for the essential contact info, e.g. name, email etc.. But you may need to ask for some additional info by adding some custom fields. Here’s how to do it.

Let’s use the following example scenario:
You want to add a drop box select element to ask the user ‘Where did you hear about us?’. The options will be: Google, Magazine, Word of Mouth, Other.

Update the Contact Us form template

Firstly you need to edit the contact form template.
If using the default theme, this code will be located in
/magento/app/design/frontend/base/default/template/contacts/form.phtml

Add the following markup to the template in the desired position:

<div class="input-box">
    <label for="where-hear"><?php echo Mage::helper('contacts')->__('Where did you hear about us?') ?> <span class="required">*</span></label><br />
    <select name="where-hear" id="where-hear" style="width:300px" class="required-entry">
        <option value="" selected>Please select...</option>
        <option value="Google">Google</option>
        <option value="Magazine">Magazine</option>
        <option value="Word of Mouth">Word of Mouth</option>
        <option value="Other">Other</option>
    </select>
</div>

Note the use of class=”required-entry” on the select element.. This tells the default javascript validation that this field is required. If the user tries to submit the form without choosing an option, then it will throw an error and highlight the field.

So that takes care of the form, now you need to set up a custom email template that includes the new field.

Create a custom transactional email template

Navigate to the following screen in your Magento admin:
System > Transactional Emails

1. Click Add New Template
2. In the top block (Load default template), select “Contact Form” from the drop box and click Load Template
3. In the Template Information block, set the Template Name to “Custom Contact Form”
4. In the Template Content field, add the following line where you want it to appear in the email:

   Where did you hear about us?: {{var data.where-hear}}

   Where did you hear about us?: {{var data.where-hear}}

Assign the custom email template

Navigate to the following screen in your Magento admin:
System > Configuration > General > Contacts

In the Email Options block, set the Email Template to “Custom Contact Form”.

Click Save Config and you’re all done.