Visual Feedback Animation

Hello Plumsail!

I was thinking of adding this feature to my forms. The feature I would like to add is, visual feedback when a user hits the 'submit' button in a form. I think it would be pretty cool to add this to improve the UX for my form.

Is there a simple way of adding this to Plumsail or would I need to use CSS & JavaScript to do this?

Here is the link to the animation I want to add: Using Animation to Improve the Mobile App User Experience — Shopify App Development

image

Dear @DryChips,
It shouldn't be too hard to implement. You can just hide the form, and show the animation. If the form is not valid, then show the form again.

You can try JavaScript code like this:

fd.spBeforeSave(function(){
  $('.fd-form').prepend('<img id="savingFormAnim" src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" />')
  $('.fd-form-content').hide();
  if(!fd.isValid){
    $('#savingFormAnim').remove();
    $('.fd-form-content').show();
  }
});
1 Like