have a shortcode animate from a link click

Dear Callanwp,

Thanks for using the Animate It!

The setup you wish can be achieved by using the custom scripts.

Please follow the below steps:
1. Install and activate the “Insert Headers and Footers” plugin
https://wordpress.org/plugins/insert-headers-and-footers/

2. Insert the following code in the “Scripts in footer” section of the Plugin
https://ps.w.org/insert-headers-and-footers/assets/screenshot-1.png

<script>
	(function($){
		var animationClasses = 'animated shake duration2';
		$(document).ready(function() {
			$("body").on("click", ".maxbutton-27", function(e) {
				e.preventDefault();
				var $form = $("#wpforms-6418");
				if($form.length) {
					if($form.hasClass("animated")) {
						$form.removeClass(animationClasses);    
					}                                
					$form.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {    
						$form.removeClass(animationClasses);    
					});
					$form.addClass(animationClasses);
				}
			});
		});
	})(jQuery);
</script>

_________________________________________________

You can change the animations by generating them from Animate it Classes generator:https://www.downloads.eleopard.in/class-generator-wordpress

Please note that the button click is defined using the unique button class “maxbutton-27” and animation is applied using the unique Contact form ID “wpforms-6418”

You would need to change these if you are applying animation to some other set of button and form.

Please let me know if this works for you

In that case,

Please update the code to the following:

<script>
	(function($){
		var animationClasses = 'animated shake duration2';
		$(document).ready(function() {
			$("body").on("click", "._mPS2id-h", function(e) {
				e.preventDefault();
				var $form = $("#wpforms-6418");
				if($form.length) {
					if($form.hasClass("animated")) {
						$form.removeClass(animationClasses);    
					}                                
					$form.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {    
						$form.removeClass(animationClasses);    
					});
					$form.addClass(animationClasses);
				}
			});
		});
	})(jQuery);
</script>

Please note that I have added the class “_mPS2id-h” as seen on the Size & Price Calculator link

Scratch the previous codes, and do the following.

1. Add class eds-animate-form on any hyperlink, button etc, that you wish on clicking, should animate the form.

2. Paste the following code in “Scripts in footer” section of the Plugin:

<script>
	(function($){
		var animationClasses = 'animated shake duration2';
		$(document).ready(function() {
			$("body").on("click", ".eds-animate-form", function(e) {
				e.preventDefault();
				var $form = $("#wpforms-6418");
				if($form.length) {
					if($form.hasClass("animated")) {
						$form.removeClass(animationClasses);    
					}                                
					$form.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {    
						$form.removeClass(animationClasses);    
					});
					$form.addClass(animationClasses);
				}
			});
		});
	})(jQuery);
</script>

Now any link/button with class eds-animate-form will make the form shake.

Yes that can be done.
But please scratch everything again 🙂

Now. Paste the following code in “Scripts in footer” section of the Plugin:

<script>
	(function($){
		var animationClasses = 'animated shake duration2';
		$(document).ready(function() {
			$("body").on("click", ".eds-animate-btn", function(e) {
				e.preventDefault();
				var $form = $(".eds-animate-form");
				if($form.length) {
					if($form.hasClass("animated")) {
						$form.removeClass(animationClasses);    
					}                                
					$form.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {    
						$form.removeClass(animationClasses);    
					});
					$form.addClass(animationClasses);
				}
			});
		});
	})(jQuery);
</script>

Now. Please add the following classes in the button and forms:
1. On the Buttons and Links: eds-animate-btn
2. On the forms: eds-animate-form

Note that you can have this setup for one form per page. i.e. you can have as many buttons/links as you want on a page, but all those should animate only one form on that particular page.

Glad to know it worked.
Please feel free to let me know if you have any other issues.

Marking this ticket resolve for now.