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.

Spice up 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 data.name}}
E-mail: {{var data.email}}
Telephone: {{var data.telephone}}
Comment: {{var data.comment}}

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

Name: {{var data.name}}
E-mail: {{var data.email}}
Website: {{var data.website}}
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.

Below codes are from our New Green Magento Premium Theme.

<!-- 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>
</select>
</div>
<!-- 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" />
</div>
<!-- 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" />
</div>

And the result:

magento contact form

You might also be interested in:

If you find this article useful, please share it, dig it or tweet it.