Custom Contact Form In Magento

Custom Contact Form In Magento magento help4The 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.

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.

  • http://www.ajibanda.com/ Aj Banda

    I’ve seen that you are using Magento and Ruby on Rails. Can you use both? I actually want to use alipay as a payment gateway for RoR but unfortunately I couldn’t find any info about it.

    hope you can suggest me info about this. thanks!

    • Anonymous

      Hi, I use both Magento and Ruby on Rails although never ont he same site – although I guess it would be possible. I have mixed Magento and WordPress before and if the requirements make the extra complexity worthwhile then it can be done.

      Unfortunately I know nothing at all about alipay… only bits and pieces I could find online suggested a lack of English documentation and I couldn’t find any third party libraries – so I think you are on your own. Perhaps look for a developer on China or Hong Kong who has dealt with this before?

      • http://www.ajibanda.com/ Aj Banda

        I see.. I’m having the same problem with Alipay being lack of English documentation. anyway thanks for answering my questions. :)

  • Gcupat

    Hi, I am using this method for a multistore set up but the landing page is redirecting back to the Main default store rather than staying same store that the contact us page is on. Is there any suggestions that you can provide to deal with a multi-store set up?

    • http://www.jimcode.org Jim Rowe

      Hi, I assume you are referring to this post? http://www.jimcode.org/2011/02/magento-multi-language-currency-region-setup/

      You may need to create subfolders or domains that contain some bare bones magento php that load the core libraries etc. but specifically set the store, language etc. I have done this before with subdirectories but I think if you mapped subdomains to the subfolders it would work just as well.

      I think I followed this post and managed to get it all working… http://www.magentocommerce.com/wiki/multi-store_set_up/multiple_website_setup_with_different_document_roots

      Let me know how you get on!

    • http://www.jimcode.org Jim Rowe

      Sorry, misundertood your problem! I have had a few problems like this actually – where I wanted to handle different contact forms differently. You might have to resort to overriding the module to do this, although I am surprised it doesn’t handle it properly in the first place.

      • Gcupat

        wow, thanks for the quick response! Yes I have a couple other store in the mutli-store (eg. www myshop com/store_one/index.php/contact_us/) and when I put the CMS page — {{block type=”core/template” name=”contactForm” form_action=”/contacts/index/post” template=”contacts/form.phtml”}} — Instead of the page ending up at “www myshop com/store_one/index.php/contact_us/post” (or where ever this is suppose to be), it ends up at “www myshop com/contacts/index/post”, which is the main site. Do you have any ideas how to make it stay within the same “store_one” store?

        • http://www.jimcode.org Jim Rowe

          I think you might need to specify the store in the form_action attribute, since you are using an absolute URL it is bypassing the stores.

  • Eduardo Silva

    If you want to have the contact form with in a phtml page then…

    1- add the block to the xml you want for example I wanted to add a request form to the product view so, i went to catalog.xml at the and add:

    2- just add the getChildHtml:

    getChildHtml(‘contactForm’) ?>

    So simple i know but took me 3 coffes like all easy things in magento…

    • http://www.jimcode.org Jim Rowe

      Thanks Eduardo, really useful! This obviously works the same for any block as well – and it is how the magento footer and headers work to bring in content set up in your layout xml. I think it is one of the key things to understand in Magento.