How To Customize Magento Contact Us Page From Admin Panel

magento contact us page customization
There are a variety of tutorials devoted to Magneto Contact Us page customization. They are written in different lanquages (English, German, Spanish and others). In this article, we want to present an alternative to others. We tried to make our article useful, especially for people, who do not have any programming skills. The principal aim is to show how to change Contact Us page not touching file system every time. So, let's look how to do it. 

First of all, you should make certain that Contact Us is enabled: System->Configuration->Contacts 

Configuration Magento System Admin

After, you need to remove a link to default Magento Contact Us page.

Home page

Navigate to the Layout folder of your current theme (the path looks like app/design/frontend/default/your_theme/layout/) and then, create local.xml file with the next contents:

<?xml version="1.0"?>

<layout version="0.1.0">

   <default>

       <reference name="footer_links">

           <action method="removeLinkByUrl">

               <url>http://your.site/index.php/contacts/</url>

           </action>

       </reference>

   </default>

</layout>

You should keep in mind that it is necessary to replace http://your.site/index.php/contacts/ with your current URL to Contact Us page. Then, you have to save file, refresh cache and link to default contacts page will disappear. One more file you have to create is contact-us-form.phtml. This is a template for your form. Place it to Template folder of your current theme (the path looks like app/design/frontend/default/your_theme/template/contact-us/contact-us-form.phtml) Add form code to the file and save it.

<form action="<?php echo Mage::getUrl('contacts/index/post'); ?>" id="contactForm" method="post">

   <div class="fieldset">

       <h2 class="legend">

            <?php echo Mage::helper('contacts')->__('Contact Information') ?>

       </h2>

       <ul class="form-list">

           <li class="fields">

               <div class="field">

                   <label for="name" class="required">

                       <em>*</em>

                       <?php echo Mage::helper('contacts')->__('Name') ?>

                   </label>

                   <div class="input-box">

                     <input name="name" id="name"

                     title="<?php echo Mage::helper('contacts')->__('Name') ?>"

                     value="<?php echo $this->htmlEscape($this->

                     helper('contacts')->getUserName()) ?>"

                     class="input-text required-entry" type="text" />

                   </div>

               </div>

               <div class="field">

                   <label for="email" class="required"><em>*</em>

                       <?php echo Mage::helper('contacts')->__('Email') ?>

                   </label>

                   <div class="input-box">

                     <input name="email" id="email"

                     title="

                     <?php echo Mage::helper('contacts')->__('Email') ?>"

                     value="<?php echo $this->htmlEscape($this->

                     helper('contacts')->getUserEmail()) ?>"

                     class="input-text required-entry validate-email"

                     type="text" />

                   </div>

               </div>

           </li>

           <li>

               <label for="telephone">

                    <?php echo Mage::helper('contacts')->__('Telephone') ?>

               </label>

               <div class="input-box">

                 <input name="telephone" id="telephone"

                 title="

                 <?php echo Mage::helper('contacts')->__('Telephone') ?>"

                 value="" class="input-text" type="text" />

               </div>

           </li>

           <li class="wide">

               <label for="comment" class="required"><em>*</em>

                    <?php echo Mage::helper('contacts')->__('Comment') ?>

               </label>

               <div class="input-box">

                 <textarea name="comment" id="comment"

                 title="<?php echo Mage::helper('contacts')->__('Comment') ?>"

                 class="required-entry input-text" cols="5" rows="3">

                 </textarea>

               </div>

           </li>

       </ul>

   </div>

   <div class="buttons-set">

       <p class="required">

             <?php echo Mage::helper('contacts')->__('* Required Fields') ?>

       </p>

       <input type="text" name="hideit" id="hideit" value=""

       style="display:none !important;" />

       <button type="submit"

       title="<?php echo Mage::helper('contacts')->__('Submit') ?>"

       class="button"><span><span>

           <?php echo Mage::helper('contacts')->__('Submit') ?></span></span>

       </button>

   </div>

</form>

<script type="text/javascript">

   //<![CDATA[

   var contactForm = new VarienForm('contactForm', true);

   //]]>

</script>

Now, you have to create a new CMS page. 

Contact Us Manage Content Pages CMS Magento Admin

To set Contact Us form you just need to enter following code to the place where you want to display this form:

{{block type='core/template' name='contactForm' template='contact-us/contact-us-form.phtml'}} 

As a result, the page will look like: 

Contact Us cms

When all developments are carried out, you can save the page. Then, you have to add the link of new created page to the footer. And lastly, navigate to CMS->Static Blocks and add this link to the list:

Footer Links Static Blocks CMS Magento Admin

Now, you should save the block and all done! After, you will see the link to new Contact Us page in your website footer. Do not forget that you are able to modify this page, whenever you need, using the admin panel. We hope that this article will assist you with coding. If you still have some questions, do not hesitate and ask our Sam Ecommerce Magento Specialists.

Read more here:

Comments (0):
Leave a comment:
*Your comment will be published after approval by site administrator.