-
Posts
-
Hello all. I have a site which uses Enfold and Gravity Forms – all goes well until I add conditional logic to my Gravity Forms. I have searched through many of the forum posts and could not find an iron clad method of fixing things so my form would load.
For example:
https://kriesi.at/support/topic/gravity-form-not-displaying-when-using-conditional-logic/
discusses enqueuing jquery but I am not sure how this is going to effect my Enfold environment.Our main site runs fine with no conditionals:
But the form on the right (and in the accordion for widths under 990) don’t show on my test:
Any ideas how to resolve this so I don’t break any Enfold functionality elsewhere?
Hi crtdude,
There is an error in JavaScript on your test page. It can be the reason the form does not function properly.
Best regards,
VictoriaVictoria,
I am aware there is an error in this page otherwise the Gravity Form would show up instead of just the column header that says SCHEDULE APPOINTMENT. However the error you claim is the culprit is not what I show is the problem. It appears Enfold is the issue. Please refer to the screenshot at: https://prnt.sc/jovgpp – Looks like jquery-migrate is the issue.The form loads fine here: http://eastsidegynecology.com/test-contact-us/
But not here: http://eastsidegynecology.com/test-eastside-gynecology-private-abortion-clinic-in-nyc/Okay support, enough of the finger pointing. This issue IS CERTAINLY NOT and issue with the Supsystic Slider used on the page. There are two URLs below. Both are WP password protected (password to view is ESGTEST) so as to avoid any SEO headaches. Kindly let me know where Enfold is botching up so it can be fixed.
Displays Okay
http://eastsidegynecology.com/test-eastside-gynecology-private-abortion-clinic-in-nyc/Does Not Display Okay
http://eastsidegynecology.com/testbad-eastside-gynecology-private-abortion-clinic-in-nyc/If you look at the page “Does Not Display Okay”, for resolutions under 990px I have the same form embedded in an accordion and it renders perfectly. Problem is for resolutions over 990px where the form is located to the right of the slider.
Any astute assistance would be appreciated.
Hi,
Thanks for the update. The pages require a password. Please post it on the private field. The jQuery errors don’t seem to be related to the issue but I can’t be sure until I get the chance to check the pages.
Best regards,
IsmaelIsmael, please read the post above the last. The password is noted there. You’ll also get a better understanding of the issue.
Hi,
Thanks for the update. I missed that. My bad. Something odd is happening. The page redirects to google whenever I try to enter the password.
Best regards,
IsmaelThe first link is gone, I could not leave them all up since Google scans our site frequently. This link is the one to view the errors – you’ll still need the password:
http://eastsidegynecology.com/test-eastside-gynecology-private-abortion-clinic-in-nyc/Also as an fyi, I conversed with the folks at Gravity Forms on my forms used. Since there are conditional fields used they suggested I duplicate the form and use one for 990 and over and the other for under 990 pixels. Over 990 the form appears to the right of the slider and under 990 it is within an accordion under a different slider.
Hi,
I’m sorry for the late response. The forms are displaying properly over and under 990px screens when I checked. Could you create a test / draft page without this workaround? Post the login details in the private field so that we can check it.
Best regards,
IsmaelIsmael, there is now only one link to view:
http://eastsidegynecology.com/test-eastside-gynecology-private-abortion-clinic-in-nyc/The error occurs when the page width is below 990 pixels. Set you width to 768px and refresh and you’ll see the accordion below the slider is empty when it should have a Gravity Form in it. We were previously told there was a javascript error being thrown in the embedded jssor slider above the form. I cannot see how that has anything to do with the form not being seen while the slider displays perfectly.
Hi,
Thanks for the info. I was able to to reproduce the issue and this is what I got from the console.
jssor.js?ver=1.0.0:69 Uncaught Error: Cannot scale jssor slider, 'width' of 'outer container' not valid. 'width' of 'outer container' should be positive number. e.g. 'width: 600px;' at Object.$Fail (jssor.js?ver=1.0.0:69)It’s a script error from a slider called “jssor”. The error points to an invalid container width and it makes sense because the error only occurs when the screen width is smaller than usual (e.g less than 789px). This is the same error @victoria reported. I know this may seem like we’re pointing figures, not seeing the problem as it is, etc etc but you can’t ignore the fact that the script error comes from the slider which is affecting the rest of the scripts including GF’s.
Have you tried to disable that slider before? Let’s see if the form works without the script error.
Best regards,
IsmaelIsmael, thanks for your efforts. Yes, I am now sure it is the culprit and have communicated with the script’s developer on the matter. It is called Supsystic Slider and they have embedded the freeware jssor slider as their start point – this is the issue.
For the record though, I am only using this slider for resolutions 990px and over since in that view we have a contact form located to the right of the slider. None of the options Enfold offers were working properly. If you view the page under 990px you’ll see I am using the Enfold full width slider as it has “rotating messaging with links”. I am all ears if you have a suggestion for an Enfold based solution that will work – I spent hours trying to work it out before opting for their slider since it worked next to the form. It has for some time now but the glitch came when we needed to activate conditional formatting for the Gravity Form.
The live page without conditional formatting is at:
http://eastsidegynecology.com/Hi,
None of the options Enfold offers were working properly.
Which slider options are not working? I think you should have opened up the slider issue first before opting in to an external slider script. Could you create a test page with the slider issue?
Best regards,
IsmaelI did exactly that some time ago. The Enfold full width slider has options (sliding messaging with links) that the non-full width slider does not have. I am using Enfold full width under 990px, it’s over 990px where I have a Gravity Form to the right of it is where I am using Supsystic slider. I would happily use an Enfold option if one was available – there is none. I was also told in another post to “hire a custom developer” by one of the mods. So, I just used some other plugin to make it work. Show me an example of an Enfold slider that works in a 2/3 column with other content in the other 1/3 column to the right of it AND does what the full-width slider does.
Hi,
Have you tried using the “Easy Slider” element? You can embed it inside one of the columns.
Best regards,
IsmaelYes and it can’t do what the full width slider can. Look at my slider and see if you can match what I have with the easy slider. Show me.
Hi,
Are you referring to the full width slider’s sliding animation and button? You can do that with the easy slider but you have to manually add the button shortcode inside the caption field and apply the sliding animation.
.avia-caption-title, .avia-caption-content { -webkit-transform: translate(0,0); transform: translate(0,0); visibility: hidden; } .avia_transform .active-slide .avia-caption-title { visibility: visible; -webkit-animation: caption-left 1s 1 cubic-bezier(0.985, 0.005, 0.265, 1); animation: caption-left 1s 1 cubic-bezier(0.985, 0.005, 0.265, 1); } .avia_transform .active-slide .avia-caption-content { visibility: visible; -webkit-animation: caption-right 1s 1 cubic-bezier(0.985, 0.005, 0.265, 1); animation: caption-right 1s 1 cubic-bezier(0.985, 0.005, 0.265, 1); }This is an example of the button shortcode.
[av_button label='Click me' link='manually,http://' link_target='' size='small' position='center' label_display='' icon_select='yes' icon='ue800' font='entypo-fontello' color='light' custom_bg='#444444' custom_font='#ffffff' av_uid='av-jijm0yeg' admin_preview_bg='']Best regards,
IsmaelIsmael, thanks for the info – this is a step in the right direction. Why is this not documented anywhere? I have no control over the display of the text & button color and positioning (they are white right now). How do I change color and position?
http://staging1.eastsidegynecology.com/test2-eastside-gynecology-private-abortion-clinic-in-nyc/
Hi,
It’s one of those custom modifications that deviates from the default functionality of the elements so it’s not documented anywhere and is only provided when requested. You can add this css code in the Quick CSS field to adjust the color and position. Adjust the values as needed.
.avia-slideshow .avia-caption .avia-caption-title { color: #000; } .avia_transform .active-slide .avia-caption-content { color: #000; } .avia-caption { bottom: auto; right: 17px; left: auto; top: 17px; }Best regards,
IsmaelIsmael, thanks for the information. I made the changes and it works perfectly. I guess we have a limitation of where the text appears and any buttons since I don’t see any way of changing the message positioning for each of the 4 slider panels I have. Whatever quick css entry I use (from the info you supplied above) is for ALL the sliders, correct?
- You must be logged in to reply to this topic.