Ajax Floating Contact Form

Here are the group of codes I copied from this page and tried to make a similar one by adding 3 code blocks in my page:

Code Block #1

<script type="text/javascript">
$(document).ready(function(){ 
	var _scroll = true, _timer = false, _floatbox = $("#contact_form"), _floatbox_opener = $(".contact-opener") ;
	_floatbox.css("right", "-320px"); //initial contact form position
	//Contact form Opener button
	_floatbox_opener.click(function(){
		if (_floatbox.hasClass('visiable')){
            _floatbox.animate({"right":"-320px"}, {duration: 300}).removeClass('visiable');
        }else{
           _floatbox.animate({"right":"0px"},  {duration: 300}).addClass('visiable');
        }
	});
	//Effect on Scroll
	$(window).scroll(function(){
		if(_scroll){
			_floatbox.animate({"top": "30px"},{duration: 300});
			_scroll = false;
		}
		if(_timer !== false){ clearTimeout(_timer); }           
			_timer = setTimeout(function(){_scroll = true; 
			_floatbox.animate({"top": "10px"},{easing: "linear"}, {duration: 500});}, 400); 
	});
	//Ajax form submit
    $("#submit_btn").click(function() { 
        var proceed = true;
        //simple validation at client's end
        //loop through each field and we simply change border color to red for invalid fields       
        $("#contact_form input[required=true], #contact_form textarea[required=true]").each(function(){
            $(this).css('border-color',''); 
            if(!$.trim($(this).val())){ //if this field is empty 
                $(this).css('border-color','red'); //change border color to red   
                proceed = false; //set do not proceed flag
            }
            //check invalid email
            var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
            if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
                $(this).css('border-color','red'); //change border color to red   
                proceed = false; //set do not proceed flag              
            }   
        });
       
        if(proceed) //everything looks good! proceed...
        {
            //get input field values data to be sent to server
            post_data = {
                'user_name'     : $('input[name=name]').val(), 
                'user_email'    : $('input[name=email]').val(), 
                'country_code'  : $('input[name=phone1]').val(), 
                'phone_number'  : $('input[name=phone2]').val(), 
                'subject'       : $('select[name=subject]').val(), 
                'msg'           : $('textarea[name=message]').val()
            };
            
            //Ajax post data to server
            $.post('floating-contact-form', post_data, function(response){  
                if(response.type == 'error'){ //load json data from server and output message     
                    output = '<div class="error">'+response.text+'</div>';
                }else{
                    output = '<div class="success">'+response.text+'</div>';
                    //reset values in all input fields
                    $("#contact_form  input[required=true], #contact_form textarea[required=true]").val(''); 
                }
                $("#contact_form #contact_results").hide().html(output).slideDown();
            }, 'json');
        }
    });
    
    //reset previously set border colors and hide all message on .keyup()
    $("#contact_form  input[required=true], #contact_form textarea[required=true]").keyup(function() { 
        $(this).css('border-color',''); 
        $("#result").slideUp();
    });
	
});
</script>

Code Block #2

<div class="floating-form" id="contact_form">
<div class="contact-opener">Open Contact Form</div>
    [av_contact email=' (Email address hidden if logged out) ' title='Contact Us' button='Submit' on_send='' sent='Your message has been sent!' link='manually,http://' subject='' autorespond='' captcha='active' hide_labels='aviaTBhide_labels' form_align='' color='']
[av_contact_field label='Name' type='text' options='' multi_select='' check='is_empty' width=''][/av_contact_field]
[av_contact_field label='Last Name' type='text' options='' check='is_empty' width=''][/av_contact_field]
[av_contact_field label='E-Mail' type='text' options='' multi_select='' check='is_email' width=''][/av_contact_field]
[av_contact_field label='phone' type='text' options='' check='is_phone' width=''][/av_contact_field]
[av_contact_field label='Desired Territory' type='select' options='Colorado, Connecticut, Delaware, Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana, Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana, Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina, North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina, South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia, Wisconsin, Wyoming' multi_select='aviaTBaviaTBmulti_select' check='is_empty' width=''][/av_contact_field]
[av_contact_field label='Zip Code' type='text' options='' check='is_empty' width=''][/av_contact_field]
[av_contact_field label='Your Available Cash Is:' type='select' options=', $200.000-$500.000, $500.000-1.000.000,' check='is_empty' width=''][/av_contact_field]
[av_contact_field label='Your Approx. Networth is:' type='select' options=',$00000,0000' check='is_empty' width=''][/av_contact_field]
[av_contact_field label='What is your timeline to invest?' type='select' options=',60 days, 90 days, 120 days, over 120 days' check='' width=''][/av_contact_field]
[/av_contact]
</div>
</div>

Code Block #3

.floating-form{max-width:320px;padding:30px 30px 10px;font:13px Arial,Helvetica,sans-serif;background:#F9F9F9;border:1px solid #ddd;right:10px;position:fixed;box-shadow:-2px 0 8px rgba(43,33,33,.06);-moz-box-shadow:-2px 0 8px rgba(43,33,33,.06);-webkit-box-shadow:-2px 0 8px rgba(43,33,33,.06)}.contact-opener{position:absolute;left:-88px;transform:rotate(-90deg);top:100px;text-shadow:1px 1px 1px rgba(0,0,0,.43);border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0}.floating-form-heading{font-weight:700;font-style:italic;border-bottom:2px solid #ddd;margin-bottom:10px;font-size:15px;padding-bottom:3px}.floating-form label{display:block;margin:0 0 15px}.floating-form label>span{width:70px;font-weight:700;float:left;padding-top:8px;padding-right:5px}.floating-form span.required{color:red}.floating-form .tel-number-field{width:40px;text-align:center}.floating-form .long{width:120px}.floating-form input.input-field{width:68%}.floating-form .select-field,.floating-form .tel-number-field,.floating-form .textarea-field,.floating-form input.input-field{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;border:1px solid #C2C2C2;box-shadow:1px 1px 4px #EBEBEB;-moz-box-shadow:1px 1px 4px #EBEBEB;-webkit-box-shadow:1px 1px 4px #EBEBEB;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;padding:7px;outline:0}.floating-form .input-field:focus,.floating-form .select-field:focus,.floating-form .tel-number-field:focus,.floating-form .textarea-field:focus{border:1px solid #0C0}.floating-form .textarea-field{height:100px;width:68%}.contact-opener,.floating-form input[type=button],.floating-form input[type=submit]{-moz-box-shadow:inset 0 1px 0 0 #3985B1;-webkit-box-shadow:inset 0 1px 0 0 #3985B1;box-shadow:inset 0 1px 0 0 #3985B1;background-color:#216288;border:1px solid #17445E;display:inline-block;cursor:pointer;color:#FFF;padding:8px 18px;text-decoration:none;font:12px Arial,Helvetica,sans-serif}.contact-opener,.floating-form input[type=button]:hover,.floating-form input[type=submit]:hover{background:linear-gradient(to bottom,#2D77A2 5%,#337DA8 100%);background-color:#28739E}.floating-form .success{background:#D8FFC0;color:#2E6800;border-left:3px solid #2E6800}.floating-form .error,.floating-form .success{padding:5px 10px;margin:0 0 5px;border:none;font-weight:700}.floating-form .error{background:#FFE8E8;color:red;border-left:3px solid red}

The contact form still stays float but the buttom part is out of page and the opener doesnt work. Haven’t checked if the contact form itself works or not.

Lest do it together.

I found a solution and now it works perfectly.

Thanks.