Custom Contact Form In Magento

Aug 30, 2011

MagentoThe standard Magento contact form is built into the Magento framework and doesn’t allow for admins to manage the content, this article describes your options for managing content on the contact page as well as maintaining multiple contact forms and customising their fields.

The normal contact form is a core piece of functionality within Magento and there are several options for customizing it.

Adding a static block to the contact form

The simplest requirement to fulfil is being able to add content above or below the form containing an introduction, title and alternative contact options such as address and email information. This can very easily be done using Magento layout XML and a static block.

Copy the contacts.xml layout file from the base/default template and place it in your theme. tHe important area of this file is the contacts_index_index handler. Within the content reference you should see the contact form template being added and you simply need to add a cms block referencing a static block you have created. See below for an example where I have added a static block with the id of “contact_text” underneath the form.

<reference name="content">
  <block type="core/template" name="contactForm" template="contacts/form.phtml"/>
  <block type="cms/block" name="contact-text-add">
    <action method="setBlockId"><block_id>contact_text</block_id></action>
  </block>
</reference>

Embedding the contact form on a CMS Page

This is actually simpler than adding content using a static block and allows you greater flexibility to position and style content. It also allows you to show the contact form on multiple pages.

To do this you simply add a widget with reference to the form action and template to the CMS page.

{{block type="core/template" name="contactForm" form_action="/contacts/index/post" template="contacts/form.phtml"}}

You will need to be careful to check that your links all point to your CMS page and not the original contacts page (which you can disable in the configuration options).

Custom fields in Magento contact form

Adding a new field to the Magento contact form is a two stage process. Firstly you need to edit the template that contains the HTML for the form and posts the data through to the Magento back-end. Thankfully the Magento PHP accepts any fields you post and then makes them available to you for the second stage, which is to add the fields into the email that is generated, so that you can see what the customer enters.

Adding a field to the template is simple if you are familiar with HTML. You need to edit the template file that you will find in the base/default themes templates folder under contacts/form.phtml. This template has a ul element of class fields, with each field being contained in an li element. You simply need to add a new element such as the one below…

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

The second part is to modify the email template that will be sent to you when somebody fills-in the form. This can be done either by modifying the email template under the app/locale folders or by using the template editor in Magento which can be found under System->Transactional Emails. If you go for the latter option you will also need to tell Magento to use your new version of the template in the Contacts configuration.

The template you are looking for is called contact_form.html (locale email templates) or Contact Form (the transactional email editor in the admin).

In both cases you simply need to add a reference to your new field, for example…

Company: {{var data.company-name}}

For a bit more information on how to do this take a look at the [Magento wiki][1].

Multiple contact forms

This is simply a case of combining the methods described above. You should be able to create a CMS Page for each form and then specify a template for each one with whatever fields you want to collect. The only slight annoyance is that you will always have just the one contact email template but you should be able to tailor this to distinguish between the contact forms.

[1]: http://www.magentocommerce.com/wiki/4_-_themes_and_template_customization/contacts/add_fields_to_contact_form