Our Friends at Gravity Wiz have recently released their amazing Page Transitions Perk in public beta. Together with JetSloth’s popular Image Choices add-on, the two go hand in hand to create beautiful & interactive forms and add a Gravity Forms Page Transition effect. Learn how by downloading our demo form and embedded CSS to create a dynamic sliding form on your website.
Bring your Gravity Forms to life with animated transitions between form pages and Image Choices.
The Wizards over at Gravity Wiz have recently released their beta version of a new Gravity Forms perk called Page transitions. We saw an early version and demo of this perk on their website some time ago and just had to develop a CSS style for this perk, along with the use of our popular Gravity Forms add-on Image Choices.
The two go hand in hand so we couldn’t resist designing a beautiful skin for a demo form to showcase just how well the two add-ons will work together.
Live Demo
We’ve designed and built a special demo to help demonstrate how great the 2 add-ons work together! Once you have both add-ons installed and up and running, grab the below CSS from this tutorial, and apply it to your form.
You’ll need the below Gravity Forms add-ons
To get started with this tutorial, you’ll need the 2 below Gravity Forms add-ons. Our very own Gravity Forms Image Choices, and Gravity Wiz’s Page Transitions Perk (currently in beta release)
Add the CSS to your Image Choices form
Copy and paste the below custom CSS styles to your form settings (via the image choices plugin custom CSS box) or via any method you are used to, applying custom CSS changes to your theme or form. If you’re not comfortable doing this just download the form export below, which has the CSS included in the export. Note, you will need both add-ons mentioned above installed, however for the form export to work.
Please note* The below CSS will only work with Gravity Forms version 2.6+
Gravity Forms Page Transition settings
The page transitions are fairly limited and easy to work with, so no problems here. In the demo above, we’ve gone with a user click activation to slide to the next page, with the slide transition effect. We’ve tested this demo with both new and legacy Gravity Forms markup, so you should not have any problems using this demo with older forms or Gravity Forms versions.
For best results, we recommend having all your Gravity Forms, Gravity Forms add-ons and WordPress core + theme up to date, however.
The easy option – download the form example to add Gravity Forms Page Transition effects to your forms
If you’d like to take the easy option (recommended) and you have both Image Choices and Page Transitions perk already installed, simply download our example form shown in this tutorial and import it into your Gravity Forms. It has all the CSS already emmbeded to style your form, along with example fields and pages setup. So take it for a test drive!
