I finally came up with the following pieces of codes and put in in code block. it worked perfectly except for the mobile version:

1) The contact form distance from the top of the page is set for desktop and don’t know how to adjust it in mobile version so whole contact form can be seen in mobile version

2) the contact form goes behind texts and pictures.

Can you solve those issues for me?

Thanks.

Code Block #1

<!-- include Google hosted jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){ 

	var _scroll = true, _timer = false, _floatbox = $("#contact_form"), _floatbox_opener = $(".contact-opener") ;
	_floatbox.css("right", "-300px"); //initial contact form position
	
	//Contact form Opener button
	_floatbox_opener.click(function(){
		if (_floatbox.hasClass('visiable')){
            _floatbox.animate({"right":"-300px"}, {duration: 300}).removeClass('visiable');
        }else{
           _floatbox.animate({"right":"0px"},  {duration: 300}).addClass('visiable');
        }
	});
	
	//Effect on Scroll

	$(window).scroll(function(){
		if(_scroll){
			_floatbox.animate({"top": "130px"},{duration: 300});
			_scroll = false;
		}
		if(_timer !== false){ clearTimeout(_timer); }           
			_timer = setTimeout(function(){_scroll = true; 
			_floatbox.animate({"top": "110px"},{easing: "linear"}, {duration: 500});}, 400); 
	});

	
	
    //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

<!-- contact form start -->
<div class="floating-form" id="contact_form">
<div class="contact-opener">Open Contact Form</div>
    <div class="floating-form-heading">Request Information</div>
    <div id="contact_results"></div>
    <div id="contact_body">
         [av_contact email=' (Email address hidden if logged out) ' title='' 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='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>
<!-- contact form end -->

Code Block #3

/* floating box style */
.floating-form {
    max-width: 300px;
    padding: 30px 30px 10px 30px;
    font: 13px Roboto;
    background: #F9F9F9;
    border: 1px solid #ddd;
    right: 10px;
    z-index: 1000;
    position: fixed;
    box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
    -moz-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
    -webkit-box-shadow:  -2px -0px 8px rgba(43, 33, 33, 0.06);
	}
.contact-opener {
    position: absolute;
    left: -88px;
    transform: rotate(-90deg);
    top: 80px;
    z-index: 1000;
    background-color: #a01818;
    padding: 9px;
    color: #ffffff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.43);
    cursor: pointer;
    border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
    -moz-box-shadow: -2px -0px 8px rgba(43, 33, 33, 0.06);
    -webkit-box-shadow:  -2px -0px 8px rgba(43, 33, 33, 0.06);

}

.floating-form-heading{
font-weight: bold;
color: Black;
font-family: Roboto;
border-bottom: 2px solid #ddd;
margin-bottom: 10px;
font-size: 22px;
padding-bottom: 3px;
}

• This reply was modified 8 years, 6 months ago by afarahani.

Thanks for the hard work Ismael,

I copied the codes as you mentioned and contact form floats but is not functioning as expected. it is big and does not slide. Please download the demo files of the form I previously mentioned here

It seems they use jquery for this purpose.

Any idea to make it work?

Hi,

Your instruction is not clear to me. I can’t put the full screen slider inside the layout element. Can you post a picture or be more clear on the steps.

Thanks.

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.

Thanks Josue!

Hi Josue,

I was expecting you sooner. Could you please let me know how I can get rid of these?

Unfortunately overwriting the files didn’t work. I have come to the conclusion that there are issues with theme files and also the wordpress installation. So I’ve decided to install a fresh copy of wordpress and Enfold theme and transfer everything to the new installation.

So as I am not familiar with this, please help me go through this without causing any trouble. My website has WPML installed with 4 languages. How should I backup the posts, pages, portfolios, menus, etc. so when I import it to the new installation everything works perfectly fine. Also I don’t want any corrupt file carried over to the new installation.

Looking forward to your best support.

Amir

I have seen that thread. doesn’t help.

By the way, your support really sucks lately. We designed the website 2 years ago. We didn’t change anything. Just updated the plugins and the theme. But we are experiencing serious issues and no one takes care of our problems. First the contact forms was not working. Now, the menu has been disappeared in mobile version and also the pages are not shown properly in mobile and tablet. You can see white gaps everywhere.

Can you please let me know why the website is experiencing so many trouble? Isn’t it because you guys change something in the theme?

Thanks,
Amir

The second image with hotspot is placed inside a color section and is supposed to be full width but the width doesnot adjust to the screen width.

Hey!

The code doesn’t work. I added important! at the padding line and it helped but still the width is not ok! the image doesn’t fit the width of the browser.

Rikard,

There are several pages with the same problem. Do you want me to recreate all those pages?

On this page the contact form is not shown: Contact us

And is not shown properly here (only a bunch of codes is shown) http://www.franchiseelites.com/top-franchise-information

and here : http://www.franchiseelites.com/e2-visa-franchise

Also the side bar contact form is now put in a code block. otherwise it doesn’t work too.

I think this is a serious problem and you might want your developers take a look at it.

Thanks,
Amir

Any,

I have de-activated all plugins but nothing changed. Let me know step by step process for deleting the files for installing the new theme so I can’t damage my website.

Thanks,
Amir

Hi Yigit,

All theme and plugins are updated. No difference.

Please help.

Here is the access to the website:

I copied the code from the widget and here is the link: http://pastebin.com/dvtkWL8F

The same code works well when I paste it in a blog post but it doesn’t work as a widget!