Forum Replies Created
-
AuthorPosts
-
Ismael,
Thanks for the code. It did worked for the home page but I have the same issue with other pages below. Is the a code that can solve the issue site-wide?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, 7 months ago by afarahani.
Please find the website address below. I want the field get closer and smaller.
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?
non of the php or smtp method works. Can’t receive test emails.
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.
The page I copied the code is the demo at the bottom of this page
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.
The suggested plugin has not been update for 2 years. So I think it is not safe to install it. right?
regarding my experience. Not too much. that’s why I wanted you guys to help me implement this.
October 29, 2015 at 7:21 pm in reply to: Emergency Help Needed: XML files for other languages and mobile menu dissapeared #527090Thanks Josue!
October 28, 2015 at 11:24 pm in reply to: Emergency Help Needed: XML files for other languages and mobile menu dissapeared #526449Hey Josue!
I have told you this before if you remember. You provide real support on this site. It was so unfortunate that you came by so late.
Thanks,
AmirOctober 28, 2015 at 8:27 pm in reply to: Emergency Help Needed: XML files for other languages and mobile menu dissapeared #526376Hi Josue,
I was expecting you sooner. Could you please let me know how I can get rid of these?
October 26, 2015 at 11:20 pm in reply to: Emergency Help Needed: XML files for other languages and mobile menu dissapeared #525229Elliott, The issue is still there. Can you please take look inside my wordpress?
October 24, 2015 at 8:08 am in reply to: Emergency Help Needed: XML files for other languages and mobile menu dissapeared #524196Unfortunately 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
October 22, 2015 at 5:32 pm in reply to: Emergency Help Needed: XML files for other languages and mobile menu dissapeared #523159Ok!
As I mentioned to you even deactivating all plugins didn’t solve the issue. So I think I need to reinstall the theme.
Let me know what I need to do to completely deleting the theme. Do mean deleting the theme from backend of my wordpress or deleting the whole directory.
Does this affect my pages and my posts?
October 21, 2015 at 6:05 pm in reply to: Emergency Help Needed: XML files for other languages and mobile menu dissapeared #522418I 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,
AmirOctober 20, 2015 at 10:39 pm in reply to: Emergency Help Needed: XML files for other languages and mobile menu dissapeared #522051The 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.
Here is the link to the page. The width does not fit the screen width. Also I want to know how I can fit the image height to the screen height too.
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.
Thanks Yigit. Two more questions:
1) is there any way that I can use image with hotspot inside a color section to achieve both functionality of hot spot and the arrow pointing to the next section like here
2) is there any way to fit the image wit hot spot to the height of browser?
Thanks,
AmirAugust 28, 2015 at 7:49 pm in reply to: Contact Forms don't appear properly in sidebar and contact us pages #495078Rikard,
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,
AmirAndy,
I renamed the existing theme directory to Enfold-old and copied the new them files in directory Enfold and made sure that the theme in the new directory is activated.
The problem didn’t solve. Is this method has the same effect of deleting complete them directory and installing the new one?
Thanks,
AMirAny,
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,
Amirthis page also has problem in the contact form at the bottom of the page. Do you want me to put the shortcode inside a code block?!!!!
http://www.franchiseelites.com/e2-visa-franchise
And also here
August 25, 2015 at 5:01 am in reply to: Contact Forms don't appear properly in sidebar and contact us pages #492596Hi Yigit,
All theme and plugins are updated. No difference.
Please help.
Ismael,
Thanks for your help.
First: The problem is not solved. It was just a work around and it did create other problems. By doing that the right to left contact form is now left to right. and also a part of the code remains visible at the end of the contact form.
Second: What did you do to the styling of my Farsi pages. All the links are in green now! It was not supposed to change other things on my website!
Not satisfied with the support yet.
Amir
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!
-
AuthorPosts