Magento 1.9 - How to add a custom Feedback form to Magento and it should display all pages

[Aveeva]

@Rahul Gupta  like this https://snipboard.io/ugpYKI.jpg if i click feedback form button form should be open like this https://snipboard.io/0l96qv.jpg

[Aveeva]

@Rahul Gupta  Here is my code https://www.dropbox.com/sh/32zqgejubfllz0h/AACkB_iIh-KJQxtEUikZ8i9Na?dl=0 how can i apply with website all pages.

[Rahul Gupta]

@Aveeva i think you have asked this on stack overflow and someone has provided the full answer for it.

https://magento.stackexchange.com/questions/244255/how-to-get-sidebar-slider-feedback-form-in-home-p...

Please try this and let me know if you stuck anywhere.

Thanks

[Aveeva]

@Rahul Gupta  I am not someone asked, i just want like that. Answer he provided not working. 

[Rahul Gupta]

@Aveeva are you getting the form on frontend using that code ?

[Aveeva]

@Rahul Gupta  yes, but not working and alignment also not correct.

[Rahul Gupta]

@Aveeva i have tried the same code and it is working fine.

Use the same code and do some changes which i suggest and then let me know.

Replace the code of  mrova-feedback-form.js with the below code.

(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);
    });
};

$(window).load(function() {
    //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 = 'send.php';
                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);

In the morva-feedback-form.css add the correct path of your image.

If you are facing issue with this code then show me the error on console because i have check this code and it is working fine.

Thanks

[Rahul Gupta]

@Aveeva one more thing add below code in your css file on line 14.

z-index: 99;

[Aveeva]

@Rahul Gupta  yes wokring, but small correction how can i do that https://snipboard.io/CTbcQl.jpg ?

[Aveeva]

@Rahul Gupta  Even remove z-index still black color on scroll visual. 

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;
    /*z-index: 99;*/
}

#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;
}