I added a codeable task here
This mission consists in modifying the Ajax spinner of the submit GravityForms forms button.
There is in the Gravity Forms documentation the possibility to easily modify the spinner in the case of an Ajax form.
Thus in a snippet it is very easy to modify the destination URL of the spinner (gform_ajax_spinner_url - see the link in the sources below)
In order to modernize the aspect of the form I want to launch an SVG animation that will be in the foreground different according to the form.
For this purpose it is necessary to :
-
Modify the Ajax gravity rendering according to the ID of the form (and therefore its loaded iframe)
-
Load into Ajax a “div” container with a class and an ID instead of the simple link proposed by GravityForm
-
the ID of this new “div” must have a different “name+ID” depending on the form ID
-
Load a javascript script (Bodymovin/lottie - see below) will propel the SVG animation chosen in the container div
-
Load other javascript script (Bodymovin/lottie - see below) must be loaded into the Iframe to run the SVG animation
SVG animation
I chose an incredible solution that exports animations directly from After Effect and can be easily integrated.
Currently, the website logo works with this solution.
Bodymovin / Lottie works like that:
1 - a javascript script loaded
2 - a tag with an empty ID (div or other)
3 - a script that gives the parameters to launch the animation
Very simple, very light and above all perfectly responsive.
You will find the link that explains its integration below.
For the moment here are the snippets and codes already integrated in the site
In function.php
/** Change of the waiting spinner by a transparent gif */
add_filter(‘gform_ajax_spinner_url’,‘gf_spinner_replace’, 10, 2);
function gf_spinner_replace( $image_src, $form) {
return data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAP////yH5BABAEAAAAAAAAAAAAAAAAAAAAAAAABAAAAIBRAA7’; // replaces the spinner with a transparent white gif
}
In style.css
/*******************************/
/ Spinner svg //
/*******************************/
/* disabling the spinner while waiting for Lottie integration */
body img.gform_ajax_spinner {
display: none !important;
}
/* code waiting for the spinner to be displayed in full screen /
/
img.gform_ajax_spinner {
position: fixed !important;
z-index: 99999999;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block !important;
overflow: hidden !important;
width: 100% !important;
height: 100% !important;
background-color: rgba(0,0,0,0);
background-color: rgba(0,0,0,0,0.0.5),
url(’/assets/img/text-attente-0.3s-478x120px-anime.gif’);
background-image: linear-gradient(transparent,transparent),
url(’/capitone/assets/img/text-attente-0.3s-478x120px-anime.svg’);
background-repeat: no-repeat;
background-size: 478px 120px;
background-position: center center;
}
*/
In the header (between the “head” tags)
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.7/lottie.min.js" type="text/javascript"></script>
Sources