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 = '[email protected]';
$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 :
How can I solve this issue?
how can i solve the error?
