Magento: Add a custom field to the Contact Us Form


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}}

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.

Advertisements

One thought on “Magento: Add a custom field to the Contact Us Form

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s