Magento 1.9 Create Custom Form and add Validation

Question

I would like to have a custom form with name, address and email fields. However, I am unsure how to achieve this using the proper magento way.

At the moment I have the following raw form in my cms page, which posts to a php file in the root of my magento:

<form action="/requestBrochure.php" id="brochureform" method="post">
    <ul class="form-list">
        <li><label>Name</label><br>
        <input class="input-text required-entry" id="name" name="name" style="width: 250px;" type="text"></li>

        <li><label>Email</label><br>
        <input class="input-text required-entry" id="email" name="email" style="width: 250px;" type="text"></li>

        <li><label>Address Line 1</label><br>
        <input class="input-text required-entry" id="address_line_1" name="address_line_1" style="width: 250px;" type="text"></li>

        <li><label>Address Line 2</label><br>
        <input class="input-text required-entry" id="address_line_2" name="address_line_2" style="width: 250px;" type="text"></li>

        <li><label>Address Line 3</label><br>
        <input class="input-text" id="address_line_3" name="address_line_3" style="width: 250px;" type="text"></li>

        <li><label>City</label><br>
        <input class="input-text required-entry" id="city" name="city" style="width: 250px;" type="text"></li>

        <li><label>Post Code</label><br>
        <input class="input-text required-entry" id="postcode" name="postcode" style="width: 250px;" type="text"></li>

        <li><label>Country</label><br>
        <input class="input-text required-entry" id="country" name="country" style="width: 250px;" type="text"></li>
    </ul><button class="form-button-alt" type="submit"><span>Submit Your Request</span></button>
</form>

The requestBrochure.php file:

<?php
$name = $_POST["name"];
$email = $_POST["email"];
$address_line_1 = $_POST["address_line_1"]; 
$address_line_2 = $_POST["address_line_2"]; 
$address_line_3 = $_POST["address_line_3"]; 
$postcode = $_POST["postcode"];     
$city = $_POST["city"]; 
$country = $_POST["country"];   



$to = "[email protected]";
$subject = "example Brochure Request";
$body .= "<p>The following customer have requested new example brochure.</p>";
$body .= "<p>Name : " . $name . "<p>";
$body .= "<p>Email  : " . $email . "<p>";
$body .= "<p>Address Line 1 : " . $address_line_1 . "<p>";
$body .= "<p>Address Line 2 : " . $address_line_2 . "<p>";
$body .= "<p>Address Line 3 : " . $address_line_3 . "<p>";
$body .= "<p>City : " . $city . "<p>";
$body .= "<p>Post Code : " . $postcode . "<p>";
$body .= "<p>Country : " . $country . "<p>";

$body .= "<br /><p>Kind regards,</p><p>example Admin</p>";


$headers = "From: "."[email protected]"."\r\n" .
"Reply-To: "."[email protected]"."\r\n". "Content-Type: text/html; charset=ISO-8859-1\r\n" .
 "X-Mailer: php";
 $sent=mail($to, $subject, $body, $headers);





$to = $email;
$subject = "example Brochure Request";

$body = "<img src='/images/example_logo_email.jpg' >";
$body .= "
<p>Thank you for requesting our new catalogue, which will be posted out to you immediately.</p>
";
$headers = "From: "."[email protected]"."\r\n" .
"Reply-To: "."[email protected]"."\r\n". "Content-Type: text/html; charset=ISO-8859-1\r\n" .
 "X-Mailer: php";
 $sent=mail($to, $subject, $body, $headers);

if ($sent) {


} else {

}


header('Location:  http://www.example.co.uk/thankyou' ) ;

This is a very simple way and is not the magento way. How can I do this in the correct manner?

I have also added the following external JS to my cms page:

 var customForm = new varienForm('brochureform',true);

via:

<reference name="head">
 <action method="addItem">
    <type>skin_js</type>
    <name>js/formvalid.js</name>
 </action>
</reference>

But, no validation is occurring and the form is still posted. The external javascript is loaded.

Sukumar Gorai · Accepted Answer · 2018-08-01 15:30:38Z

Create a module with below steps:

Step 1: Create Vendor_Module.xml under

app/etc/modules/Vendor_Module.xml

<?xml version="1.0"?>
<config>
  <modules>
    <Vendor_Module>
      <active>true</active>
      <codePool>local</codePool>
      <version>0.0.1</version>
    </Vendor_Module>
  </modules>
</config>

Step 2: Create config.xml under

app/code/local/Vendor/Module/etc/config.xml

<?xml version="1.0"?>
<config>
  <modules>
    <Vendor_Module>
      <version>0.0.1</version>
    </Vendor_Module>
  </modules>
  <frontend>
       <routers>
          <brochure>
              <use>standard</use>
              <args>
                 <module>Vendor_Module</module>
                 <frontName>brochure</frontName>
              </args>
           </brochure>
       </routers>
       <layout>
            <updates>
                <vendor_module>
                    <file>brochure.xml</file>
                </vendor_module>                
            </updates>
        </layout>
    </frontend>
  <global>
    <helpers>
      <module>
        <class>Vendor_Module_Helper</class>
      </module>
    </helpers>
  </global>
</config>

Step 3: Create IndexController.php under

app/code/local/Vendor/Module/controllers/IndexController.php

<?php
class Vendor_Module_IndexController extends Mage_Core_Controller_Front_Action
{
    public function indexAction()
    {
        $this->loadLayout();
        $this->renderLayout();
    }

