1

I'm trying to create a Feedback form Sidebar slider.

Workout:

step 1:

C:\wamp\www\magento\app\design\frontend\default\theme327k\layout\local.xml

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.1.0">
<default>
    <reference name="head">
        <action method="addItem"><type>skin_css</type><name>css/mrova-feedback-form.css</name></action>
        <action method="addItem"><type>skin_js</type><name>js/mrova-feedback-form.js</name></action>
       <!-- <action method="addJs"><script>/js/jquery-1.11.2.min.js</script></action>  -->
    </reference>
    <reference name="content">
        <block type="core/template" name="feedback.box" template="html/feedbackbox.phtml"/>
    </reference>
</default>
</layout>

step 2:

C:\wamp\www\magento\app\design\frontend\default\theme327k\template\html\feedbackbox.phtml

   <div id="mrova-feedback" style="margin-top: -225.5px; top: 50%; display: block; height: 451px; right: -420px;     z-index: 66666;">
        <div id="mrova-contact-thankyou" style="display: none;">
            Thank you.  We'hv received your feedback.
        </div>
        <div id="mrova-form">
            <form id="mrova-contactform" action="feedbackbox.phtml" method="post">
                <ul >
                    <li>
                        <label for="mrova-name">Your Name*</label> <input type="text" name="mrova-name" class="required" id="mrova-name" value="">
                    </li>
                    <li>
                        <label for="mrova-email">Email*</label> <input type="text" name="mrova-email" class="required" id="mrova-email" value="">
                    </li>
                    <li>
                        <label for="mrova-message">Message*</label>
                        <textarea class="required" id="mrova-message" name="mrova-message"  rows="8" cols="30"></textarea>
                    </li>
                </ul>
                <input type="submit" value="Send" id="mrova-sendbutton" name="mrova-sendbutton">
            </form>
        </div>
        <div id="mrova-img-control"></div>
    </div>


<?php
header('content-type: application/json; charset=utf-8');

if (isset($_GET["mrova-name"])) {
    $name = strip_tags($_GET['mrova-name']);
    $email = strip_tags($_GET['mrova-email']);
    $message = strip_tags($_GET['mrova-message']);
    $header = "From: ". $name . " <" . $email . ">"; 

    $ip = $_SERVER['REMOTE_ADDR'];
    $httpref = $_SERVER['HTTP_REFERER'];
    $httpagent = $_SERVER['HTTP_USER_AGENT'];
    $today = date("F j, Y, g:i a");    
    $recipient = 'abc@gmail.com';
    $subject = 'Contact Form';
    $mailbody = "
First Name: $name
Email: $email
Message: $message
IP: $ip
Browser info: $httpagent
Referral: $httpref
Sent: $today
";
    $result = 'success';

    if (mail($recipient, $subject, $mailbody, $header)) {
        echo json_encode($result);
    }
}
?>

step 3:

C:\wamp\www\magento\skin\frontend\default\theme327k\css\mrova-feedback-form.css

label {
    display:block; 
    padding-bottom:5px; 
    margin-top:20px;
}

#mrova-feedback{
    display: hidden;
    width: 420px;
    position: fixed;
    right: -462px;
    border: 1px solid #3cb58c;
    padding: 8px 20px;
    background-color: #fff;
}

#mrova-contactform ul {
    margin: 0;
    padding: 0;
}

#mrova-contactform input, #mrova-contactform textarea{
    width: 400px;
    padding: 10px;
    border: 1px solid #ccc;
}

#mrova-contactform ul li {
    list-style:none; 
    padding-bottom:20px;
}

#mrova-img-control{
    cursor: pointer;
    position: absolute;
    left: -52px;
    width: 52px;
    background: transparent url('http://192.168.1.65/magento/feedback.jpg');
    height: 168px;
}

#mrova-contactform #mrova-sendbutton {
    width:60px;
    background:#db4f4a; color:#fff; 
    cursor:pointer;
    padding:5px 10px; 
    border: none;
}

step 4:

C:\wamp\www\magento\skin\frontend\default\theme327k\js\mrova-feedback-form.js

    (function ($) {
$.fn.vAlign = function() {
    return this.each(function(i){
    var h = $(this).height();
    var oh = $(this).outerHeight();
    var mt = (h + (oh - h)) / 2;    
    $(this).css("margin-top", "-" + mt + "px"); 
    $(this).css("top", "50%");
    }); 
};
$.fn.toggleClick = function(){
    var functions = arguments ;
    return this.click(function(){
            var iteration = $(this).data('iteration') || 0;
            functions[iteration].apply(this, arguments);
            iteration = (iteration + 1) % functions.length ;
            $(this).data('iteration', iteration);
    });
};
})(jQuery);
(function($) {
    $(window).load(function(event) {

//cache
    $img_control = $("#mrova-img-control");
    $mrova_feedback = $('#mrova-feedback');
    $mrova_contactform = $('#mrova-contactform');

    //setback to block state and vertical align to center
    $mrova_feedback.vAlign()
    .css({'display':'block','height':$mrova_feedback.outerHeight()});
    //Aligning feedback button to center with the parent div 

    $img_control.vAlign()
    //animate the form
    .toggleClick(function(){
        $mrova_feedback.animate({'right':'-2px'},1000);
    }, function(){
        $mrova_feedback.animate({'right':'-'+$mrova_feedback.outerWidth()},1000);
    });

    //Form handling
    $('#mrova-sendbutton').click( function() {
                var url = 'feedbackbox.phtml';
                var error = 0;



                $('.required', $mrova_contactform).each(function(i) {
                    if($(this).val() === '') {
                        error++;
                    }
                });
                // each
                if(error > 0) {
                    alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.');
                } else {
                    $str = $mrova_contactform.serialize();

                    //submit the form
                    $.ajax({
                        type : "GET",
                        url : url,
                        data : $str,
                        success : function(data) {

                            if(data == 'success') {
                                // show thank you
                                $('#mrova-contact-thankyou').show();
                                $mrova_contactform.hide();
                            } else {
                                alert('Unable to send your message. Please try again.');
                            }
                        }
                    });
                    //$.ajax

                }
                return false;
            });

});

})(jQuery);

console error :

enter image description here How can I solve this issue?

how can i solve the error?

0

You can't set feedbackbox.phtml as url. You need to set controller action URL as var url to fix the problem.

Please check C:\wamp\www\magento\skin\frontend\default\theme327k\js\mrova-feedback-form.js:

$('#mrova-sendbutton').click( function() {
var url = 'feedbackbox.phtml';

and change the value of url.

  • After change the var url = url; the mail received but the response like "Unable to send your message. Please try again" but i received mail. How can i solve this error? – zus Oct 10 '18 at 4:42
  • Any idea about this error? showing "Unable to send your message. Please try again" instead of showing Success message. – zus Oct 10 '18 at 5:46
  • @zus, This is because after sending the email, you should return success, but you are returning it within json_encode() function. – Mohit Kumar Arora Oct 10 '18 at 6:09
  • the success message show like : snag.gy/ZV4jRG.jpg – zus Oct 10 '18 at 6:11
  • Okay, how can i alter my code? i need to display success message on the same slide-bar. – zus Oct 10 '18 at 6:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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