Actually 'Contact Us' and 'Orders and returns' are not CMS pages. They are actually pages from a separate module. They are more like the 'Login' or 'Register' page than like CMS pages.
To create a page like this you can create a simple module with a controller, one block and one template. Let's call the extension Easylife_Customform. For this you will need the following files.
app/etc/modules/Easylife_Customform.xml
- module declaration file
<?xml version="1.0"?>
<config>
<modules>
<Easylife_Customform>
<active>true</active>
<codePool>local</codePool>
</Easylife_Customform>
</modules>
</config>
app/code/local/Easylife/Customform/etc/config.xml
- config file
<?xml version="1.0"?>
<config>
<modules>
<Easylife_Customform>
<version>0.0.1</version>
</Easylife_Customform>
</modules>
<global>
<blocks>
<customform><!-- block alias -->
<class>Easylife_Customform_Block</class>
</customform>
</blocks>
<helpers>
<customform><!-- helper alias -->
<class>Easylife_Customform_Helper</class>
</customform>
</helpers>
</global>
<frontend>
<routers>
<customform>
<use>standard</use>
<args>
<module>Easylife_Customform</module>
<frontName>customform</frontName><!-- url key for module -->
</args>
</customform>
</routers>
<layout>
<updates>
<easylife_customform>
<file>easylife_customform.xml</file><!-- frontend layout file -->
</easylife_customform>
</updates>
</layout>
<translate>
<modules>
<Easylife_Customform>
<files>
<default>Easylife_Customform.csv</default><!-- translation file (not mandatory) -->
</files>
</Easylife_Customform>
</modules>
</translate>
</frontend>
</config>
app/design/frontend/base/default/layout/easylife_customform.xml
- frontend layout file
<?xml version="1.0"?>
<layout>
<customform_index_index translate="label" module="customform">
<label>Custom form</label>
<reference name="root">
<action method="setTemplate"><template>page/2columns-right.phtml</template></action><!-- can be different -->
</reference>
<reference name="content">
<block type="core/template" name="customform" template="easylife_customform/form.phtml" /><!-- content of page -->
</reference>
</customform_index_index>
</layout>
app/code/local/Easylife/Customform/Helper/Data.php
- default module helper
<?php
class Easylife_Customform_Helper_Data extends Mage_Core_Helper_Abstract{
}
app/design/frontend/base/default/template/easylife_customform/form.phtml
- the actual html for the form - make this look like you need
<form action="<?php echo $this->getUrl('customform/index/send')?>">
<input type="text" name="name" />
<input type="submit" />
</form>
app/code/local/Easylife/Customform/controllers/IndexController.php
- the module controller
<?php
class Easylife_Customform_IndexController extends Mage_Core_Controller_Front_Action{
public function indexAction(){ //this will display the form
$this->loadLayout();
$this->_initLayoutMessages('core/session'); //this will allow flash messages
$this->renderLayout();
}
public function sendAction(){ //handles the form submit
$post = $this->getRequest()->getPost();
//do something with the posted data
Mage::getSingleton('core/session')->addSuccess($this->__('Your message was sent'));//add success message.
$this->_redirect('*/*');//will redirect to form page
}
}
This should be it. Clear the cache and you should be able to access the form at mysite.com/customform
I hope I wrote the code correctly and didn't miss something