    public function postAction()
    {
        $post = $this->getRequest()->getPost();

        if ($post){
            try {
                $name = $post["name"];
                $email = $post["email"];
                $address_line_1 = $post["address_line_1"]; 
                $address_line_2 = $post["address_line_2"]; 
                $address_line_3 = $post["address_line_3"]; 
                $postcode = $post["postcode"];     
                $city = $post["city"]; 
                $country = $post["country"];

                $to = "[email protected]";
                $subject = "example Brochure Request";
                $body .= "<p>The following customer have requested new example brochure.</p>";
                $body .= "<p>Name : " . $name . "<p>";
                $body .= "<p>Email  : " . $email . "<p>";
                $body .= "<p>Address Line 1 : " . $address_line_1 . "<p>";
                $body .= "<p>Address Line 2 : " . $address_line_2 . "<p>";
                $body .= "<p>Address Line 3 : " . $address_line_3 . "<p>";
                $body .= "<p>City : " . $city . "<p>";
                $body .= "<p>Post Code : " . $postcode . "<p>";
                $body .= "<p>Country : " . $country . "<p>";

                $body .= "<br/><p>Kind regards,</p><p>example Admin</p>";

                $from = $email;

                $mail = Mage::getModel('core/email');
                $mail->setToName('Your Name');
                $mail->setToEmail($to);
                $mail->setBody('Mail Text / Mail Content');
                $mail->setSubject($subject);
                $mail->setFromEmail($from);
                $mail->setType('html');// YOu can use Html or text as Mail format
                $mail->setBodyHTML($body);  // your content or message

                $mail->send();

                Mage::getSingleton('core/session')->addSuccess('Your inquiry was submitted and will be responded to as soon as possible. Thank you for contacting us.');
                $this->_redirect('*/*/');
                return;
            } catch (Exception $e) {
                Mage::getSingleton('core/session')->addError('Unable to submit your request. Please, try again later');
                $this->_redirect('*/*/');
                return;
            }
        } else {
            $this->_redirect('*/*/');
        }
    }
}

Step 4: Create Data.php under

app/code/local/Vendor/Module/Helper/Data.php

<?php
class Vendor_Module_Helper_Data extends Mage_Core_Helper_Abstract
{
}

Step 5: Create brochure.xml under

app/design/frontend/your_package/theme/layout/brochure.xml

<?xml version="1.0"?>
<layout version="0.1.0">
    <brochure_index_index>
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>
        <reference name="content">
            <block type="core/template" name="brochure.form" as="brochure_form" template="brochure/form.phtml"/>
        </reference>
    </brochure_index_index>
</layout>

Step 6: Create form.phtml under

app/design/frontend/your_package/theme/template/brochure/form.phtml

<form action="<?php echo $this->getUrl('brochure/index/post'); ?>" id="brochureform" method="post">
    <ul class="form-list">
        <li><label>Name</label><br>
        <input class="input-text required-entry" id="name" name="name" style="width: 250px;" type="text"></li>

        <li><label>Email</label><br>
        <input class="input-text required-entry" id="email" name="email" style="width: 250px;" type="text"></li>

        <li><label>Address Line 1</label><br>
        <input class="input-text required-entry" id="address_line_1" name="address_line_1" style="width: 250px;" type="text"></li>

        <li><label>Address Line 2</label><br>
        <input class="input-text required-entry" id="address_line_2" name="address_line_2" style="width: 250px;" type="text"></li>

        <li><label>Address Line 3</label><br>
        <input class="input-text" id="address_line_3" name="address_line_3" style="width: 250px;" type="text"></li>

        <li><label>City</label><br>
        <input class="input-text required-entry" id="city" name="city" style="width: 250px;" type="text"></li>

        <li><label>Post Code</label><br>
        <input class="input-text required-entry" id="postcode" name="postcode" style="width: 250px;" type="text"></li>

        <li><label>Country</label><br>
        <input class="input-text required-entry" id="country" name="country" style="width: 250px;" type="text"></li>
    </ul><button class="form-button-alt" type="submit"><span>Submit Your Request</span></button>
</form>
<script type="text/javascript">
    //<![CDATA[
        var brochureform = new VarienForm('brochureform', true);
    //]]>   
</script>

Now you can edit the postAction according to your requirement.

Url will be example.com/brochure You can change the url from config.xml by changing the frontname. — Sukumar Gorai, Commented Jul 31, 2018 at 16:01
What if I want to add this to an existing page? Like an cms page? — Vaishal Patel, Commented Jul 31, 2018 at 16:03
Trying your way site.co.k/brochure has a 404. Doesn't seem to be working — Vaishal Patel, Commented Jul 31, 2018 at 16:05

Pedram Behroozi · Accepted Answer · 2018-07-31 14:43:11Z

With an extension it is totally achievable. But explaining how to do this in an extension is beyond this answer.

To briefly explain, I'd follow these steps:

Create an extension.
Add a layout file in config.xml
Create a router in the extension.
Tell the router to load and render the layout file: $this->loadLayout(); $this->renderLayout();
In the layout file, bound a phtml file to PHP class. I mean create a block.
Paste the html code to your phtml file. Of course there's a Magento way to create forms.
Create a post action in the controller. A method like public function requestAction().
Validate the request. It should be POST only.
Do whatever you have to do after form submission.

And for the validation javascript. You can either insert the code inside the phtml file (step 6.) or you can add a new block with the code inside the block with your html content.

It's NOT a complete answer. It just intends to put you on the right track.

Stack Exchange Network

Magento 1.9 Create Custom Form and add Validation

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged
custom
forms
form-validation
or ask your own question.

Linked

Hot Network Questions

Magento 1.9 Create Custom Form and add Validation

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged customformsform-validation or ask your own question.

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
custom
forms
form-validation
or ask your own question.