Thursday, 16 August 2012

Add custom field in contact us form in magento


Steps for adding a custom field in the default Contact Us form are given below:
Step 1: Update the Contact Us form
First you have to edit the form.phtml file form template. which is located in (For default theme):
app/design/frontend/base/default/template/contacts/form.phtml
Now open the form.phtml file Add the following code in the desired position:
  1. <div class="field">
  2.     <label for="name-frefix" class="required"><em>*</em>('contacts')->
__('Name Prefix') ?></label>
  •     <div class="input-box">
  •            <select name="name-prefix" id="name-prefix" style="width:200px" class="required-entry">
  •                 <option value="" selected>Please select...</option>
  •                 <option value="mr">Mr.</option>
  •                 <option value="mrs">Mrs.</option>
  •             </select>
  •     </div>
  • </div>
  • Note: Here i used above code for my requirment. You should use code as your requirment. I used class=”required-entry” on the above code. This tells to the javascript validation that this field is required.
    Step 2: Create a custom transactional email template for Contact Form
    Now you need to create a custom email template for contact form with include the new field. To do this-
    Go: System -> Transactional Emails from Magento backend. then follw:
    1. Click on the Add New Template button
    2. From Load default template section, select “Contact Form” from the dropdwn list and click Load Template button.
    3. In the Template Information section, set the Template Name to “Custom Contact Form
    4. In the Template Content field, add the Name Prefix: {{var data.name-prefix}} line which is like:

    Now click on the Save Config button.
    Step 3: Assign the Custom template for Contact Us
    Now you have to assign Custom templete for your Contact Us form. To do this-
    Go: System -> Configuration . Then click on the Contacts tab from left panel under the General.
    In the Email Options section, set the Email Template to “Custom Contact Form”. which like-

    After that click on the Save Config button and you’re all done.

    No comments: