Tagged: ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • December 21, 2016 at 1:50 am #726858
    mark2mrktng

    Hi,

    I’m having some issues with apply Enfold styling to a multi page form built in Gravity Forms. My main issue right now is:

    I’m trying to add the Enfold Progress Bar as a shortcode through Gravity Form’s HTML content field. The progress bar is only partially rendering with no animation, colours or stlying.

    I assume I need to add or create a CSS class? Any direction/advice would be much appreciated

    Thanks.

    December 21, 2016 at 7:58 am #726931
    Rikard

    Hey mark2mrktng,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    January 5, 2017 at 3:25 am #729705
    mark2mrktng

    Hi Rikard, sorry for the delayed response… I’ve send the info privately.

    January 5, 2017 at 4:56 pm #729936
    mark2mrktng

    Another issue to add to this, when you enter the password to begin the survey the animation on the ‘Next’ button does not come out smoothly & is jerky. Is this a CSS issue as well?

    January 6, 2017 at 7:10 am #730196
    Nikko

    Hi,

    Is the page still there? I tried to check it but it returns this:

    Nothing Found
Sorry, the post you are looking for is not available. Maybe you want to perform a search?

    Best regards,
    Nikko

    January 6, 2017 at 7:47 am #730216
    mark2mrktng

    Appologies Nikko, I recently changed the URL. Please see the updated link in private content

    thanks

    January 8, 2017 at 5:38 pm #730880
    mark2mrktng

    Hi Nikko, just wondering if you’d been able to make any progress on this ? Thanks.

    January 9, 2017 at 8:24 am #731005
    Nikko

    Hi,

    I just checked your site and tested it out and I think the reason it doesn’t make any progress is because it’s still the same page just new content being fetched inside gravity forms. I don’t have a gravity form plugin that I could test, but if you could give us temporary admin access so we can have a quick look on the settings, we’ll try to give it a shot. You might also want to try this plugin for the gravity form’s progress bar: https://wordpress.org/plugins/gravity-forms-start-progress-bar-at-zero-percent/

    As for the buttons, try adding this css code in Quick CSS (located in Enfold > General Styling):

    #top .gform_wrapper .button {
    font-family: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    border-radius: 3px;
}

    Best regards,
    Nikko

    January 9, 2017 at 4:05 pm #731175
    mark2mrktng

    Hi Nikko,

    Thanks for taking a look. So how the progress bars work is that there is a new HTML block in each step of the survey, with each block have a custom progress bar manually set at different percentages for each step of the survey, (eg Step 1 is set at 10%, Step 2 at 20%, etc). You’ll notice the the text within the progress bar also changes with each step as well (eg. Step 1 of 8, Step 2 of 8, etc) so there isn’t any issues there

    The progress bar that I’m using it the Enfold progress bar shortcode (not the Gravity forms native progress bar) & the issue is the animations/styling is not rendering as it normally does on other Enfold progress bars throughout the site. I’ve provided temporary login details in the private content.

    Thanks!

    January 10, 2017 at 8:02 am #731428
    Nikko

    Hi,

    I couldn’t login with the login details you have given, please check.

    Best regards,
    Nikko

    January 10, 2017 at 10:21 am #731482
    mark2mrktng

    Sorry, please see below

    January 12, 2017 at 3:15 pm #732667
    mark2mrktng

    Please see below for the updated survey password

    January 13, 2017 at 2:33 am #732913
    Nikko

    Hi,

    I have added a code block in the page with this code:

    <script type="text/javascript">
  function av_progress() {
    jQuery( ".avia-progress-bar .progress" ).each(function() {
      jQuery( this ).addClass( "avia_start_animation" );
    });
  }
</script>

    And on the gravity forms, I have added this code at the bottom of html content where you placed the shortcode:

    <script>if ( typeof av_progress == 'function' ) { av_progress(); }</script>

    Let us know if it’s good :)

    Best regards,
    Nikko

    January 20, 2017 at 4:32 am #736164
    mark2mrktng

    Excellent, that works!! Thanks!!!

    January 21, 2017 at 6:28 am #736706
    Rikard

    Hi,

    Great, glad we could help :-)

    Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.