Magento’s default contact form is smiple, which only have name, email, telephone and comment fields. If you want to supply more friendly contact us page, you have to customize the contact form.

Contact Form in Magento

The contact form in Magento is plain vanila that consists of name, email address and a comment textarea only. This is good for most stores, but if you want to use the Contact form for service detail enquiry or collect more data, the plain vanilla simply can’t cut it.

Customize the Contact Form

You can add form elements such as drop-down menus, radio buttons, checkboxes and in this article we are going to show you just that.

First go to System > Transactional Emails to add a new template.

Under the Load default template, choose the Contact Form from the drop-down menu in Template

Once the template loaded, you will see the plain vanilla code like so:

Name: {{var}}
E-mail: {{var}}
Telephone: {{var data.telephone}}
Comment: {{var data.comment}}

We can expand it by adding “dropdown”, “radio” and “checkbox” like so:

Name: {{var}}
E-mail: {{var}}
Website: {{var}}
Telephone: {{var data.telephone}}
Which department you wish to contact: {{var data.dropdown}}
Are you a: {{var data.supplier}} {{var data.vendor}}
Which product types you wish to discuss?: {{var data.type}}
Comment: {{var data.comment}}

Now go to your Contact form file located at template/contacts/form.phtml to add the form codes.

*Please note, if your theme does not have form.phtml, you need to copy the app/design/frontend/base/default/template/contacts/form.phtml to app/design/frontend/package/theme/template/contacts/.

Below codes are a sample.

<!– start dropdown menu –>
<div class=”input-box”>
<label for=”dropdown”><?php echo Mage::helper(‘contacts’)->__(‘Which department you wish to contact’) ?></label>
<select name=”dropdown” id=”dropdown”>
<option value=”” selected>select…</option>
<option name=”retail” value=”Retail”>Retail</option>
<option name=”wholesale” value=”Wholesale”>Wholesale</option>
<option name=”customerservice” value=”Customer Service”>Customer Service</option>
<option name=”logistics” value=”Logistics”>Logistics</option>
<option name=”general” value=”General”>General</option>
<!– start radio button – use radio button if only one option is allowed –>
<div class=”input-box-full”>
<p>Are you a?</p>
<label for=”supplier”><?php echo $this->__(‘Supplier’) ?></label>
<input type=”radio” name=”supplier” id=”supplier” value=”Supplier” />
<label for=”vendor”><?php echo $this->__(‘Vendor’) ?></label>
<input type=”radio” name=”vendor” id=”vendor” value=”Vendor” />
<!– start checkboxes – use checkbox when you allow more than one elements being chosen –>
<div class=”input-box-full”>
<p>Which product types you wish to discuss?</p>
<label for=”type”><?php echo $this->__(‘Apparel’) ?></label>
<input type=”checkbox” name=”type” id=”type” value=”apparel” />
<label for=”type_1″><?php echo $this->__(‘Furnitures’) ?></label>
<input type=”checkbox” name=”types[]” id=”type_1″ value=”furnitures” />
<label for=”type_2″><?php echo $this->__(‘Computer’) ?></label>
<input type=”checkbox” name=”types[]” id=”type_2″ value=”computer” />
<label for=”type_3″><?php echo $this->__(‘eBooks’) ?></label>
<input type=”checkbox” name=”types[]” id=”type_3″ value=”eBooks” />

And the result:

magento contact form

After you finished aboved steps and test the contact form, you may note the result still is same as before, it may Transactional Emails template doesn’t work. One way to fix that you can change the app/locale/en_US/template/email/contact_form.html directly as followed format:

Contact Name: {{var}}
Email Address: {{var}}
Zip Code: {{var data.zipcode}}
City: {{var}}
Country: {{var}}
Telephone: {{var data.telephone}}
Type of Product to be Packed: {{var data.producttype}}
Type of Bag/Film: {{var data.bagtype}},{{var data.bagtype_1}},{{var data.bagtype_2}},{{var data.bagtype_3}},{{var data.bagtype_4}}
Quantity: {{var data.quantity}}
Number of Colors for Printing: {{var data.colornumber}}
Material: {{var data.material}},{{var data.material_1}},{{var data.material_2}},{{var data.material_3}}

Additional Information: {{var data.comment}}


You may also like

Leave A Comment

Please enter your name. Please enter an valid email address. Please enter message.