Custom Animated Submit Button for Ninja Forms

Ninja Forms is easily one of my favorite WordPress plugins. It’s one of the most design agnostic form building plugins I’ve come across and has saved me time on every project. Every now and then a designer asks for some UI that isn’t easily accommodated by most form markup. I needed to animate a submit button with a fancy hover effect and an icon font. I had already styled some anchor markup with the same effect (Codepen below) and was hoping to apply it to the site’s forms with relative ease.

I reached out to the WP Ninjas team and they were extraordinarily helpful in pointing me in the direction of Custom Field Templates, which I was previously unaware of. Below demonstrates how to set up your own Custom Field Template, I am creating a Submit button, but this works with other field types as well! If you are creating your own themes, you can simply create a “ninja-forms” directory, “templates” directory, and a “fields-submit.html” file inside of your theme as shown below and you’ll be all set to continue.

If you are using a Child Theme, create the same folder structure, but will also need to add the following code in your functions.php file for Ninja Forms to recognize the template directory. More information here.

Inside of the “fields-submit.html” file, I am going to take the markup from the animated anchor link in Codepen and modify it to accept information from Ninja Forms. You can, of course, use your own markup.

Then I took the CSS from the Codepen and place it in style.css, as well as called Font Awesome in functions.php, wpbeginner has a great tutorial on adding Font Awesome here. Now when you visit a form on the site you can see the new submit button in action, before and after picture below!






6 responses to “Custom Animated Submit Button for Ninja Forms”

  1. Hagen Avatar

    Love it! You’ve helped me a lot.
    Thank you so much. I really appreciate it

  2. […] complained about styling forms before on this blog. But things have gotten better over the last several years and we are starting to see some browser […]

  3. Neal Avatar

    Thanks a lot!!!!!

    1. philhoyt Avatar

      Happy to help!


    Thanks so much for this!

  5. Camille Dugaduga Avatar

    Thanks a lot for this, still working as of now.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.